/* ============================================================
   SMASH — Design Tokens
   Padel/Tennis territory-conquest app. Dark-mode-first.
   Aesthetic: "Tactical Court" — nocturnal map, volt-green
   signature, athletic expanded display + mono stat readouts.
   ============================================================ */

/* ---- Webfonts (Google Fonts; open-source, the real chosen faces) ---- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400..900;1,400..900&family=Archivo+Expanded:wght@500..900&family=JetBrains+Mono:wght@400..700&display=swap');

:root {
  /* ============ CORE PALETTE (dark — primary) ============ */
  /* Tactical near-black surfaces, slight cool tint (map-at-night) */
  --bg-0:  #07090C;   /* deepest — app/map base */
  --bg-1:  #0E1318;   /* page surface */
  --bg-2:  #161D24;   /* card / elevated panel */
  --bg-3:  #1F2832;   /* raised control, hover surface */
  --bg-inset: #0A0E12; /* wells, inputs, track */

  --line-1: #232E38;  /* hairline borders */
  --line-2: #324050;  /* stronger borders, dividers on cards */
  --line-3: #44586B;  /* focus ring base / active border */

  /* Text */
  --fg-1: #F3F7FA;    /* primary */
  --fg-2: #9DAAB6;    /* secondary */
  --fg-3: #647483;    /* muted / captions */
  --fg-4: #45525E;    /* disabled / faint */
  --fg-on-volt: #0A1200; /* text on volt fills */

  /* ============ BRAND / SIGNATURE ============ */
  --volt:      #C6FF3D;  /* primary brand — court line / tennis ball */
  --volt-bright:#D6FF6B;
  --volt-dim:  #9BD021;
  --volt-glow: rgba(198,255,61,.28);
  --volt-wash: rgba(198,255,61,.10);

  /* ============ SEMANTIC / STATE ============ */
  --attack:  #FF4D3D;  /* attack / danger / loss */
  --attack-wash: rgba(255,77,61,.12);
  --contest: #FFB02E;  /* contested / warning / pending */
  --contest-wash: rgba(255,176,46,.12);
  --info:    #36A6FF;  /* padel-court blue / info */
  --info-wash: rgba(54,166,255,.12);
  --win:     #34E0A1;  /* validated / success */
  --win-wash: rgba(52,224,161,.12);

  /* ============ TEAM / TERRITORY COLORS ============ */
  /* Distinct, vivid hues that read on the dark map */
  --team-volt:    #C6FF3D;
  --team-cyan:    #2DD4BF;
  --team-blue:    #3B82F6;
  --team-indigo:  #7C6CF6;
  --team-magenta: #EC4899;
  --team-red:     #F2483B;
  --team-orange:  #FB923C;
  --team-gold:    #FACC15;

  /* ============ TYPE FAMILIES ============ */
  --font-display: 'Archivo Expanded', 'Archivo', system-ui, sans-serif; /* athletic, expanded — headers, scoreboard */
  --font-body:    'Archivo', system-ui, -apple-system, sans-serif;       /* UI + body */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;  /* stats, ELO, scores, codes */

  /* ============ TYPE SCALE (mobile-first) ============ */
  --t-display:  44px;  /* hero scoreboard numbers */
  --t-h1:       30px;
  --t-h2:       24px;
  --t-h3:       19px;
  --t-title:    17px;  /* card titles, nav */
  --t-body:     15px;
  --t-sm:       13px;
  --t-xs:       11px;  /* labels, eyebrows */
  --t-micro:    10px;

  --lh-tight: 1.04;
  --lh-snug:  1.2;
  --lh-body:  1.5;

  /* Eyebrow / label treatment (used everywhere) */
  --eyebrow-spacing: 0.14em;

  /* ============ RADII ============ */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;   /* buttons, inputs */
  --r-lg: 18px;   /* cards */
  --r-xl: 24px;   /* sheets, big panels */
  --r-pill: 999px;

  /* ============ SPACING (4pt base) ============ */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ============ SHADOWS / ELEVATION ============ */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 16px rgba(0,0,0,.45);
  --sh-3: 0 12px 32px rgba(0,0,0,.5);
  --sh-sheet: 0 -8px 40px rgba(0,0,0,.55);
  --glow-volt: 0 0 0 1px rgba(198,255,61,.4), 0 6px 24px rgba(198,255,61,.22);
  --glow-attack: 0 0 0 1px rgba(255,77,61,.5), 0 6px 24px rgba(255,77,61,.25);

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-in-out: cubic-bezier(.7,0,.3,1);
  --ease-snap: cubic-bezier(.34,1.56,.64,1); /* slight overshoot — gamey press */
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.t-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.t-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: -0.01em; color: var(--fg-1); }
.t-h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h2); line-height: var(--lh-snug); color: var(--fg-1); }
.t-h3 { font-family: var(--font-body); font-weight: 700; font-size: var(--t-h3); line-height: var(--lh-snug); color: var(--fg-1); }
.t-title { font-family: var(--font-body); font-weight: 600; font-size: var(--t-title); line-height: var(--lh-snug); color: var(--fg-1); }
.t-body { font-family: var(--font-body); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-body); color: var(--fg-2); }
.t-sm { font-family: var(--font-body); font-weight: 400; font-size: var(--t-sm); line-height: var(--lh-body); color: var(--fg-2); }

/* Eyebrow / kicker — uppercase tactical label */
.t-eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Stat / scoreboard readout — mono, tabular */
.t-stat {
  font-family: var(--font-mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.t-stat-lg {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.t-code { font-family: var(--font-mono); font-size: var(--t-sm); color: var(--fg-2); }

/* ============================================================
   LIGHT MODE (provided; app leads with dark)
   ============================================================ */
[data-theme="light"] {
  --bg-0: #EEF1F5;
  --bg-1: #FFFFFF;
  --bg-2: #FFFFFF;
  --bg-3: #EEF1F4;
  --bg-inset: #EAEEF1;
  --line-1: #E3E8ED;
  --line-2: #D2DAE1;
  --line-3: #B5C0CA;
  --fg-1: #0E1318;
  --fg-2: #44525C;
  --fg-3: #6B7884;
  --fg-4: #A9B5BE;

  /* Darkened brand + semantics so green/yellow text reads on light surfaces */
  --volt:        #4F7A00;
  --volt-bright: #5E8F00;
  --volt-dim:    #6FA01A;
  --volt-glow:   rgba(79,122,0,.18);
  --volt-wash:   rgba(79,122,0,.12);
  --fg-on-volt:  #FFFFFF;

  --win:     #0E8A57;  --win-wash:     rgba(14,138,87,.12);
  --info:    #1E78C8;  --info-wash:    rgba(30,120,200,.12);
  --contest: #B07A0A;  --contest-wash: rgba(176,122,10,.12);
  --attack:  #D8392A;  --attack-wash:  rgba(216,57,42,.12);
}