/* ============================================================
   Sweep:WC26 — Design Tokens (light direction)
   ------------------------------------------------------------
   Inspired by DD.NYC's NYNJ FIFA WC26 site. White canvas,
   electric royal blue, deep ink-navy, heavy condensed display.
   Import once: <link rel="stylesheet" href="colors_and_type.css">
   ============================================================ */

/* Anton = heavy condensed display (free Druk-ish alternative)
   DM Sans = clean modern body
   JetBrains Mono = numerics / IDs / codes  */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ----- Viewport height ----- */
  /* iOS Safari's 100vh includes the URL bar area so 100vh content gets cut
     off when the bar collapses on scroll. 100dvh ("dynamic viewport height")
     fixes this. Fallback chain: ancient browsers ignore dvh and fall back to
     the 100vh declaration above. */
  --h-full: 100vh;
}
@supports (height: 100dvh) {
  :root { --h-full: 100dvh; }
}

:root {
  /* ----- Canvas + ink ----- */
  --paper: #ffffff;          /* main background */
  --paper-warm: #f7f7f4;     /* alt section, off-white */
  --ink:   #10154F;          /* deep navy — primary text + dark sections */
  --ink-soft: #4A4F8C;       /* secondary text */
  --ink-mute: #9094BB;       /* tertiary / disabled */
  --ink-faint: #C9CBE0;      /* dividers / disabled fill */

  /* ----- Brand blue (the country / accent) ----- */
  --blue: #2F4FFC;
  --blue-deep: #1F35BE;      /* hover / pressed */
  --blue-pale: #EEF0FF;      /* surface tint */
  --blue-paler: #F6F7FF;     /* faintest tint */

  /* ----- Borders & glass ----- */
  --hairline: rgba(16, 21, 79, 0.10);
  --hairline-strong: rgba(16, 21, 79, 0.22);
  --hairline-blue: rgba(47, 79, 252, 0.30);

  /* ----- Semantic ----- */
  --success: #11A65A;
  --warning: #E58A00;
  --danger:  #D6233E;
  --gold:    #FFB81C;        /* trophy / champion */

  /* ----- Strength ramp (1–5) — desaturated → bold blue → gold ----- */
  --strength-1: #C9CBE0;
  --strength-2: #7C84B8;
  --strength-3: #4A6BFF;
  --strength-4: #2F4FFC;
  --strength-5: #FFB81C;

  /* ----- Type families ----- */
  --font-display: 'Anton', 'Bebas Neue', 'Helvetica Neue Condensed', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ----- Type scale ----- */
  --fs-hero:    clamp(72px, 12vw, 200px);
  --fs-display: clamp(48px, 7vw, 96px);
  --fs-h1:      56px;
  --fs-h2:      36px;
  --fs-h3:      24px;
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  --lh-tight: 0.9;        /* big display */
  --lh-snug:  1.05;
  --lh-body:  1.55;

  --tracking-display:  -0.01em;
  --tracking-normal:   0;
  --tracking-uppercase: 0.06em;

  /* ----- Spacing (4px grid) ----- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ----- Radii — mostly small + pill ----- */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-pill: 999px;

  /* ----- Shadows — very subtle, almost none ----- */
  --shadow-1: 0 1px 0 rgba(16,21,79,0.06);
  --shadow-2: 0 8px 24px rgba(16,21,79,0.08);
  --shadow-3: 0 24px 48px rgba(16,21,79,0.14);
  --shadow-pop: 0 32px 80px rgba(16,21,79,0.18);

  /* ----- Easing & timing ----- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-cinema: cubic-bezier(0.7, 0, 0.3, 1);

  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 480ms;
  --dur-cine-1: 800ms;
  --dur-cine-2: 1600ms;
  --dur-cine-3: 2400ms;
}

/* ============================================================
   Base reset + body
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic type
   ============================================================ */
.hero, .text-hero {
  font-family: var(--font-display);
  font-weight: 400;        /* Anton only ships 400 */
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  color: var(--ink);
}

.display, .text-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
}

h1, .h1, .text-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}

h2, .h2, .text-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}

h3, .h3, .text-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  margin: 0;
}

h4, .h4, .text-h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0;
}

p, .text-body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink);
  margin: 0;
}

.text-small  { font-size: var(--fs-small); color: var(--ink-soft); line-height: 1.5; }
.text-micro  { font-size: var(--fs-micro); color: var(--ink-soft); }

/* Stage / section labels — heavy condensed, all caps */
.label, .text-label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--tracking-uppercase);
  color: var(--blue);
}

/* Mono — for IDs, codes, scores, timers */
.text-mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-weight: 500;
  color: var(--ink);
}

a { color: var(--blue); text-decoration: none; transition: color var(--dur-2) var(--ease-out); }
a:hover { color: var(--blue-deep); }
a.underlined { border-bottom: 1px solid currentColor; }

::selection { background: var(--blue); color: var(--paper); }

/* ============================================================
   Utility primitives
   ============================================================ */
.surface-paper { background: var(--paper); color: var(--ink); }
.surface-ink   { background: var(--ink);   color: var(--paper); }
.surface-blue  { background: var(--blue);  color: var(--paper); }
.surface-pale  { background: var(--blue-pale); color: var(--ink); }

.divider-h { height: 1px; background: var(--hairline); }

/* Reverse text inside the dark sections */
.on-ink  { color: var(--paper); }
.on-ink .text-small, .on-ink p { color: rgba(255,255,255,0.78); }
.on-ink .label { color: var(--paper); opacity: 0.7; }
.on-blue { color: var(--paper); }
.on-blue .label { color: var(--paper); opacity: 0.85; }