@font-face{font-family:"Archivo Expanded";src:url("/fonts/archivo-expanded.woff2") format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:Archivo;src:url('/fonts/archivo-variable.woff2') format('woff2');font-weight:400 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/fonts/geistmono-variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* NextTilt brand tokens: Arena palette. Source of truth for nexttilt.app. */

:root {
  /* Colour: Arena */
  --nt-navy:        #0B1B3D; /* ink, marks, dark surfaces */
  --nt-ice:         #F3F5F8; /* page background */
  --nt-surface:     #FFFFFF; /* cards */
  --nt-blue:        #1F6BFF; /* accent: goalie dot, primary CTA, active line (≤5% of layout) */
  --nt-red:         #FF3B5C; /* goal light: live / Out / destructive only */
  --nt-boards:      #DCE2EB; /* borders, dividers */
  --nt-muted:       #5F6B82; /* secondary text */

  /* Navy scale */
  --nt-navy-900: #0B1B3D; --nt-navy-800: #1A2C55; --nt-navy-700: #34477A;
  --nt-navy-500: #5F6B82; --nt-navy-400: #8E98AC; --nt-navy-200: #C3CAD6;
  --nt-navy-100: #DCE2EB; --nt-navy-50:  #F3F5F8;

  /* Semantic */
  --nt-bg: var(--nt-ice);
  --nt-fg: var(--nt-navy);
  --nt-accent: var(--nt-blue);
  --nt-on-accent: #FFFFFF;

  /* Type */
  --nt-font-display: 'Archivo', system-ui, sans-serif;
  --nt-font-stretch: 112%;            /* Archivo width axis, "Expanded" look */
  --nt-font-mono: 'Geist Mono', ui-monospace, monospace;

  --nt-h1: 800 clamp(48px, 7vw, 96px)/0.95 var(--nt-font-display);
  --nt-h2: 700 clamp(32px, 4vw, 48px)/1.05 var(--nt-font-display);
  --nt-body: 400 18px/1.5 var(--nt-font-display);
  --nt-tracking-display: -0.04em;

  /* Shape */
  --nt-radius-sm: 8px;   /* player chips */
  --nt-radius-md: 20px;  /* cards */
  --nt-radius-lg: 28px;  /* feature panels */
  --nt-radius-pill: 999px; /* buttons */
}

/* Headings */
.nt-h1, .nt-h2 { font-stretch: var(--nt-font-stretch); letter-spacing: var(--nt-tracking-display); text-wrap: balance; }
.nt-h1 { font: var(--nt-h1); }
.nt-h2 { font: var(--nt-h2); }
.nt-label { font-family: var(--nt-font-mono); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--nt-muted); }

/* Wordmark (live text until an outlined SVG is produced) */
.nt-wordmark { font-family: var(--nt-font-display); font-stretch: 112%; font-weight: 800; letter-spacing: -0.045em; line-height: 1; white-space: nowrap; color: var(--nt-fg); }
.nt-wordmark .nt-i { position: relative; display: inline-block; }
.nt-wordmark .nt-dot { position: absolute; left: 50%; top: .1em; width: .19em; height: .19em; border-radius: 50%; background: var(--nt-accent); transform: translateX(-50%); }

/* Lockup = mark + wordmark; gap 0.3em, mark height 1.18em */
.nt-lockup { display: inline-flex; align-items: center; gap: .3em; }
.nt-lockup svg { width: 1.18em; height: 1.18em; flex: none; }

/* Buttons */
.nt-btn { font: 650 16px/1 var(--nt-font-display); padding: 14px 22px; border-radius: var(--nt-radius-pill); background: var(--nt-navy); color: var(--nt-ice); border: 0; }
.nt-btn--accent { background: var(--nt-blue); color: #fff; }