/* Design tokens — single :root. Product theme.css overrides palette/fonts only. */

: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;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-md: 0.9375rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: clamp(1.5rem, 3vw, 2rem);
    --text-3xl: clamp(1.85rem, 3.6vw, 2.5rem);
    --text-4xl: clamp(2.15rem, 4.5vw, 3.35rem);
    --text-5xl: clamp(2.5rem, 5.5vw, 4rem);
    --text-6xl: clamp(2.75rem, 6vw, 4.5rem);
    --tracking-display: -0.035em;
    --leading-display: 1.03;
    --leading-body: 1.65;

    --page-max: 1320px;
    --container-max: var(--page-max);
    --container-gutter: clamp(1.125rem, 3vw, 2.5rem);
    --section-y: clamp(2.75rem, 5vw, 4.5rem);
    --section-space: var(--section-y);
    --hero-pad-y: clamp(3.5rem, 8vw, 7rem);
    --type-scale: 1;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-btn: 12px;
    --radius: var(--radius-md);

    --shadow: 0 8px 28px rgba(14, 24, 32, 0.06);
    --shadow-lg: 0 24px 56px rgba(14, 24, 32, 0.12);

    --z-base: 1;
    --z-header: 100;
    --z-fab: 110;
    --z-overlay: 150;
    --z-drawer: 160;
    --z-demo-bar: 400;

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 0.18s;
    --dur-base: 0.28s;
    --dur-slow: 0.55s;

    --surface-1: #ffffff;
    --surface-2: #f4f6f7;
    --surface-3: #eef1f3;
    --surface-ink: #0b171e;
    --on-surface: #0e1820;
    --on-ink: #f4f6f7;
    --theme-on-ink-muted: #c8d0d6;
    --border-subtle: rgba(14, 24, 32, 0.08);

    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
    --font-display: var(--font-sans);
    --color-text: var(--theme-ink, var(--on-surface));
    --color-muted: #5b6870;
    --color-border: #e4e8eb;
    --color-bg: var(--surface-2);

    --theme-primary: #0f172a;
    --theme-primary-dark: #0b1220;
    --theme-brand: var(--theme-primary);
    --theme-ink: var(--theme-primary);
    --theme-accent: #2563eb;
    --theme-accent-light: #93c5fd;
    --theme-on-primary: #ffffff;
    --theme-on-primary-dark: #ffffff;
    --theme-on-accent: #ffffff;
    --theme-on-inverse: #0e1820;
    --theme-page-bg: var(--surface-2);
    --theme-header-bg: rgba(255, 255, 255, 0.88);
    --theme-header-nav-color: var(--theme-ink);
    --theme-header-muted: var(--color-muted);
    --theme-surface: #ffffff;
    --theme-on-surface: var(--theme-ink);
    --theme-on-surface-muted: var(--color-muted);
    --theme-surface-border: var(--color-border);
}

.container {
    width: min(var(--container-max), calc(100% - 2 * var(--container-gutter)));
    margin-inline: auto;
}

.container.narrow {
    max-width: min(36rem, calc(100% - 2 * var(--container-gutter)));
}

.section {
    padding-block: var(--section-y);
}

.section-ink {
    background: var(--surface-ink);
    color: var(--on-ink);
}

.section-ink .section-head h2,
.section-ink .section-head .eyebrow,
.section-ink h2,
.section-ink h3 {
    color: var(--on-ink);
}

.section-ink .section-head .section-lead,
.section-ink p,
.section-ink .muted {
    color: var(--theme-on-ink-muted, var(--on-ink));
}