/* ============================================================
   MyPokerLeague Design System — Tokens
   colors_and_type.css

   Evolves the legacy "dark-modern-layout.css" toward a sleeker,
   more mobile-friendly aesthetic while preserving the brand DNA:
   deep reds (felt + chip), gold accents (Vegas trim), and a
   dark "after-hours casino" surface palette.
   ============================================================ */

/* --- Webfont -------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=DM+Serif+Display&family=JetBrains+Mono:wght@400;600&display=swap');

:root {
  /* ============== COLOR — BRAND ============== */
  /* Red is the brand. Sourced from the poker-chip logo gradient. */
  --mpl-red-50:   #fff1f1;
  --mpl-red-100:  #ffdcdc;
  --mpl-red-200:  #ffb3b3;
  --mpl-red-300:  #ff7a7a;
  --mpl-red-400:  #ff4a4a;
  --mpl-red-500:  #ff2a2a;   /* bright red (logo highlight, focus) */
  --mpl-red-600:  #cc0000;   /* primary red (CTA, brand) */
  --mpl-red-700:  #a30000;
  --mpl-red-800:  #8b0000;   /* dark red (felt shadow) */
  --mpl-red-900:  #4a0000;   /* faded red (sidebar gradient stop) */

  /* Gold — Vegas trim from the chip's stripes */
  --mpl-gold-300: #ffd97a;
  --mpl-gold-400: #ffc23d;
  --mpl-gold-500: #ffa500;
  --mpl-gold-600: #d97706;
  --mpl-gold-700: #b45309;

  /* ============== COLOR — SURFACE (dark) ============== */
  --mpl-bg-0:     #0a0a0b;   /* page (true black, slightly warm) */
  --mpl-bg-1:     #131316;   /* base surface */
  --mpl-bg-2:     #1c1c20;   /* card / panel */
  --mpl-bg-3:     #26262c;   /* raised card, input bg */
  --mpl-bg-4:     #32323a;   /* hover, border-strong */

  /* Foreground */
  --mpl-fg-1:     #ffffff;
  --mpl-fg-2:     #d4d4d8;
  --mpl-fg-3:     #a1a1aa;   /* secondary */
  --mpl-fg-4:     #71717a;   /* muted */
  --mpl-fg-5:     #52525b;   /* disabled */

  /* Borders */
  --mpl-border-1: rgba(255, 255, 255, 0.06);
  --mpl-border-2: rgba(255, 255, 255, 0.10);
  --mpl-border-3: rgba(255, 255, 255, 0.16);
  --mpl-border-red: rgba(204, 0, 0, 0.35);

  /* ============== COLOR — SEMANTIC ============== */
  --mpl-success:  #10b981;
  --mpl-success-bg: rgba(16, 185, 129, 0.12);
  --mpl-warning:  #f59e0b;
  --mpl-warning-bg: rgba(245, 158, 11, 0.12);
  --mpl-danger:   #ef4444;
  --mpl-danger-bg: rgba(239, 68, 68, 0.12);
  --mpl-info:     #3b82f6;
  --mpl-info-bg:  rgba(59, 130, 246, 0.12);

  /* Tournament state colors — sourced from TournamentsList.razor */
  --mpl-state-scheduled:    var(--mpl-fg-3);
  --mpl-state-reg-open:     #3b82f6;     /* info / blue */
  --mpl-state-reg-closed:   #f59e0b;     /* warning / amber */
  --mpl-state-in-progress:  var(--mpl-red-500);
  --mpl-state-completed:    #10b981;     /* success / green */
  --mpl-state-cancelled:    #ef4444;     /* danger / red */

  /* ============== GRADIENTS ============== */
  /* Brand gradient — the chip, used for primary CTA + key surfaces */
  --mpl-grad-brand:  linear-gradient(135deg, #8b0000 0%, #cc0000 50%, #ff2a2a 100%);
  /* Sidebar gradient — slow fade from oxblood to charcoal */
  --mpl-grad-sidebar: linear-gradient(180deg, #1a0000 0%, #2d0000 30%, #131316 100%);
  /* Felt gradient — soft red glow against dark surface */
  --mpl-grad-felt:   radial-gradient(ellipse at 50% 0%, rgba(204,0,0,0.18) 0%, transparent 60%);
  /* Card gradient — subtle 1° lift */
  --mpl-grad-card:   linear-gradient(145deg, #1c1c20 0%, #222228 100%);
  /* Gold accent gradient — chip trim */
  --mpl-grad-gold:   linear-gradient(135deg, #ffd700 0%, #ffa500 60%, #ff8c00 100%);

  /* Podium / medal gradients — 1st gold, 2nd silver, 3rd bronze.
     Each pair is a "bright top / deep bottom" so embossed pills look minted. */
  --mpl-grad-medal-gold:   linear-gradient(135deg, #ffe98a 0%, #ffc23d 45%, #b8860b 100%);
  --mpl-grad-medal-silver: linear-gradient(135deg, #f3f4f6 0%, #cbd5e1 45%, #64748b 100%);
  --mpl-grad-medal-bronze: linear-gradient(135deg, #f6c089 0%, #cd7f32 45%, #6b3410 100%);

  --mpl-medal-gold:   #ffc23d;
  --mpl-medal-silver: #cbd5e1;
  --mpl-medal-bronze: #cd7f32;

  /* ============== SHADOWS ============== */
  --mpl-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.4);
  --mpl-shadow-sm:  0 2px 6px rgba(0, 0, 0, 0.35);
  --mpl-shadow-md:  0 6px 16px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --mpl-shadow-lg:  0 14px 30px rgba(0, 0, 0, 0.55), 0 4px 8px rgba(0, 0, 0, 0.3);
  --mpl-shadow-xl:  0 24px 60px rgba(0, 0, 0, 0.65);
  /* Brand glow — used sparingly for primary affordances and focus */
  --mpl-glow-red:   0 0 0 1px rgba(204, 0, 0, 0.4), 0 8px 24px rgba(204, 0, 0, 0.25);
  --mpl-glow-gold:  0 0 24px rgba(255, 165, 0, 0.25);

  /* ============== RADIUS ============== */
  /* Softer than legacy. Pills for chips, 12-16px for cards. */
  --mpl-radius-xs:  4px;
  --mpl-radius-sm:  8px;
  --mpl-radius-md:  12px;     /* default control radius */
  --mpl-radius-lg:  16px;     /* cards */
  --mpl-radius-xl:  24px;     /* hero / sheet */
  --mpl-radius-pill: 999px;

  /* ============== SPACING (4pt grid) ============== */
  --mpl-space-0:   0;
  --mpl-space-1:   4px;
  --mpl-space-2:   8px;
  --mpl-space-3:   12px;
  --mpl-space-4:   16px;
  --mpl-space-5:   20px;
  --mpl-space-6:   24px;
  --mpl-space-8:   32px;
  --mpl-space-10:  40px;
  --mpl-space-12:  48px;
  --mpl-space-16:  64px;

  /* ============== MOTION ============== */
  --mpl-ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
  --mpl-ease-out:       cubic-bezier(0.16, 1, 0.3, 1);
  --mpl-ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --mpl-dur-fast:       120ms;
  --mpl-dur:            200ms;
  --mpl-dur-slow:       320ms;

  /* ============== TYPOGRAPHY — FAMILIES ============== */
  --mpl-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mpl-font-display: 'DM Serif Display', 'Inter', Georgia, serif;  /* used sparingly for hero numerals / quotes */
  --mpl-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ============== TYPOGRAPHY — SCALE ============== */
  /* Tighter, more confident than Bootstrap defaults */
  --mpl-text-xs:    11px;
  --mpl-text-sm:    13px;
  --mpl-text-base:  15px;
  --mpl-text-md:    17px;
  --mpl-text-lg:    20px;
  --mpl-text-xl:    24px;
  --mpl-text-2xl:   30px;
  --mpl-text-3xl:   38px;
  --mpl-text-4xl:   48px;
  --mpl-text-5xl:   64px;

  --mpl-leading-tight:  1.15;
  --mpl-leading-snug:   1.35;
  --mpl-leading-normal: 1.55;
  --mpl-leading-loose:  1.75;

  --mpl-tracking-tight:  -0.02em;
  --mpl-tracking-snug:   -0.01em;
  --mpl-tracking-normal: 0;
  --mpl-tracking-wide:   0.04em;
  --mpl-tracking-caps:   0.12em;  /* eyebrow labels */

  /* ============== Z-INDEX ============== */
  --mpl-z-sidebar: 50;
  --mpl-z-header:  60;
  --mpl-z-overlay: 90;
  --mpl-z-modal:   100;
  --mpl-z-toast:   110;
}

/* ============================================================
   SEMANTIC TYPOGRAPHY UTILITY CLASSES
   ============================================================ */

.mpl-eyebrow {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--mpl-tracking-caps);
  color: var(--mpl-fg-3);
}

.mpl-h1 {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-4xl);
  font-weight: 800;
  line-height: var(--mpl-leading-tight);
  letter-spacing: var(--mpl-tracking-tight);
  color: var(--mpl-fg-1);
  margin: 0;
}

.mpl-h2 {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-3xl);
  font-weight: 700;
  line-height: var(--mpl-leading-tight);
  letter-spacing: var(--mpl-tracking-tight);
  color: var(--mpl-fg-1);
  margin: 0;
}

.mpl-h3 {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-2xl);
  font-weight: 700;
  line-height: var(--mpl-leading-snug);
  letter-spacing: var(--mpl-tracking-snug);
  color: var(--mpl-fg-1);
  margin: 0;
}

.mpl-h4 {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-xl);
  font-weight: 600;
  line-height: var(--mpl-leading-snug);
  color: var(--mpl-fg-1);
  margin: 0;
}

