/**
 * Design tokens: Clay-inspired marketing (light) + legacy dark for compatibility.
 * Palette refs: oat (warm cream), blueberry (blue accent), grey (UI).
 */

html[data-theme="dark"] {
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;

  --bg-primary: var(--zinc-950);
  --bg-secondary: var(--zinc-900);
  --bg-tertiary: var(--zinc-800);
  --bg-elevated: var(--zinc-700);
  --border-default: var(--zinc-700);
  --border-input: var(--zinc-700);
  --text-primary: var(--zinc-200);
  --text-secondary: var(--zinc-400);
  --text-muted: var(--zinc-500);
  --text-disabled: var(--zinc-600);

  --accent-primary: #6bb3ff;
  --accent-secondary: #6379bb;

  --danger: #ef4444;
  --warning: #f59e0b;
  --success: #10b981;
  --info: #3b82f6;

  --premium-amber: #fbbf24;
  --premium-orange: #f97316;

  --focus-ring: rgba(107, 179, 255, 0.45);

  /* Marketing shell: same ratios as light (see light block for comments) */
  --container-site: 75rem;
  --container-max: var(--container-site);
  --container-inner: var(--container-site);
  --container-reading: var(--container-site);
  /* Nav bar matches hero card width (logo + items share same max-width) */
  --container-hero-outer: min(135rem, calc(100vw * 2160 / 2026));
  --container-nav-outer: var(--container-hero-outer);
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --container-max-wide: 90rem;
  --nav-height: clamp(3.5rem, 3.158vw, 4rem);
  --shell-max: var(--container-site);

  /* Same wash as light (hero / #modules) when dark theme is active */
  --pastel-overlay-wash: linear-gradient(
    135deg,
    rgba(180, 210, 255, 0.35) 0%,
    rgba(230, 210, 255, 0.28) 45%,
    rgba(255, 210, 230, 0.32) 100%
  );
}

