/* ============================================================
   melbettoday.com — Slate Utility Variable System
   Factory: 33_LIGHT_COLOR_007_SLATE_UTILITY
   Type:    08_TYPOGRAPHY_019 (System UI + Noto Sans Devanagari)
   Layout:  04_LAYOUT_VARIANTS_064_EDITORIAL_LONGFORM_HUB
   Surface: crisp-borderless, ruled-newspaper geometry
   ============================================================ */

:root {
  /* ----- Slate Utility palette (LIGHT_COLOR_007) ----- */
  --primary: #2457A7;
  --primary-ink: #1B3F7B;
  --primary-soft: #DCE6F7;
  --accent: #A044C5;
  --accent-soft: #EAD7F4;
  --background: #F6F8FC;
  --surface: #FFFFFF;
  --surface-2: #E9EEF7;
  --surface-3: #F1F4FA;
  --text: #1B2638;
  --text-strong: #0F1726;
  --muted: #5A6B80;
  --border: #CDD8E8;
  --border-soft: #DEE5F0;
  --rule: #1B2638;
  --warning: #A044C5;
  --dark: #0F1726;
  --success: #1F7A4C;
  --danger: #B23A3A;

  /* ----- Typography ----- */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans Devanagari", Arial, sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ----- Type scale ----- */
  --fs-hero: clamp(2rem, 4vw + 1rem, 3.5rem);
  --fs-h1: clamp(2rem, 3.4vw + 0.6rem, 3rem);
  --fs-h2: clamp(1.5rem, 1.6vw + 0.6rem, 2.1rem);
  --fs-h3: clamp(1.2rem, 0.8vw + 0.7rem, 1.45rem);
  --fs-lead: clamp(1.05rem, 0.4vw + 0.9rem, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;

  /* ----- Spacing scale ----- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ----- Container ----- */
  --container-max: 1240px;
  --container-narrow: 920px;
  --container-text: 720px;

  /* ----- Border radii ----- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ----- Lines & shadows ----- */
  --rule-thin: 1px solid var(--border);
  --rule-strong: 2px solid var(--rule);
  --shadow-card: 0 1px 0 rgba(27, 38, 56, 0.04), 0 6px 16px rgba(27, 38, 56, 0.06);
  --shadow-soft: 0 1px 2px rgba(27, 38, 56, 0.06);
  --shadow-elev: 0 12px 32px rgba(27, 38, 56, 0.12);

  /* ----- Z layers ----- */
  --z-header: 80;
  --z-drawer: 70;
  --z-sticky-cta: 75;
  --z-overlay: 90;
}