/* Public experience — semantic tokens (extends brand/tokens.css) */
@import url("/css/fonts.css");
@import url("/brand/tokens.css");

:root {
  --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;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 4vw, 2.25rem);
  --text-display: clamp(2.35rem, 5.5vw, 3.5rem);

  --color-bg-canvas: var(--brand-bg, #050505);
  --color-bg-surface: var(--brand-bg-elevated, #0a0a0b);
  --color-bg-elevated: var(--brand-card, rgba(255, 255, 255, 0.05));
  --color-border-subtle: var(--brand-border, rgba(255, 255, 255, 0.1));
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-text-primary: var(--brand-text, #f8fafc);
  --color-text-secondary: var(--brand-muted, #9ca3af);
  --color-accent-primary: var(--brand-purple, #7b42f6);
  --color-accent-secondary: var(--brand-cyan, #06b6d4);

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;

  --shadow-sm: 0 4px 24px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 0 80px rgba(123, 66, 246, 0.12);

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: 16px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-normal: 280ms;
  --duration-slow: 600ms;

  --section-gap: clamp(4rem, 8vw, 6.5rem);
  --content-max: 36rem;
  --page-max: 1180px;

  --mono: "JetBrains Mono", ui-monospace, monospace;
  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;

  --nav-h: 72px;
  --safe-top: env(safe-area-inset-top, 0px);
  --nav-offset: calc(var(--nav-h) + var(--safe-top));
}

html {
  scroll-padding-top: var(--nav-offset);
}

html[data-theme="light"] {
  --color-bg-canvas: #f1f5f9;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #f8fafc;
  --color-border-subtle: rgba(15, 23, 42, 0.12);
  --color-border-strong: rgba(15, 23, 42, 0.18);
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --brand-bg: #f1f5f9;
  --brand-bg-elevated: #ffffff;
  --brand-text: #0f172a;
  --brand-muted: #475569;
  --brand-border: rgba(15, 23, 42, 0.12);
  --brand-card: #ffffff;
  --brand-purple: #6d28d9;
  --brand-cyan: #0e7490;
  --glass-bg: #ffffff;
  --glass-border: rgba(15, 23, 42, 0.1);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 16px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 24px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12);
  --shadow-glow: 0 0 48px rgba(123, 66, 246, 0.08);
  /* Aliases used by home.css / marketing */
  --bg: #f1f5f9;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --border: rgba(15, 23, 42, 0.12);
  --text: #0f172a;
  --muted: #475569;
  --text-subtle: #475569;
  --text-eyebrow: #5b21b6;
  --works-yes-text: #047857;
  --works-no-text: #64748b;
  --compare-bad: #64748b;
  --compare-good: #5b21b6;
}

html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition:
    background-color var(--duration-normal, 280ms) var(--ease-out, ease),
    color var(--duration-normal, 280ms) var(--ease-out, ease),
    border-color var(--duration-normal, 280ms) var(--ease-out, ease),
    box-shadow var(--duration-normal, 280ms) var(--ease-out, ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-transition,
  html.theme-transition *,
  html.theme-transition *::before,
  html.theme-transition *::after {
    transition: none !important;
  }
}