/* ==========================================================================
   THE CHRONICLE DISPATCH — DESIGN SYSTEM TOKENS
   Strict Light Theme Editorial Design System
   ========================================================================== */

:root {
  /* Color Palette - Premium Editorial Light */
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F8FAFC;
  --color-bg-muted: #F1F5F9;
  --color-surface: #FFFFFF;
  --color-surface-hover: #F8FAFC;
  --color-surface-alt: #F1F5F9;

  /* Typography Colors */
  --color-text: #0F172A;            /* Near-black, high contrast */
  --color-text-secondary: #334155;  /* Deep slate for subtitles & decks */
  --color-text-muted: #64748B;      /* Refined gray for metadata */
  --color-text-dim: #94A3B8;        /* Subtle timestamps & dividers */
  --color-text-inverse: #FFFFFF;

  /* Editorial Accent Colors */
  --color-accent: #C22026;          /* Editorial Crimson */
  --color-accent-hover: #991B1B;
  --color-accent-subtle: #FEF2F2;
  --color-accent-border: #FCA5A5;
  
  --color-primary: #0F172A;         /* Slate Black */
  --color-navy: #0A2540;            /* Wall Street Navy */
  --color-gold: #D97706;            /* Premium Accent */

  /* Hairline Borders & Dividers */
  --color-border: #E2E8F0;
  --color-border-light: #F1F5F9;
  --color-border-dark: #CBD5E1;
  --color-border-strong: #0F172A;

  /* Typography Stacks */
  --font-serif: 'Newsreader', 'Playfair Display', 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Fluid Headline Scales (Responsive Clamp) */
  --text-hero: clamp(2.25rem, 4vw + 1rem, 3.75rem);       /* 36px - 60px */
  --text-h1: clamp(1.85rem, 3vw + 0.8rem, 2.75rem);       /* 30px - 44px */
  --text-h2: clamp(1.5rem, 2vw + 0.6rem, 2.15rem);        /* 24px - 34px */
  --text-h3: clamp(1.25rem, 1.5vw + 0.4rem, 1.65rem);     /* 20px - 26px */
  --text-h4: 1.25rem;                                     /* 20px */
  --text-deck: clamp(1.15rem, 1.2vw + 0.2rem, 1.35rem);   /* 18px - 22px */
  --text-body: 1.125rem;                                  /* 18px optimal reading */
  --text-body-sm: 0.9375rem;                              /* 15px */
  --text-caption: 0.8125rem;                              /* 13px */
  --text-kicker: 0.75rem;                                 /* 12px uppercase */

  /* Spacing Scale */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4.5rem;   /* 72px */
  --space-4xl: 6rem;     /* 96px */

  /* Containers */
  --container-max: 1320px;
  --container-article: 740px;
  --container-pad: 1.5rem;

  /* Elevations & Shadows (Subtle, refined) */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.07), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-modal: 0 25px 50px -12px rgba(15, 23, 42, 0.25);

  /* Border Radii (Conservative, editorial) */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

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