:root {
  color-scheme: light;

  /* Radius scale — Linear-style: small and sharp, not pill-happy */
  --radius: 0.5rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 999px;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;

  /* Typography */
  --font: "DM Sans", "Segoe UI", sans-serif;
  --display: "Inter", Georgia, serif;
  --display-italic: "Fraunces", "Instrument Serif", Georgia, serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 2rem;
  --leading-tight: 1.25;
  --leading-normal: 1.5;

  /* Shadow scale — Linear-style: flat, borders carry the definition, not shadow */
  --shadow-sm: none;
  --shadow-md: 0 1px 1px rgba(20, 24, 22, 0.02);
  --shadow-lg: 0 4px 16px rgba(20, 24, 22, 0.09), 0 1px 2px rgba(20, 24, 22, 0.06);
  --shadow: var(--shadow-md); /* back-compat alias */

  /* Semantic surface/text tokens (light) */
  --background: #fbfbfa;
  --background-decor-a: transparent;
  --background-decor-b: transparent;
  --foreground: #17191b;
  --muted: #f1f2f0;
  --muted-foreground: #6b7269;
  --card: #ffffff;
  --card-foreground: #17191b;
  --popover: #ffffff;
  --popover-foreground: #17191b;
  --border: #e6e7e4;
  --input: #dcdedb;

  /* Brand / primary */
  --primary: #1f6b45;
  --primary-hover: #195939;
  --primary-foreground: #ffffff;
  --primary-soft: #e7f3ec;
  --primary-soft-border: #c7e2d3;

  --secondary: #eef1ee;
  --secondary-foreground: #14181a;

  --destructive: #b3392a;
  --destructive-soft: #f8e8e4;
  --destructive-foreground: #ffffff;

  --warning: #8a6d1f;
  --warning-soft: #f5edd8;
  --warning-foreground: #ffffff;

  --info: #1d5f9c;
  --info-soft: #e5f0f9;
  --info-foreground: #ffffff;

  /* Focus ring */
  --ring: #1f6b45;
  --focus-ring: 0 0 0 3px rgba(31, 107, 69, 0.28);

  /* Unified Auth & Onboarding Tokens */
  --auth-form-width: 420px;
  --auth-header-height: 4.25rem;
  --auth-card-radius: var(--radius-xl);
  --auth-input-radius: var(--radius-md);
  --auth-input-height: 2.75rem;
  --auth-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);
  --auth-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);

  /* Card "flavor" accents — rotating decorative palette for marketing content
     cards (use-case grids, differentiation panels, blog/resource cards).
     Kiwi reuses the brand green so the set stays anchored to the palette. */
  --flavor-strawberry: #c23b56;
  --flavor-strawberry-soft: #fbe8ec;
  --flavor-tangerine: #c05a1f;
  --flavor-tangerine-soft: #fbe9dc;
  --flavor-banana: #a97c14;
  --flavor-banana-soft: #faf1d2;
  --flavor-kiwi: var(--primary);
  --flavor-kiwi-soft: var(--primary-soft);
  --flavor-blueberry: #3454b4;
  --flavor-blueberry-soft: #e8edfa;
  --flavor-grape: #7a3fa0;
  --flavor-grape-soft: #f2e7f8;

  /* Legacy aliases kept so any un-migrated rule still resolves sanely */
  --bg: var(--background);
  --bg-elevated: var(--card);
  --ink: var(--foreground);
  --ink-soft: var(--muted-foreground);
  --line: var(--border);
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-ink: var(--primary-foreground);
  --danger: var(--destructive);
  --warn: var(--warning);

  /* Canvas diagram surface (pipeline, flow views) — light */
  --canvas-bg: #f6f7f5;
  --canvas-bg-deep: #eceeea;
  --canvas-grid-dot: rgba(31, 107, 69, 0.08);
  --canvas-surface: #ffffff;
  --canvas-surface-soft: #f2f3f0;
  --canvas-border: #d8dad5;
  --canvas-foreground: #17191b;
  --canvas-muted: #6b7269;
  --canvas-muted-soft: #8a9188;
  --canvas-accent: #1f6b45;
  --canvas-accent-strong: #195939;
  --canvas-accent-soft: rgba(31, 107, 69, 0.1);
  --canvas-accent-ink: #1a5c39;
  --canvas-danger: #b3392a;
  --canvas-danger-soft: rgba(179, 57, 42, 0.1);
  --canvas-danger-ink: #8c2d21;
  --canvas-quality: #c05a1f;

  /* Legacy: was a global .page column (1080px). Pages now fill the inset;
     keep the token only for optional local use. */
  --max: none;

  /* Motion — restrained durations/easings, marketing site + future app use */
  --motion-fast: 120ms;
  --motion-ui: 200ms;
  --motion-enter: 320ms;
  --motion-story: 600ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Stripe Navigation & Layout Specific Tokens — Light (App Native Palette) */
  --sidebar-bg: var(--background);
  --sidebar-border: var(--border);
  --sidebar-text: var(--foreground);
  --sidebar-muted: var(--muted-foreground);
  --sidebar-hover: var(--muted);
  --sidebar-active-bg: var(--primary-soft);
  --sidebar-active-text: var(--primary);
  --sidebar-active-indicator: var(--primary);
  --topbar-bg: color-mix(in srgb, var(--card) 85%, transparent);
  --topbar-border: var(--border);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --background: #101211;
  --background-decor-a: transparent;
  --background-decor-b: transparent;
  --foreground: #eef2ef;
  --muted: #1c211e;
  --muted-foreground: #97a29b;
  --card: #171b18;
  --card-foreground: #eef2ef;
  --popover: #171b18;
  --popover-foreground: #eef2ef;
  --border: #2a312c;
  --input: #2a312c;

  --primary: #3ecf7a;
  --primary-hover: #58d98c;
  --primary-foreground: #0f1712;
  --primary-soft: rgba(62, 207, 122, 0.16);
  --primary-soft-border: rgba(62, 207, 122, 0.35);

  --secondary: #1c211e;
  --secondary-foreground: #eef2ef;

  --destructive: #e08b74;
  --destructive-soft: rgba(217, 106, 79, 0.18);
  --destructive-foreground: #2a1c18;

  --warning: #e2c14a;
  --warning-soft: rgba(226, 162, 74, 0.16);
  --warning-foreground: #2a1c18;

  --info: #6db0e8;
  --info-soft: rgba(109, 176, 232, 0.18);
  --info-foreground: #14202c;

  --ring: #3ecf7a;
  --focus-ring: 0 0 0 3px rgba(62, 207, 122, 0.35);

  --auth-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  --auth-focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent);

  --flavor-strawberry: #ef7a92;
  --flavor-strawberry-soft: rgba(239, 122, 146, 0.16);
  --flavor-tangerine: #f0965c;
  --flavor-tangerine-soft: rgba(240, 150, 92, 0.16);
  --flavor-banana: #e8c257;
  --flavor-banana-soft: rgba(232, 194, 87, 0.16);
  --flavor-kiwi: var(--primary);
  --flavor-kiwi-soft: var(--primary-soft);
  --flavor-blueberry: #7fa0ec;
  --flavor-blueberry-soft: rgba(127, 160, 236, 0.16);
  --flavor-grape: #c48ee8;
  --flavor-grape-soft: rgba(196, 142, 232, 0.16);

  --shadow-sm: none;
  --shadow-md: 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: var(--shadow-md);

  --bg: var(--background);
  --bg-elevated: var(--card);
  --ink: var(--foreground);
  --ink-soft: var(--muted-foreground);
  --line: var(--border);
  --accent: var(--primary);
  --accent-soft: var(--primary-soft);
  --accent-ink: var(--primary-foreground);
  --danger: var(--destructive);
  --warn: var(--warning);

  --canvas-bg: #121512;
  --canvas-bg-deep: #0e120f;
  --canvas-grid-dot: rgba(62, 207, 122, 0.14);
  --canvas-surface: #1c211e;
  --canvas-surface-soft: #161b18;
  --canvas-border: #2f3832;
  --canvas-foreground: #eef2ef;
  --canvas-muted: #9aa59d;
  --canvas-muted-soft: #a8b2ab;
  --canvas-accent: #3ecf7a;
  --canvas-accent-strong: #2f9e5f;
  --canvas-accent-soft: rgba(62, 207, 122, 0.16);
  --canvas-accent-ink: #8fd9ad;
  --canvas-danger: #d96a4f;
  --canvas-danger-soft: rgba(217, 106, 79, 0.2);
  --canvas-danger-ink: #f0a090;
  --canvas-quality: #e2a24a;

  /* Stripe Navigation & Layout Specific Tokens — Dark (App Native Palette) */
  --sidebar-bg: var(--background);
  --sidebar-border: var(--border);
  --sidebar-text: var(--foreground);
  --sidebar-muted: var(--muted-foreground);
  --sidebar-hover: var(--muted);
  --sidebar-active-bg: var(--primary-soft);
  --sidebar-active-text: var(--primary);
  --sidebar-active-indicator: var(--primary);
  --topbar-bg: color-mix(in srgb, var(--card) 85%, transparent);
  --topbar-border: var(--border);
}