/* ============================================================
   StriveLocal — Colors & Type Foundations
   Single source of truth for color + typographic tokens.
   Load AFTER the Google Fonts links (see any preview HTML).
   ============================================================ */

/* ---- Webfonts (self-hosted brand files) ----------------------
   Display/Headings : Schibsted Grotesk   (variable 400–900)
   Body / UI        : Hanken Grotesk       (variable 400–900)
   Mono / Data      : JetBrains Mono       (variable 400–800)
   Real brand files live in fonts/ and are wired below. Paths are
   relative to THIS file (project root), so they resolve from any
   HTML that links ../colors_and_type.css or ../../colors_and_type.css.
---------------------------------------------------------------- */
@font-face{font-family:"Schibsted Grotesk";src:url("fonts/SchibstedGrotesk-VariableFont_wght.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("fonts/SchibstedGrotesk-Italic-VariableFont_wght.ttf") format("truetype");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-VariableFont_wght.ttf") format("truetype");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("fonts/HankenGrotesk-Italic-VariableFont_wght.ttf") format("truetype");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono-Italic-VariableFont_wght.ttf") format("truetype");font-weight:400 800;font-style:italic;font-display:swap}

:root {
  /* ====== ANCHOR — Deep Navy (structure, text, dark surfaces) ======
     Engineered, not cold. The bedrock — surfaces, headings, dark bands. */
  --navy-950: #0A1322;
  --navy-900: #13233C;   /* primary dark surface */
  --navy-800: #1C2F4C;
  --navy-700: #2A4267;
  --navy-600: #38557F;
  --navy-500: #4E6E97;
  --navy-400: #7C95B3;
  --navy-300: #AEC0D5;
  --navy-200: #CFDAE7;
  --navy-100: #E7EDF3;
  --navy-50:  #F2F5F9;

  /* ====== SIGNAL — vivid blue (systems, data, primary action) ======
     Marks the working machinery: buttons, links, charts, active states. */
  --signal-700: #1B4FB5;  /* active / pressed */
  --signal-600: #2460D6;  /* hover */
  --signal-500: #2E6BE6;  /* primary signal */
  --signal-400: #5E8DEC;
  --signal-300: #9CBAF4;
  --signal-200: #C6D8FA;
  --signal-100: #E5EDFC;
  --signal-50:  #F2F6FE;

  /* ====== CLAY — burnt orange (the rare HUMAN accent) ======
     Warmth, people, social proof, one hero moment. Never a second accent. */
  --clay-700: #8E3D1E;
  --clay-600: #A64B28;
  --clay-500: #BE5B33;   /* the accent */
  --clay-400: #CF7E5B;
  --clay-300: #E0A586;
  --clay-200: #EFC9B4;
  --clay-100: #F6E4D9;

  /* ====== STEEL — muted slate (quiet secondary) ====== */
  --steel-700: #424B5B;
  --steel-600: #545F72;
  --steel-500: #6B7689;   /* steel */
  --steel-400: #8B94A4;
  --steel-300: #B3BAC6;
  --steel-200: #D2D7DF;
  --steel-100: #E7EAEF;

  /* ====== WARM NEUTRALS ====== */
  --ink:           #111B2C;  /* near-black, navy-tinted */
  --paper:         #F3EEE1;  /* warm cream page bg */
  --surface:       #FFFFFF;  /* card / panel */
  --surface-sunk:  #ECE5D6;  /* sunken / muted fill (warm) */
  --border:        #E2DBCB;  /* hairline */
  --border-strong: #CFC6B2;  /* stronger divider / input border */

  --text-1: #17202E;  /* primary text */
  --text-2: #424C5B;  /* secondary text */
  --text-3: #6A7585;  /* muted / captions */
  --text-on-dark:    #EEF1F6;
  --text-on-dark-2:  #9FB0C6;

  /* ====== SEMANTIC ====== */
  --success:    #2E8B5A;
  --success-bg: #E3F2E9;
  --warning:    #C2871B;
  --warning-bg: #F7E9CC;
  --danger:     #C0392B;
  --danger-bg:  #F7E2DE;
  --info:       #2E6BE6;
  --info-bg:    #E5EDFC;

  /* ====== ROLE TOKENS ====== */
  --brand:           var(--signal-500);  /* primary action / interactive */
  --brand-hover:     var(--signal-600);
  --brand-active:    var(--signal-700);
  --brand-strong:    var(--navy-900);
  --brand-contrast:  #FFFFFF;
  --accent:          var(--clay-500);     /* rare human accent */
  --accent-contrast: #FFFFFF;
  --star:            var(--clay-500);     /* rating stars = human/social proof */
  --bg:              var(--paper);
  --focus-ring:      #5E8DEC;

  /* ====== TYPE FAMILIES ====== */
  --font-display: "Schibsted Grotesk", "Hanken Grotesk", system-ui, sans-serif;
  --font-sans:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ====== TYPE SCALE (fluid-ish, px) ====== */
  --text-display: 64px;  --lh-display: 1.02; --ls-display: -0.03em;
  --text-h1: 48px;       --lh-h1: 1.06;      --ls-h1: -0.025em;
  --text-h2: 36px;       --lh-h2: 1.1;       --ls-h2: -0.02em;
  --text-h3: 26px;       --lh-h3: 1.18;      --ls-h3: -0.015em;
  --text-h4: 20px;       --lh-h4: 1.25;      --ls-h4: -0.01em;
  --text-lg: 18px;       --lh-lg: 1.5;
  --text-base: 16px;     --lh-base: 1.55;
  --text-sm: 14px;       --lh-sm: 1.5;
  --text-xs: 12.5px;     --lh-xs: 1.4;
  --text-eyebrow: 13px;  --ls-eyebrow: 0.14em;  /* uppercase label */

  /* ====== WEIGHTS ====== */
  --w-regular: 400;
  --w-medium:  500;
  --w-semibold:600;
  --w-bold:    700;
  --w-extra:   800;

  /* ====== RADII ====== */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --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; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ====== ELEVATION (warm, low-spread, soft) ====== */
  --shadow-xs: 0 1px 2px rgba(18,26,40,0.06);
  --shadow-sm: 0 1px 2px rgba(18,26,40,0.06), 0 2px 6px rgba(18,26,40,0.05);
  --shadow-md: 0 4px 10px rgba(18,26,40,0.07), 0 12px 24px rgba(18,26,40,0.06);
  --shadow-lg: 0 12px 28px rgba(13,26,48,0.13), 0 28px 60px rgba(13,26,48,0.11);
  --shadow-focus: 0 0 0 3px rgba(94,141,236,0.5);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt-in via .sl-prose / utility classes
   ============================================================ */
.sl-display, h1.sl, .sl-h1 { font-family: var(--font-display); }

.sl-display {
  font-family: var(--font-display);
  font-weight: var(--w-extra);
  font-size: var(--text-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--text-1);
}
.sl-h1 {
  font-family: var(--font-display);
  font-weight: var(--w-extra);
  font-size: var(--text-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--text-1);
}
.sl-h2 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--text-1);
}
.sl-h3 {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  color: var(--text-1);
}
.sl-h4 {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
  color: var(--text-1);
}
.sl-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--w-bold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand);
}
.sl-lead {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  color: var(--text-2);
}
.sl-body {
  font-family: var(--font-sans);
  font-weight: var(--w-regular);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--text-2);
}
.sl-small {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--text-3);
}
.sl-mono {
  font-family: var(--font-mono);
  font-weight: var(--w-medium);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}