/* ==========================================================================
   Design Tokens - Streamline Design System
   Hallmark · Cobalt/Warm Modern · Anchor Hue: 38 (YouTube Red-Orange)
   ========================================================================== */

:root {
  /* Surface and ink layers (Light Mode) - OKLCH with warm chroma tint */
  --color-paper: oklch(98% 0.008 40);
  --color-paper-2: oklch(95.5% 0.012 40);
  --color-paper-3: oklch(92% 0.015 40);
  --color-rule: oklch(88% 0.01 40);
  --color-rule-subtle: oklch(92% 0.008 40);
  --color-ink: oklch(18% 0.012 40);
  --color-ink-muted: oklch(45% 0.015 40);

  /* Brand Accent: YouTube Signal Red-Orange (anchored on #ff3d00) */
  --color-accent: oklch(62% 0.22 38);
  --color-accent-hover: oklch(58% 0.23 38);
  --color-accent-ink: oklch(98% 0.005 40);
  --color-accent-subtle: oklch(62% 0.22 38 / 0.12);
  --color-focus: oklch(62% 0.22 38);

  /* Atmospheric ambient gradients: calibrated warm amber-to-crimson gradient matching the extension screenshots */
  --gradient-hero-ambient:
    radial-gradient(ellipse 75% 60% at 45% 15%, #ea8326 0%, #d95d1f 45%, transparent 80%),
    linear-gradient(135deg, #d16f1e 0%, #d55c1e 35%, #ba3f15 70%, #9d2c0a 100%);
  --gradient-cta-ambient:
    radial-gradient(ellipse 70% 60% at 50% 110%, oklch(62% 0.22 38 / 0.05) 0%, transparent 70%),
    var(--color-paper-2);


  /* Typography scale and pairings (2+1 rule: Display + Body + Outlier) */
  --font-display: "Space Grotesk", system-ui, -apple-system, sans-serif;
  --font-body:
    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-outlier: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Font sizing scale */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-md: 1.125rem; /* 18px */
  --text-lg: 1.375rem; /* 22px */
  --text-xl: 1.75rem; /* 28px */
  --text-2xl: 2.25rem; /* 36px */
  --text-3xl: 3rem; /* 48px */
  --text-display: clamp(2.5rem, 5vw + 1rem, 4.5rem);

  /* Line heights */
  --lh-tight: 1.08;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* 4-point spacing scale */
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.5rem; /* 8px */
  --space-xs: 0.75rem; /* 12px */
  --space-sm: 1rem; /* 16px */
  --space-md: 1.5rem; /* 24px */
  --space-lg: 2rem; /* 32px */
  --space-xl: 3rem; /* 48px */
  --space-2xl: 4.5rem; /* 72px */
  --space-3xl: 6.5rem; /* 104px */

  /* Radius scale */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Elevation and shadows - soft ambient tints without glow halos */
  --shadow-sm: 0 1px 3px oklch(18% 0.012 40 / 0.06);
  --shadow-md: 0 8px 24px oklch(18% 0.012 40 / 0.06);
  --shadow-lg: 0 20px 48px oklch(18% 0.012 40 / 0.08);

  /* Transition timing and exponential curves */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
}

/* Dark Mode Tokens - Same anchor hue 38, calibrated lightness */
@media (prefers-color-scheme: dark) {
  :root {
    --color-paper: oklch(15% 0.01 40);
    --color-paper-2: oklch(19% 0.012 40);
    --color-paper-3: oklch(24% 0.014 40);
    --color-rule: oklch(28% 0.012 40);
    --color-rule-subtle: oklch(22% 0.01 40);
    --color-ink: oklch(94% 0.008 40);
    --color-ink-muted: oklch(68% 0.01 40);

    --color-accent: oklch(68% 0.2 38);
    --color-accent-hover: oklch(72% 0.19 38);
    --color-accent-ink: oklch(15% 0.01 40);
    --color-accent-subtle: oklch(68% 0.2 38 / 0.16);
    --color-focus: oklch(68% 0.2 38);

    --gradient-hero-ambient:
      radial-gradient(ellipse 80% 65% at 50% -15%, oklch(68% 0.2 38 / 0.08) 0%, transparent 70%),
      linear-gradient(180deg, var(--color-paper) 0%, var(--color-paper-2) 100%);
    --gradient-cta-ambient:
      radial-gradient(ellipse 70% 60% at 50% 110%, oklch(68% 0.2 38 / 0.07) 0%, transparent 70%),
      var(--color-paper-2);


    --shadow-sm: 0 1px 3px oklch(0% 0 0 / 0.3);
    --shadow-md: 0 8px 24px oklch(0% 0 0 / 0.4);
    --shadow-lg: 0 20px 48px oklch(0% 0 0 / 0.5);
  }
}