/* ============================================================
   scoreprise.AI — Design Tokens
   Single source of truth for colors, type, space, radius, shadow.
   ============================================================ */

:root {
  /* ---------- BRAND ---------- */
  --sp-blue:        #4A90E2;     /* Scoreprise Blue — primary accent */
  --sp-blue-700:    #2E6FBF;     /* deeper, for press/active */
  --sp-blue-300:    #9CC1ED;     /* tints, illustrations */
  --sp-blue-50:     #EEF5FD;     /* surface tint */

  /* ---------- INK & SURFACE ---------- */
  --ink-1000:       #0B0D10;     /* near-black — display headlines */
  --ink-900:        #1A1D22;     /* primary text */
  --ink-700:        #3D434B;     /* secondary text */
  --ink-500:        #6B7280;     /* muted text */
  --ink-300:        #B6BBC2;     /* disabled, faint */

  --line:           #E6E8EC;     /* hairline borders */
  --line-strong:    #D2D6DC;

  --surface:        #FFFFFF;     /* base canvas */
  --surface-tint:   #FAFAF8;     /* warm off-white — sections */
  --surface-mute:   #F4F4F1;     /* muted blocks */
  --surface-ink:    #0B0D10;     /* inverted dark surface */

  /* ---------- SUPPORT (use sparingly) ---------- */
  --ok:             #2F9E6E;
  --warn:           #C68A12;
  --err:            #C8453B;

  /* ---------- TYPE ---------- */
  --font-display:   "GT Sectra", "Tiempos Headline", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:      "Inter Tight", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:      "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --font-logo:      "Segoe UI Light", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Type scale — modular, slightly compressed for editorial feel */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    22px;
  --t-xl:    28px;
  --t-2xl:   36px;
  --t-3xl:   48px;
  --t-4xl:   64px;
  --t-5xl:   88px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-base:   1.5;
  --lh-loose:  1.7;

  --tracking-display: -0.02em;
  --tracking-tight:   -0.01em;
  --tracking-base:    0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.18em;

  /* ---------- SPACING ---------- */
  --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;

  /* ---------- RADIUS ---------- */
  --r-xs:  4px;
  --r-sm:  6px;
  --r-md:  10px;   /* default for cards */
  --r-lg:  16px;
  --r-xl:  24px;
  --r-pill: 999px;

  /* ---------- SHADOW ---------- */
  --sh-1: 0 1px 2px rgba(11, 13, 16, 0.04), 0 1px 1px rgba(11, 13, 16, 0.03);
  --sh-2: 0 2px 6px rgba(11, 13, 16, 0.06), 0 1px 2px rgba(11, 13, 16, 0.04);
  --sh-3: 0 8px 24px rgba(11, 13, 16, 0.08), 0 2px 6px rgba(11, 13, 16, 0.04);
  --sh-4: 0 24px 60px rgba(11, 13, 16, 0.10), 0 8px 16px rgba(11, 13, 16, 0.05);

  /* ---------- LAYOUT ---------- */
  --container-max: 1200px;
  --container-pad: 32px;

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
}

/* ---------- RESET / BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-base);
  color: var(--ink-900);
  background: var(--surface);
  font-feature-settings: "ss01", "cv11";
}
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

/* Utility */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-500);
}
.display { font-family: var(--font-display); letter-spacing: var(--tracking-display); line-height: var(--lh-tight); font-weight: 400; }
.headline { font-family: var(--font-display); letter-spacing: var(--tracking-tight); line-height: var(--lh-snug); font-weight: 400; }
.title    { font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-tight); }
.body     { font-family: var(--font-sans); color: var(--ink-700); }
.caption  { font-family: var(--font-sans); color: var(--ink-500); font-size: var(--t-sm); }
.mono     { font-family: var(--font-mono); font-size: 13px; color: var(--ink-700); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }

/* Hairline divider */
.rule { height: 1px; background: var(--line); border: 0; margin: var(--s-7) 0; }