:root {
  --color-background: #F7F8FA;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F0F3F7;
  --color-text: #111827;
  --color-text-muted: #5F6B7A;
  --color-border: #DDE3EA;
  --color-primary: #5B4CF0;
  --color-primary-hover: #493BD2;
  --color-primary-contrast: #FFFFFF;
  --color-success: #168A5B;
  --color-error: #C43D4B;
  --color-focus-ring: #5B4CF0;

  /* Brand accent palette — used for the logo mark, hero gradients, and
     marketing-page flourishes. Kept separate from the functional tokens
     above so tool interfaces can stay calm while marketing sections can
     be expressive. */
  --brand-purple: #7C4DFF;
  --brand-pink: #EC4899;
  --brand-orange: #FB923C;
  --brand-teal: #2DD4BF;
  --gradient-brand: linear-gradient(135deg, var(--brand-purple), var(--brand-pink) 50%, var(--brand-orange));

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;

  --shadow-sm: 0 1px 3px rgba(17, 24, 39, 0.08);
  --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 24px 64px rgba(17, 24, 39, 0.12);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;

  --font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --content-max-width: 720px;
  --app-max-width: 1220px;

  --header-height: 64px;
  --header-height-mobile: 56px;

  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;

  --z-header: 100;
  --z-dropdown: 150;
  --z-mobile-menu: 200;
  --z-search-modal: 300;
  --z-toast: 500;
}

/*
 * Dark mode has two triggers that must both work:
 * 1. `prefers-color-scheme: dark` — respects the OS/browser setting when the
 *    visitor hasn't made an explicit choice on this site.
 * 2. `:root[data-theme="dark"|"light"]` — the manual toggle in the header
 *    (assets/js/components/theme-toggle.js) stamps this attribute and always
 *    wins over the OS preference, in both directions.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-background: #111418;
    --color-surface: #181C22;
    --color-surface-alt: #1F242B;
    --color-text: #F3F5F7;
    --color-text-muted: #9AA5B1;
    --color-border: #2B313A;
    --color-primary: #8B7FFB;
    --color-primary-hover: #A79BFF;
    --color-primary-contrast: #111418;
    --color-success: #3FBF8B;
    --color-error: #E77680;
    --color-focus-ring: #8B7FFB;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
  }
}

:root[data-theme="dark"] {
  --color-background: #111418;
  --color-surface: #181C22;
  --color-surface-alt: #1F242B;
  --color-text: #F3F5F7;
  --color-text-muted: #9AA5B1;
  --color-border: #2B313A;
  --color-primary: #8B7FFB;
  --color-primary-hover: #A79BFF;
  --color-primary-contrast: #111418;
  --color-success: #3FBF8B;
  --color-error: #E77680;
  --color-focus-ring: #8B7FFB;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5);
}