/* ─── Design Tokens & System Primitives ─── */
@import url("https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,slnt,wdth,wght,ROND@6..144,-10..0,25..151,100..900,0..100&family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");

:root {
  /* Font Families: Google Sans Flex as Primary, Roboto Mono for Meta/Code */
  --font-sans: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-editorial-sans: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-meta: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-caption: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-source-code: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Google Sans Flex Variable Settings */
  /* Display: 700 weight, 100 roundness, slant 0, width 100 */
  --font-weight-display: 700;
  --font-variation-display: 'wght' 700, 'ROND' 100, 'slnt' 0, 'wdth' 100;

  /* Body: 400 weight (light mode), 0 roundness, slant 0, width 100 */
  --font-weight-body: 400;
  --font-variation-body: 'wght' 400, 'ROND' 0, 'slnt' 0, 'wdth' 100;

  /* Pull Quotes / Callouts: 1.5rem, weight 200 (light mode), slant -10, width 125, roundness 100 */
  --font-size-quote: 1.5rem;
  --font-weight-quote: 200;
  --font-variation-quote: 'wght' 200, 'slnt' -10, 'wdth' 125, 'ROND' 100;

  /* Metadata, code, footnotes, captions, small text: 0.75rem, weight 400 (light mode) */
  --font-size-meta: 0.75rem;
  --font-weight-meta: 400;
  --font-variation-meta: 'wght' 400;

  /* Editorial Tier Widths */
  --tier-full-bleed: 100vw;
  --tier-wide-media: 1312px;
  --tier-pullout: 960px;
  --tier-prose: 720px;

  /* Typography Scale (Explicit baseline: 16px = 1rem) */
  --font-size-xs: 0.75rem;                          /* 12px */
  --font-size-sm: 0.875rem;                         /* 14px */
  --font-size-body: 1rem;                           /* 16px = 1rem */
  --font-size-md: 1.125rem;                         /* 18px */
  --font-size-h3: 1.25rem;                          /* 20px */
  --font-size-h2: 1.5rem;                           /* 24px */
  --font-size-intro: clamp(1.25rem, 2.5vw, 1.5rem); /* 20px - 24px */
  --font-size-h1: clamp(2.25rem, 5vw, 3.5rem);      /* 36px - 56px */

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.15;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.65;

  /* Spacing Scale */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;

  /* Unified Page Margins: Minimum 1rem on left & right site-wide */
  --page-padding-inline: clamp(1rem, 3.5vw, var(--space-xl));

  /* Layout Dimensions */
  --container: 1440px;
  --container-narrow: 720px;
  --container-readable: 640px;
  --nav-height: 80px;

  /* Foldable & Dual-Screen Spanning Primitives */
  --fold-active: 0;
  --fold-posture: continuous;
  --fold-segment-0-width: 50%;
  --fold-segment-1-width: 50%;
  --fold-segment-0-inline-size: 50%;
  --fold-segment-1-inline-size: 50%;
  --fold-segment-top-height: 50%;
  --fold-segment-bottom-height: 50%;
  --fold-hinge-width: 0px;
  --fold-hinge-height: 0px;
  --fold-seam-gutter: var(--space-2xl);
  --fold-seam-gutter-block: var(--space-2xl);
  --fold-page-padding: var(--space-xl);
  --fold-spine-shadow: none;

  /* Shape & Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* Motion & Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  /* Z-Index Scale */
  --z-base: 1;
  --z-content: 5;
  --z-header: 100;
  --z-modal: 500;
  --z-toast: 1000;
}

/* Dark Mode Variable Font Settings */
:root[data-mode="dark"],
[data-mode="dark"],
html.dark-mode {
  /* Body on dark: weight 300, roundness 0, width 100 */
  --font-weight-body: 300;
  --font-variation-body: 'wght' 300, 'ROND' 0, 'slnt' 0, 'wdth' 100;

  /* Pull quotes on dark: weight 100, slant -10, width 125, roundness 100 */
  --font-weight-quote: 100;
  --font-variation-quote: 'wght' 100, 'slnt' -10, 'wdth' 125, 'ROND' 100;

  /* Metadata, code, footnotes, captions, small text: Roboto Mono, weight 300 */
  --font-weight-meta: 300;
  --font-variation-meta: 'wght' 300;
}