/* Clay-inspired marketing light theme */
html[data-theme="light"] {
  /* ————————————————————————————————————————————————— */
  /* Palette — oat (warm cream), blueberry (blue), grey */
  /* ————————————————————————————————————————————————— */

  --oat-50: #fffcfa;
  --oat-100: #f9f8f6;
  --oat-200: #f3f2ed;
  --oat-300: #eee9df;
  --oat-400: #dad4c8;
  --oat-500: #c0bbaf;
  --oat-600: #9f9b93;
  --oat-700: #85817a;
  --oat-800: #55534e;
  --oat-900: #363430;
  --oat-950: #1b1a18;

  --blueberry-50: #e6f2fe;
  --blueberry-100: #c1dffd;
  --blueberry-200: #8dc5fc;
  --blueberry-300: #58aafa;
  --blueberry-400: #4ca8fd;
  --blueberry-500: #0382f7;
  --blueberry-600: #0667d9;
  --blueberry-700: #0551ae;
  --blueberry-800: #083b7a;

  --grey-50: #f7f8f9;
  --grey-100: #eff1f3;
  --grey-200: #e6e8ec;
  --grey-300: #d6d9df;
  --grey-400: #bfc4cd;
  --grey-500: #979da9;
  --grey-600: #717989;
  --grey-700: #525a69;
  --grey-800: #3c414d;
  --grey-900: #282c35;
  --grey-950: #1d2026;

  /* Accent accents for badge variety (Clay-style) */
  --matcha-500: #58a56f;
  --matcha-600: #3e8a56;
  --tangerine-500: #ec7f3b;
  --tangerine-600: #d96a26;
  --pomegranate-500: #d63b55;
  --pomegranate-600: #b5273f;
  --lemon-400: #f6d55c;
  --lemon-500: #e8bf35;
  --lemon-600: #c79f1f;

  /* ————————————————————————————————————————————————— */
  /* Semantic backgrounds                               */
  /* ————————————————————————————————————————————————— */

  /* Page body is white so rounded-bottom oat hero card is visible against it.
   * Individual sections opt back into oat via .section--oat. */
  --bg-page: #ffffff;
  --bg-primary: #ffffff;
  --bg-secondary: #ffffff;
  --bg-tertiary: var(--oat-200);
  --bg-elevated: #ffffff;

  --bg-section-white: #ffffff;
  --bg-section-oat: var(--oat-100);
  --bg-section-oat-deep: var(--oat-200);
  --bg-section-dark: var(--grey-950);

  /* Soft blue → pink wash (hero, oat sections) */
  --pastel-overlay-wash: linear-gradient(
    135deg,
    rgba(180, 210, 255, 0.42) 0%,
    rgba(230, 210, 255, 0.32) 45%,
    rgba(255, 210, 230, 0.4) 100%
  );

  /* ————————————————————————————————————————————————— */
  /* Borders and dividers                               */
  /* ————————————————————————————————————————————————— */

  --border-default: var(--grey-200);
  --border-input: var(--grey-300);
  --border-hairline: rgba(0, 0, 0, 0.08);
  --border-hairline-strong: rgba(0, 0, 0, 0.14);
  --border-dashed: var(--oat-300);

  /* ————————————————————————————————————————————————— */
  /* Text                                               */
  /* ————————————————————————————————————————————————— */

  --text-primary: #000000;
  --text-secondary: var(--grey-700);
  --text-muted: var(--oat-700);
  --text-disabled: var(--grey-500);
  --text-on-dark: #ffffff;
  --text-on-dark-muted: rgba(255, 255, 255, 0.7);

  /* ————————————————————————————————————————————————— */
  /* Accents & CTA                                      */
  /* ————————————————————————————————————————————————— */

  --accent-primary: var(--blueberry-500);
  --accent-secondary: var(--blueberry-600);
  --accent-primary-rgb: 3, 130, 247;

  --btn-primary-bg: #000000;
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: var(--blueberry-600);

  --btn-secondary-bg: #ffffff;
  --btn-secondary-fg: #000000;
  --btn-secondary-border: rgba(0, 0, 0, 0.15);
  --btn-secondary-hover-border: #000000;

  --danger: #dc2626;
  --warning: #d97706;
  --success: var(--matcha-600);
  --info: var(--blueberry-500);

  --premium-amber: #d97706;
  --premium-orange: #ea580c;

  --focus-ring: rgba(4, 103, 217, 0.35);

  --selection-bg: var(--grey-950);
  --selection-fg: #ffffff;

  /* ————————————————————————————————————————————————— */
  /* Layout shell (responsive, ratio-based)             */
  /* Ref: 2026px-wide view — banner full bleed; hero+nav 2160/2026; copy 1200. */
  /* We encode ratios + caps: min(physical cap at ref, 100vw * ratio). */
  /* ————————————————————————————————————————————————— */

  --container-site: 75rem;                /* 1200px — primary column */
  --container-max: var(--container-site);
  --container-max-wide: 90rem;            /* optional: .container--wide */
  --container-inner: var(--container-site);
  --container-reading: var(--container-site);
  /* Hero oat card; topbar uses same (logo + menu aligned to hero) */
  --container-hero-outer: min(135rem, calc(100vw * 2160 / 2026));
  --container-nav-outer: var(--container-hero-outer);
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);
  --shell-max: var(--container-site);
  --shell-pad-x: var(--container-pad);

  /* Heights: nav / hero min-height map to viewport scale at same ref (see site.css) */
  --nav-height: clamp(3.5rem, 3.158vw, 4rem);
  --nav-z: 9999;

  /* ————————————————————————————————————————————————— */
  /* Radii                                              */
  /* ————————————————————————————————————————————————— */

  --radius-btn: 999px;
  --radius-card: 16px;
  --radius-card-sm: 10px;
  --radius-card-lg: 24px;
  --radius-pill: 999px;
  --radius-section: 0;
  --radius-hero: 40px;

  /* ————————————————————————————————————————————————— */
  /* Shadows                                            */
  /* ————————————————————————————————————————————————— */

  --shadow-card: 0 1px 2px rgba(24, 24, 27, 0.04), 0 2px 12px rgba(24, 24, 27, 0.04);
  --shadow-card-hover: 0 4px 12px rgba(24, 24, 27, 0.06), 0 16px 40px rgba(24, 24, 27, 0.08);
  --shadow-nav-panel: 0 12px 48px rgba(24, 24, 27, 0.14);
  --shadow-nav-scroll: 0 2px 20px rgba(24, 24, 27, 0.06);
  --shadow-hero-media: 0 24px 80px rgba(24, 24, 27, 0.14);

  /* ————————————————————————————————————————————————— */
  /* Spacing scale (rem)                                */
  /* ————————————————————————————————————————————————— */

  --space-0: 0;
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2.5rem;    /* 40px */
  --space-7: 3.5rem;    /* 56px */
  --space-8: 5rem;      /* 80px */
  --space-9: 6.5rem;    /* 104px */
  --space-10: 8rem;     /* 128px */

  /* Section vertical rhythm */
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --section-y-tight: clamp(2.5rem, 5vw, 4.5rem);
  --section-y-loose: clamp(4.5rem, 9vw, 8rem);

  /* ————————————————————————————————————————————————— */
  /* Typography scale                                   */
  /* ————————————————————————————————————————————————— */

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs: 0.75rem;          /* 12px */
  --text-sm: 0.8125rem;        /* 13px */
  --text-base: 0.9375rem;      /* 15px */
  --text-md: 1rem;             /* 16px */
  --text-lg: 1.125rem;         /* 18px */
  --text-xl: 1.25rem;          /* 20px */
  --text-2xl: 1.5rem;          /* 24px */
  --text-3xl: 2rem;            /* 32px */
  --text-h3: clamp(1.25rem, 2vw, 1.5rem);
  --text-h2: clamp(1.875rem, 3.8vw, 3rem);
  --text-h1: clamp(2.25rem, 5vw, 3.75rem);
  --text-display: clamp(2.5rem, 6.4vw, 4.75rem);

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-tight: -0.03em;
  --tracking-snug: -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.12em;

  /* Transition timing */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
}