@theme {
    --font-sans: "Inter", "Avenir Next", "Segoe UI", sans-serif;
    --font-display: "Inter", "Avenir Next", "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

    /* Cool slate neutrals — shadcn / Apex direction */
    --color-stone-50: oklch(0.985 0.002 250);
    --color-stone-100: oklch(0.975 0.003 250);
    --color-stone-150: oklch(0.962 0.004 248);
    --color-stone-200: oklch(0.94 0.006 246);
    --color-stone-300: oklch(0.90 0.008 244);
    /* Ink: dark slate, very low chroma — near-black with cool undertone */
    --color-ink-700: oklch(0.44 0.01 250);
    --color-ink-800: oklch(0.30 0.008 250);
    --color-ink-900: oklch(0.14 0.005 250);
    /* Brand: dry slate-blue — enterprise, not flashy */
    --color-brand-300: oklch(0.78 0.06 245);
    --color-brand-400: oklch(0.64 0.09 245);
    --color-brand-500: oklch(0.50 0.10 245);
    --color-brand-700: oklch(0.38 0.09 248);
    /* Mint → Steel: functional accent for success states */
    --color-mint-300: oklch(0.84 0.05 175);
    --color-mint-500: oklch(0.66 0.08 172);
    --color-mint-700: oklch(0.48 0.08 170);
    /* Amber: stays functional (warning states) */
    --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.92);
    --color-card-foreground: var(--color-ink-900);
    --color-border: rgba(20, 20, 20, 0.08);
    --color-border-strong: rgba(20, 20, 20, 0.15);
    --color-border-subtle: rgba(20, 20, 20, 0.05);
    --color-frame: rgba(20, 20, 20, 0.04);
    --color-input: rgba(255, 255, 255, 0.94);
    --color-primary: var(--color-brand-500);
    --color-primary-foreground: #f8f9fb;
    --color-secondary: rgba(255, 255, 255, 0.82);
    --color-secondary-foreground: var(--color-ink-900);
    --color-accent: rgba(40, 60, 120, 0.06);
    --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(248, 249, 252, 0.82);
    --surface-muted: rgba(246, 248, 252, 0.88);
    --surface-muted-strong: rgba(250, 251, 254, 0.94);
    --surface-accent: rgba(40, 60, 120, 0.04);
    --surface-accent-strong: rgba(246, 248, 254, 0.98);
    --surface-trust: rgba(40, 60, 120, 0.03);
    --surface-section-tinted: rgba(246, 248, 252, 0.62);
    --surface-section-warm: rgba(248, 249, 252, 0.52);

    --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-card-hover: 0 24px 64px rgba(17, 36, 58, 0.15);
    --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(5rem, 8vw, 8rem);
    --space-section-compact: clamp(3.5rem, 5vw, 5rem);
    --space-section: clamp(5rem, 8vw, 7rem);
    --space-section-spacious: clamp(6rem, 9vw, 9rem);
    --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(2.75rem, 5vw, 4.25rem);
    --type-page-size: clamp(2.25rem, 3.8vw, 3.25rem);
    --type-section-size: clamp(1.75rem, 2.8vw, 2.5rem);
    --type-card-size: clamp(1.25rem, 1.8vw, 1.6rem);
    --type-body-size: 1.05rem;
    --type-small-size: 0.94rem;
    --type-eyebrow-size: 0.74rem;
    --type-helper-size: 0.82rem;
    --tracking-display: -0.04em;
    --tracking-tight: -0.025em;
    --tracking-eyebrow: 0.18em;
    --line-display: 0.96;
    --line-heading: 1.04;
    --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);
}
