/* Shared design tokens — Next.js app and Astro landing (`/theme.css`). */
/*
 * Semantic UI colors follow the shadcn-style green / earthy palette (`:root`: dark default matches `theme-init` script).
 * Light mode: `html[data-theme="light"]`. Storage: `localStorage.theme` = `dark` | `light`.
 *
 * Legacy names (`--bg-base`, `--brand-orange`, buyer-journey-*): aliases for Astro + marketing CSS built on the palette.
 */

:root {
  --font-sans:
    Outfit, ui-sans-serif, system-ui, -apple-system, sans-serif;

  --background: rgb(28, 42, 31);
  --foreground: rgb(240, 235, 229);
  --card: rgb(45, 58, 46);
  --card-foreground: rgb(240, 235, 229);
  --popover: rgb(45, 58, 46);
  --popover-foreground: rgb(240, 235, 229);
  --primary: rgb(76, 175, 80);
  --primary-foreground: rgb(10, 31, 12);
  --secondary: rgb(62, 74, 61);
  --secondary-foreground: rgb(215, 224, 214);
  --muted: rgb(37, 47, 38);
  --muted-foreground: rgb(215, 207, 196);
  --accent: rgb(56, 142, 60);
  --accent-foreground: rgb(240, 235, 229);
  --destructive: rgb(198, 40, 40);
  --destructive-foreground: rgb(240, 235, 229);
  --border: rgb(62, 74, 61);
  --input: rgb(62, 74, 61);
  --ring: rgb(76, 175, 80);
  --chart-1: rgb(129, 199, 132);
  --chart-2: rgb(102, 187, 106);
  --chart-3: rgb(76, 175, 80);
  --chart-4: rgb(67, 160, 71);
  --chart-5: rgb(56, 142, 60);
  --sidebar: rgb(28, 42, 31);
  --sidebar-foreground: rgb(240, 235, 229);
  --sidebar-primary: rgb(76, 175, 80);
  --sidebar-primary-foreground: rgb(10, 31, 12);
  --sidebar-accent: rgb(56, 142, 60);
  --sidebar-accent-foreground: rgb(240, 235, 229);
  --sidebar-border: rgb(62, 74, 61);
  --sidebar-ring: rgb(76, 175, 80);

  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  --cyan: rgb(180, 207, 189);
  --green: rgb(129, 199, 132);
  --purple: rgb(157, 180, 215);
  --pink: rgb(244, 200, 200);
  --yellow: rgb(245, 220, 180);
  --orange: rgb(76, 175, 80);
  --red: rgb(239, 83, 80);

  --brand-orange: rgb(76, 175, 80);
  --brand-orange-deep: rgb(56, 142, 60);
  --brand-orange-glow: rgb(129, 199, 132);

  --bg-base: rgb(28, 42, 31);
  --bg-surface: rgb(37, 47, 38);
  --bg-card: rgb(45, 58, 46);
  --bg-border: rgb(62, 74, 61);
  --bg-hover: rgb(62, 74, 61);

  --text-primary: rgb(240, 235, 229);
  --text-secondary: rgb(215, 224, 214);
  --text-muted: rgb(215, 207, 196);
  --text-code: rgb(240, 235, 229);

  --brand-orange-soft: color-mix(in srgb, var(--brand-orange) 22%, transparent);
  --brand-orange-surface: color-mix(in srgb, var(--brand-orange) 14%, var(--bg-surface));
  --brand-orange-surface-muted: color-mix(in srgb, var(--brand-orange) 8%, var(--bg-base));
  --brand-orange-border: color-mix(in srgb, var(--brand-orange) 42%, transparent);
  --brand-orange-text-muted: color-mix(in srgb, var(--brand-orange) 38%, var(--text-secondary) 62%);

  --btn-primary-bg: rgb(76, 175, 80);
  --btn-primary-border: color-mix(
    in srgb,
    var(--brand-orange) 72%,
    var(--brand-orange-glow) 28%
  );
  --btn-primary-hover-bg: rgb(56, 142, 60);
  --btn-primary-fg: rgb(10, 31, 12);

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 5rem;
  --space-3xl: 8rem;

  --max-width: 1400px;
  --nav-height: 72px;
  --brand-wordmark-height: clamp(2.5rem, 5.5vw, 3.5rem);
  --viewport-height: 100vh;
  --viewport-width: 100vw;
  --section-pad-inline: clamp(1rem, 2.2cqw, 2rem);
  --section-pad-block: clamp(2.5rem, 6cqh, 8rem);

  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --buyer-journey-shell-fill: rgba(28, 42, 31, 0.94);
  --buyer-journey-shell-stroke: rgb(62, 74, 61);
  --buyer-journey-screen-fill: rgba(37, 47, 38, 0.96);
  --buyer-journey-screen-stroke: rgba(240, 235, 229, 0.08);
  --buyer-journey-muted-fill: rgba(240, 235, 229, 0.08);
  --buyer-journey-muted-stroke: rgba(240, 235, 229, 0.12);
  --buyer-journey-accent-green-fill: rgba(76, 175, 80, 0.2);
  --buyer-journey-accent-green-stroke: rgba(76, 175, 80, 0.45);
  --buyer-journey-accent-secondary-fill: rgba(129, 199, 132, 0.16);
  --buyer-journey-accent-secondary-stroke: rgba(129, 199, 132, 0.38);
  --buyer-journey-accent-tour-fill: rgba(76, 175, 80, 0.18);
  --buyer-journey-accent-tour-stroke: rgba(76, 175, 80, 0.42);
  --buyer-journey-picker-accent: rgb(76, 175, 80);

  --buyer-journey-tour-header-text: rgb(240, 235, 229);
  --buyer-journey-tour-header-text-muted: rgba(240, 235, 229, 0.82);
  --buyer-journey-tour-header-done: rgb(200, 230, 201);

  --buyer-journey-cell-fill: rgba(240, 235, 229, 0.08);
  --buyer-journey-cell-text: rgb(240, 235, 229);
  --buyer-journey-cell-text-faded: rgb(215, 207, 196);

  --buyer-journey-input-text: rgb(240, 235, 229);

  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-pixel: "JetBrains Mono", ui-monospace, monospace;

  --sidebar-background: var(--sidebar);
}

