/* News French Fries — Design Tokens (Direction C · Brasserie) */
/* Single source of truth. Synced from DS - NEWS FRENCH FRIES/tokens/tokens.css */
/* Dark mode = first-class via [data-theme="dark"]. */

:root,
[data-theme="light"]{
  /* ===== Brand ===== */
  --brand-blue:        #1B3B6F;
  --brand-blue-700:    #14305C;
  --brand-blue-500:    #2A57A0;
  --brand-blue-300:    #6F8CC4;
  --brand-mustard:     #FDB813;
  --brand-mustard-700: #C68E0A;
  --brand-mustard-300: #FFD471;
  --brand-cyan:        #00A2FF;
  --brand-cyan-700:    #0077C2;
  --brand-cyan-300:    #66C8FF;

  /* ===== Neutrals ===== */
  --n-0:   #FFFFFF;
  --n-50:  #F8F7F2;
  --n-100: #EFEDE5;
  --n-200: #DFDCD0;
  --n-300: #C7C3B4;
  --n-400: #A6A294;
  --n-500: #807D72;
  --n-600: #5C5A52;
  --n-700: #3D3C36;
  --n-800: #25241F;
  --n-900: #14130F;
  --n-1000:#0B0F19;

  /* ===== Semantic ===== */
  --success: #1F8A4C;
  --success-soft: #1F8A4C18;
  --warning: #B5781B;
  --warning-soft: #B5781B18;
  --error:   #B3261E;
  --error-soft: #B3261E18;
  --info:    var(--brand-cyan);
  --info-soft:#00A2FF18;

  /* ===== Surface roles (light) ===== */
  --bg:           var(--n-50);
  --bg-elevated:  var(--n-0);
  --bg-sunken:    var(--n-100);
  --bg-inverse:   var(--brand-blue);
  --bg-accent:    var(--brand-mustard);

  --fg:           var(--n-900);
  --fg-muted:     var(--n-600);
  --fg-subtle:    var(--n-500);
  --fg-on-blue:   var(--n-50);
  --fg-on-mustard:var(--n-1000);

  --border:       #14130F1A;
  --border-strong:#14130F33;
  --rule:         #14130F14;

  --link:         var(--brand-blue);
  --link-hover:   var(--brand-blue-700);

  /* ===== Type families ===== */
  --font-display: "Fraunces", "Newsreader", Georgia, serif;
  --font-ui:      "Outfit", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Geist Mono", ui-monospace, monospace;

  /* ===== Type scale (refined editorial · ~minor-third 1.2) =====
     Calibrated against NYT/Atlantic/FT/Guardian: body 17px reading comfort,
     conservative display ladder, soft mobile shrink. */
  --text-xs:   12px;   /* meta, mono captions */
  --text-sm:   13px;   /* secondary meta, footer links */
  --text-base: 17px;   /* body — bumped from 16 for long-form comfort */
  --text-md:   18px;   /* lede, large UI */
  --text-lg:   20px;   /* card titles */
  --text-xl:   22px;   /* hero side h3 */
  --text-2xl:  26px;   /* mosaic big h4, ranking h3 */
  --text-3xl:  32px;   /* longread h3, section h2 mobile */
  --text-4xl:  40px;   /* section h2 desktop */
  --text-5xl:  52px;   /* single post h1 desktop */
  --text-6xl:  64px;   /* hero h1 desktop ceiling */
  --text-7xl:  80px;   /* reserved for special covers */

  --leading-tight:  1.08;   /* display — slightly more breathing */
  --leading-snug:   1.22;
  --leading-normal: 1.6;    /* body — bumped from 1.55 for prose */
  --leading-loose:  1.8;

  --tracking-tight:    -0.02em;
  --tracking-tighter:  -0.03em;   /* hero scale — optical compensation */
  --tracking-normal:    0;
  --tracking-wide:      0.08em;
  --tracking-wider:     0.18em;

  /* ===== Spacing (4pt base) ===== */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ===== Radii ===== */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-full: 999px;

  /* ===== Elevation ===== */
  --shadow-1: 0 1px 2px rgba(11,15,25,.06), 0 1px 1px rgba(11,15,25,.04);
  --shadow-2: 0 4px 8px -2px rgba(11,15,25,.08), 0 2px 4px -1px rgba(11,15,25,.05);
  --shadow-3: 0 10px 20px -6px rgba(11,15,25,.12), 0 4px 8px -2px rgba(11,15,25,.06);
  --shadow-4: 0 24px 40px -12px rgba(11,15,25,.18), 0 8px 16px -4px rgba(11,15,25,.08);
  --shadow-5: 0 48px 80px -24px rgba(11,15,25,.28), 0 16px 32px -8px rgba(11,15,25,.12);
  --shadow-mustard: 0 16px 36px -10px rgba(253,184,19,.5);
  --shadow-blue:    0 16px 36px -10px rgba(27,59,111,.45);

  /* ===== Motion ===== */
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 420ms;
  --duration-deliberate: 720ms;

  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);

  /* ===== Layout ===== */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 4vw, 40px);
}

[data-theme="dark"]{
  --bg:           var(--n-1000);
  --bg-elevated:  #11162A;
  --bg-sunken:    #060912;
  --bg-inverse:   var(--n-50);
  --bg-accent:    var(--brand-mustard);

  --fg:           var(--n-50);
  --fg-muted:     #9AA3B2;
  --fg-subtle:    #6A7385;
  --fg-on-blue:   var(--n-50);
  --fg-on-mustard:var(--n-1000);

  --border:       #FFFFFF18;
  --border-strong:#FFFFFF33;
  --rule:         #FFFFFF12;

  --link:         var(--brand-cyan);
  --link-hover:   var(--brand-cyan-300);

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 4px 8px -2px rgba(0,0,0,.5);
  --shadow-3: 0 10px 20px -6px rgba(0,0,0,.55);
  --shadow-4: 0 24px 40px -12px rgba(0,0,0,.6);
  --shadow-5: 0 48px 80px -24px rgba(0,0,0,.7);
  --shadow-mustard: 0 16px 36px -10px rgba(253,184,19,.35);
  --shadow-blue:    0 16px 36px -10px rgba(0,162,255,.35);
}

@media (prefers-reduced-motion: reduce){
  :root{
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-deliberate: 0ms;
  }
}