@theme {
    --font-sans: "Avenir Next", "Segoe UI", sans-serif;
    --font-display: "Iowan Old Style", "Palatino Linotype", serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

    --color-stone-50: oklch(0.986 0.008 86);
    --color-stone-100: oklch(0.974 0.012 84);
    --color-stone-150: oklch(0.958 0.016 82);
    --color-stone-200: oklch(0.936 0.018 79);
    --color-stone-300: oklch(0.896 0.025 76);
    --color-ink-700: oklch(0.4 0.04 244);
    --color-ink-800: oklch(0.31 0.04 248);
    --color-ink-900: oklch(0.23 0.038 252);
    --color-brand-300: oklch(0.84 0.05 228);
    --color-brand-400: oklch(0.76 0.09 214);
    --color-brand-500: oklch(0.67 0.12 226);
    --color-brand-700: oklch(0.48 0.1 232);
    --color-mint-300: oklch(0.85 0.05 182);
    --color-mint-500: oklch(0.72 0.07 186);
    --color-mint-700: oklch(0.54 0.07 184);
    --color-amber-300: oklch(0.88 0.045 73);
    --color-amber-500: oklch(0.75 0.085 62);
    --color-amber-700: oklch(0.56 0.09 54);
    --color-red-500: oklch(0.62 0.16 28);
}

:root {
    color-scheme: light;

    --color-background: var(--color-stone-50);
    --color-background-elevated: var(--color-stone-100);
    --color-foreground: var(--color-ink-900);
    --color-muted: var(--color-stone-150);
    --color-muted-foreground: var(--color-ink-700);
    --color-card: rgba(255, 255, 255, 0.9);
    --color-card-foreground: var(--color-ink-900);
    --color-border: rgba(17, 36, 58, 0.12);
    --color-border-strong: rgba(47, 111, 183, 0.22);
    --color-border-subtle: rgba(17, 36, 58, 0.07);
    --color-frame: rgba(17, 36, 58, 0.06);
    --color-input: rgba(255, 255, 255, 0.94);
    --color-primary: var(--color-brand-500);
    --color-primary-foreground: #f9fbff;
    --color-secondary: rgba(255, 255, 255, 0.82);
    --color-secondary-foreground: var(--color-ink-900);
    --color-accent: rgba(47, 111, 183, 0.1);
    --color-accent-foreground: var(--color-brand-700);
    --color-success: var(--color-mint-700);
    --color-warning: var(--color-amber-700);
    --color-destructive: var(--color-red-500);
    --color-info: var(--color-brand-700);

    --surface-page: rgba(255, 255, 255, 0.34);
    --surface-shell: rgba(255, 255, 255, 0.78);
    --surface-shell-strong: rgba(255, 255, 255, 0.94);
    --surface-card-soft: rgba(246, 248, 251, 0.82);
    --surface-muted: rgba(243, 247, 251, 0.88);
    --surface-muted-strong: rgba(247, 249, 252, 0.94);
    --surface-accent: rgba(47, 111, 183, 0.1);
    --surface-accent-strong: rgba(241, 246, 253, 0.98);
    --surface-trust: rgba(59, 139, 120, 0.09);

    --radius-sm: 1rem;
    --radius-md: 1.35rem;
    --radius-lg: 1.75rem;
    --radius-panel: 2rem;
    --radius-pill: 999px;

    --shadow-panel-strong: 0 28px 90px rgba(17, 36, 58, 0.14);
    --shadow-card: 0 20px 56px rgba(17, 36, 58, 0.1);
    --shadow-soft: 0 12px 36px rgba(17, 36, 58, 0.08);
    --shadow-inline: 0 10px 22px rgba(17, 36, 58, 0.08);

    --space-page-x: clamp(1.25rem, 2vw, 2.5rem);
    --space-page-y: clamp(4rem, 6vw, 6rem);
    --space-section-compact: clamp(3rem, 4vw, 4.25rem);
    --space-section: clamp(4rem, 6vw, 5.75rem);
    --space-section-spacious: clamp(5rem, 7vw, 7rem);
    --space-cluster-sm: 0.75rem;
    --space-cluster: 1rem;
    --space-cluster-lg: 1.5rem;
    --space-stack-sm: 0.75rem;
    --space-stack: 1.25rem;
    --space-stack-lg: 1.75rem;
    --space-grid: 1.25rem;
    --space-grid-lg: 1.75rem;

    --content-max-width: 76rem;
    --wide-max-width: 84rem;
    --reading-max-width: 68rem;

    --type-display-size: clamp(3.3rem, 6vw, 5rem);
    --type-page-size: clamp(2.75rem, 4.2vw, 3.75rem);
    --type-section-size: clamp(2rem, 3.5vw, 3rem);
    --type-card-size: clamp(1.35rem, 2vw, 1.85rem);
    --type-body-size: 1.02rem;
    --type-small-size: 0.94rem;
    --type-eyebrow-size: 0.74rem;
    --type-helper-size: 0.82rem;
    --tracking-display: -0.055em;
    --tracking-tight: -0.03em;
    --tracking-eyebrow: 0.18em;
    --line-display: 0.95;
    --line-heading: 1.02;
    --line-body: 1.75;
    --line-tight: 1.45;

    /* Legacy aliases used by existing primitives and content blocks. */
    --color-copy: var(--color-muted-foreground);
    --color-line: var(--color-border);
    --color-panel: var(--surface-shell);
    --color-panel-strong: var(--surface-shell-strong);
    --color-panel-soft: var(--surface-muted);
    --color-brand: var(--color-primary);
    --color-brand-soft: var(--surface-accent);
    --color-signal: var(--color-success);
    --color-warm: var(--color-warning);
    --shadow-panel: var(--shadow-panel-strong);
}