.mpl-h5 {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-lg);
  font-weight: 600;
  line-height: var(--mpl-leading-snug);
  color: var(--mpl-fg-1);
  margin: 0;
}

.mpl-body {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-base);
  font-weight: 400;
  line-height: var(--mpl-leading-normal);
  color: var(--mpl-fg-2);
}

.mpl-body-sm {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-sm);
  font-weight: 400;
  line-height: var(--mpl-leading-normal);
  color: var(--mpl-fg-3);
}

.mpl-caption {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-xs);
  font-weight: 500;
  line-height: var(--mpl-leading-snug);
  color: var(--mpl-fg-4);
}

/* Big numeric / stat display — used for points, chip counts, standings */
.mpl-stat {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-3xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--mpl-tracking-tight);
  color: var(--mpl-fg-1);
  font-variant-numeric: tabular-nums;
}

.mpl-stat-lg {
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-5xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: var(--mpl-tracking-tight);
  color: var(--mpl-fg-1);
  font-variant-numeric: tabular-nums;
}

/* Editorial display — for hero headlines, marquees */
.mpl-display {
  font-family: var(--mpl-font-display);
  font-size: var(--mpl-text-5xl);
  font-weight: 400;
  line-height: var(--mpl-leading-tight);
  letter-spacing: var(--mpl-tracking-tight);
  color: var(--mpl-fg-1);
  margin: 0;
}

.mpl-mono {
  font-family: var(--mpl-font-mono);
  font-size: var(--mpl-text-sm);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--mpl-fg-2);
}

/* Base body defaults you can opt into */
body.mpl-app {
  background: var(--mpl-bg-0);
  color: var(--mpl-fg-2);
  font-family: var(--mpl-font-sans);
  font-size: var(--mpl-text-base);
  line-height: var(--mpl-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}