[data-theme="light"] {
  --font-sans:
    Outfit, ui-sans-serif, system-ui, -apple-system, sans-serif;

  --background: rgb(248, 245, 240);
  --foreground: rgb(62, 39, 35);
  --card: rgb(248, 245, 240);
  --card-foreground: rgb(62, 39, 35);
  --popover: rgb(248, 245, 240);
  --popover-foreground: rgb(62, 39, 35);
  --primary: rgb(46, 125, 50);
  --primary-foreground: rgb(255, 255, 255);
  --secondary: rgb(232, 245, 233);
  --secondary-foreground: rgb(27, 94, 32);
  --muted: rgb(240, 233, 224);
  --muted-foreground: rgb(109, 76, 65);
  --accent: rgb(200, 230, 201);
  --accent-foreground: rgb(27, 94, 32);
  --destructive: rgb(198, 40, 40);
  --destructive-foreground: rgb(255, 255, 255);
  --border: rgb(224, 214, 201);
  --input: rgb(224, 214, 201);
  --ring: rgb(46, 125, 50);
  --chart-1: rgb(76, 175, 80);
  --chart-2: rgb(56, 142, 60);
  --chart-3: rgb(46, 125, 50);
  --chart-4: rgb(27, 94, 32);
  --chart-5: rgb(10, 31, 12);
  --sidebar: rgb(240, 233, 224);
  --sidebar-foreground: rgb(62, 39, 35);
  --sidebar-primary: rgb(46, 125, 50);
  --sidebar-primary-foreground: rgb(255, 255, 255);
  --sidebar-accent: rgb(200, 230, 201);
  --sidebar-accent-foreground: rgb(27, 94, 32);
  --sidebar-border: rgb(224, 214, 201);
  --sidebar-ring: rgb(46, 125, 50);

  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow:
    0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  --tracking-normal: 0em;
  --spacing: 0.25rem;

  --cyan: rgb(96, 120, 100);
  --green: rgb(46, 125, 50);
  --purple: rgb(100, 90, 135);
  --pink: rgb(180, 120, 120);
  --yellow: rgb(220, 195, 150);
  --orange: rgb(46, 125, 50);
  --red: rgb(183, 48, 40);

  --brand-orange: rgb(46, 125, 50);
  --brand-orange-deep: rgb(27, 94, 32);
  --brand-orange-glow: rgb(129, 199, 132);

  --brand-orange-soft: color-mix(in srgb, var(--brand-orange) 14%, transparent);
  --brand-orange-surface: color-mix(in srgb, var(--brand-orange) 10%, var(--bg-base));
  --brand-orange-surface-muted: color-mix(in srgb, var(--brand-orange) 5.5%, var(--bg-base));
  --brand-orange-border: color-mix(in srgb, var(--brand-orange) 24%, transparent);
  --brand-orange-text-muted: color-mix(in srgb, var(--brand-orange) 45%, var(--text-secondary) 55%);

  --bg-base: rgb(248, 245, 240);
  --bg-surface: rgb(240, 233, 224);
  --bg-card: rgb(248, 245, 240);
  --bg-border: rgb(224, 214, 201);
  --bg-hover: rgb(232, 245, 233);

  --text-primary: rgb(62, 39, 35);
  --text-secondary: rgb(93, 64, 55);
  --text-muted: rgb(109, 76, 65);
  --text-code: rgb(62, 39, 35);

  --btn-primary-bg: rgb(46, 125, 50);
  --btn-primary-border: color-mix(
    in srgb,
    var(--brand-orange) 68%,
    var(--brand-orange-glow) 32%
  );
  --btn-primary-hover-bg: rgb(27, 94, 32);
  --btn-primary-fg: rgb(255, 255, 255);

  --buyer-journey-shell-fill: rgba(248, 245, 240, 0.94);
  --buyer-journey-shell-stroke: rgba(109, 76, 65, 0.22);
  --buyer-journey-screen-fill: rgba(240, 233, 224, 0.98);
  --buyer-journey-screen-stroke: rgba(109, 76, 65, 0.14);
  --buyer-journey-muted-fill: rgba(109, 76, 65, 0.08);
  --buyer-journey-muted-stroke: rgba(109, 76, 65, 0.14);
  --buyer-journey-accent-green-fill: rgba(46, 125, 50, 0.12);
  --buyer-journey-accent-green-stroke: rgba(46, 125, 50, 0.3);
  --buyer-journey-accent-secondary-fill: rgba(27, 94, 32, 0.12);
  --buyer-journey-accent-secondary-stroke: rgba(27, 94, 32, 0.28);
  --buyer-journey-accent-tour-fill: rgba(46, 125, 50, 0.1);
  --buyer-journey-accent-tour-stroke: rgba(46, 125, 50, 0.26);
  --buyer-journey-picker-accent: rgb(46, 125, 50);

  --buyer-journey-tour-header-text: rgb(62, 39, 35);
  --buyer-journey-tour-header-text-muted: rgba(62, 39, 35, 0.72);
  --buyer-journey-tour-header-done: rgb(27, 94, 32);

  --buyer-journey-cell-fill: rgba(109, 76, 65, 0.08);
  --buyer-journey-cell-text: rgb(62, 39, 35);
  --buyer-journey-cell-text-faded: rgb(109, 76, 65);

  --buyer-journey-input-text: rgb(62, 39, 35);

  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --font-pixel: "JetBrains Mono", ui-monospace, monospace;

  --sidebar-background: var(--sidebar);
}