/* Shared design tokens — Next.js app and Astro landing (`/theme.css`). */
/* Dark is default; light mode is `html[data-theme="light"]`. Storage key: `localStorage.theme` = `dark` | `light`. */

:root {
  --cyan: #f2e6d8;
  --green: #ff8a5b;
  --purple: #c86a3c;
  --pink: #ffb79a;
  --yellow: #ffd1ba;
  --orange: #e85118;
  --red: #9f3411;

  --brand-orange: #e85118;
  --brand-orange-deep: #b93e12;
  --brand-orange-glow: #ff8a5b;

  --bg-base: #0f0f10;
  --bg-surface: #17181a;
  --bg-card: #1d1f21;
  --bg-border: #2d2f33;
  --bg-hover: #25282c;

  --text-primary: #fffdf9;
  --text-secondary: #d7cec3;
  --text-muted: #8d847c;
  --text-code: #fff5ec;

  --brand-orange-soft: color-mix(in srgb, var(--brand-orange) 20%, 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: var(--brand-orange);
  --btn-primary-border: color-mix(in srgb, var(--brand-orange-deep) 80%, black 20%);
  --btn-primary-hover-bg: var(--brand-orange-deep);
  --btn-primary-fg: var(--text-primary);

  --font-mono: "JetBrains Mono", "Courier New", monospace;
  --font-sans: "Outfit", system-ui, -apple-system, sans-serif;
  --font-pixel: "Outfit", "JetBrains Mono", sans-serif;

  --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(15, 15, 16, 0.86);
  --buyer-journey-shell-stroke: #3a2a23;
  --buyer-journey-screen-fill: rgba(23, 24, 26, 0.96);
  --buyer-journey-screen-stroke: rgba(255, 253, 249, 0.08);
  --buyer-journey-muted-fill: rgba(255, 253, 249, 0.08);
  --buyer-journey-muted-stroke: rgba(255, 253, 249, 0.12);
  --buyer-journey-accent-green-fill: rgba(232, 81, 24, 0.2);
  --buyer-journey-accent-green-stroke: rgba(232, 81, 24, 0.45);
  --buyer-journey-accent-purple-fill: rgba(255, 138, 91, 0.16);
  --buyer-journey-accent-purple-stroke: rgba(255, 138, 91, 0.38);
  --buyer-journey-accent-tour-fill: rgba(232, 81, 24, 0.18);
  --buyer-journey-accent-tour-stroke: rgba(232, 81, 24, 0.42);
  --buyer-journey-picker-accent: var(--brand-orange);

  --buyer-journey-tour-header-text: #fffdf9;
  --buyer-journey-tour-header-text-muted: rgba(255, 253, 249, 0.82);
  --buyer-journey-tour-header-done: #ffd1ba;

  --buyer-journey-success-fill: color-mix(
    in srgb,
    var(--brand-orange) 92%,
    white 8%
  );
  --buyer-journey-success-stroke: var(--brand-orange-deep);
  --buyer-journey-success-shadow: rgba(232, 81, 24, 0.36);

  --buyer-journey-cell-fill: rgba(255, 253, 249, 0.08);
  --buyer-journey-cell-text: #fffdf9;
  --buyer-journey-cell-text-faded: #8d847c;

  --buyer-journey-input-text: #fffdf9;

  /* Next.js / Tailwind bridge */
  --background: var(--bg-base);
  --foreground: var(--text-primary);
}

[data-theme="light"] {
  --bg-base: #fffdf9;
  --bg-surface: #f7f1e8;
  --bg-card: #ffffff;
  --bg-border: #e7d8c8;
  --bg-hover: #f3e8dc;

  --text-primary: #111111;
  --text-secondary: #5f5a55;
  --text-muted: #9a8d7e;
  --text-code: #111111;

  --cyan: #8a7360;
  --green: #e85118;
  --purple: #b93e12;
  --red: #8f2f0e;

  --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%);

  --btn-primary-bg: var(--brand-orange);
  --btn-primary-border: color-mix(in srgb, var(--brand-orange-deep) 84%, black 16%);
  --btn-primary-hover-bg: var(--brand-orange-deep);
  --btn-primary-fg: #fffdf9;

  --buyer-journey-shell-fill: rgba(255, 253, 249, 0.94);
  --buyer-journey-shell-stroke: rgba(138, 115, 96, 0.22);
  --buyer-journey-screen-fill: rgba(247, 241, 232, 0.98);
  --buyer-journey-screen-stroke: rgba(138, 115, 96, 0.14);
  --buyer-journey-muted-fill: rgba(138, 115, 96, 0.08);
  --buyer-journey-muted-stroke: rgba(138, 115, 96, 0.14);
  --buyer-journey-accent-green-fill: rgba(232, 81, 24, 0.12);
  --buyer-journey-accent-green-stroke: rgba(232, 81, 24, 0.3);
  --buyer-journey-accent-purple-fill: rgba(185, 62, 18, 0.12);
  --buyer-journey-accent-purple-stroke: rgba(185, 62, 18, 0.28);
  --buyer-journey-accent-tour-fill: rgba(232, 81, 24, 0.1);
  --buyer-journey-accent-tour-stroke: rgba(232, 81, 24, 0.26);
  --buyer-journey-picker-accent: var(--brand-orange);

  --buyer-journey-tour-header-text: #111111;
  --buyer-journey-tour-header-text-muted: rgba(17, 17, 17, 0.72);
  --buyer-journey-tour-header-done: var(--brand-orange-deep);

  --buyer-journey-success-fill: color-mix(
    in srgb,
    var(--brand-orange) 88%,
    black 4%
  );
  --buyer-journey-success-stroke: var(--brand-orange-deep);
  --buyer-journey-success-shadow: rgba(232, 81, 24, 0.22);

  --buyer-journey-cell-fill: rgba(138, 115, 96, 0.08);
  --buyer-journey-cell-text: #111111;
  --buyer-journey-cell-text-faded: #9a8d7e;

  --buyer-journey-input-text: #111111;

  --background: var(--bg-base);
  --foreground: var(--text-primary);
}