:root {
    color-scheme: light;

    --brand: #ff3b30;
    --brand-strong: #e0322a;

    --success: #12b76a;
    --warning: #f79009;
    --danger: #f04438;
    --info: #2e90fa;

    --bg: #faf7f1;
    --bg-elev: #ffffff;
    --surface: #ffffff;
    --surface-2: #f2ede4;
    --border: rgba(43, 38, 34, 0.10);
    --border-strong: rgba(43, 38, 34, 0.17);
    --text: #3a342e;
    --text-strong: #1f1b17;
    --text-muted: #6b6258;
    --text-faint: #9a9186;

    --glass-bg: rgba(255, 252, 246, 0.70);
    --glass-border: rgba(255, 255, 255, 0.75);
    --glass-shadow: 0 10px 34px -14px rgba(43, 38, 34, 0.18);
    --glass-blur: 22px;

    --elev-1: 0 1px 2px rgba(43, 38, 34, 0.05), 0 10px 26px -14px rgba(43, 38, 34, 0.12);
    --elev-2: 0 2px 6px rgba(43, 38, 34, 0.07), 0 22px 46px -18px rgba(43, 38, 34, 0.18);

    --mesh-1: rgba(255, 241, 220, 0.75);
    --mesh-2: rgba(233, 224, 250, 0.50);
    --mesh-3: rgba(243, 238, 228, 0.65);

    --accent: var(--brand);
    --accent-strong: var(--brand-strong);
    --accent-weak: color-mix(in srgb, var(--accent) 12%, transparent);
    --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
    --on-accent: #ffffff;
    --glow: color-mix(in srgb, var(--accent) 20%, transparent);
    --accent-ink: var(--accent);

    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "SF Pro Display", "Inter", var(--font-sans);
    --font-rounded: "Nunito", ui-rounded, "SF Pro Rounded", var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 1rem;
    --text-md: 1.0625rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;
    --text-hero: clamp(2.75rem, 8vw, 4.5rem);

    --lh-tight: 1.05;
    --lh-snug: 1.2;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.08em;

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

    --pad-inline: clamp(1.25rem, 4vw, 2rem);
    --pad-section: clamp(1.75rem, 3.5vw, 2.5rem);
    --gap: 1rem;
    --gap-lg: 1.5rem;
    --pad-card: 1.5rem;

    --r-xs: 0.5rem;
    --r-sm: 0.75rem;
    --r-md: 1rem;
    --r-lg: 1.5rem;
    --r-xl: 2rem;
    --r-pill: 9999px;

    --w-prose: 44rem;
    --w-content: 62rem;
    --w-wide: 62rem;
    --nav-h: 3.75rem;

    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;

    --dur-1: 0.15s;
    --dur-2: 0.28s;
    --dur-3: 0.5s;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);

    --z-nav: 50;
    --z-dock: 45;
    --z-sheet: 60;
    --z-confetti: 9999;

    --pill-bg: #1a1a1a;
    --pill-text: #f4f1ea;
    --pill-active-bg: #f4f1ea;
    --pill-active-text: #1a1a1a;
}

html.dark {
    color-scheme: dark;

    --brand: #ff5e55;
    --brand-strong: #ff5e55;

    --bg: #090b10;
    --bg-elev: #0f172a;
    --surface: #0f172a;
    --surface-2: #151e2e;
    --border: rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.14);
    --text: #e2e8f0;
    --text-strong: #ffffff;
    --text-muted: #94a3b8;
    --text-faint: #64748b;

    --glass-bg: rgba(9, 11, 16, 0.72);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 10px 34px -14px rgba(0, 0, 0, 0.6);

    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 26px -14px rgba(0, 0, 0, 0.5);
    --elev-2: 0 2px 6px rgba(0, 0, 0, 0.4), 0 22px 46px -18px rgba(0, 0, 0, 0.65);

    --mesh-1: rgba(15, 23, 42, 0.8);
    --mesh-2: rgba(30, 41, 59, 0.4);
    --mesh-3: rgba(2, 6, 23, 1);

    --on-accent: #0b1220;

    --pill-bg: #e0e0e0;
    --pill-text: #121212;
    --pill-active-bg: #121212;
    --pill-active-text: #e0e0e0;
}

@media (prefers-reduced-transparency: reduce) {
    :root {
        --glass-bg: var(--bg-elev);
        --glass-blur: 0px;
    }
    html.dark {
        --glass-bg: var(--bg-elev);
    }
}