/* ============================================================
   DESIGN TOKENS — Complete System
   ============================================================ */

        :root {
            /* — Color Palette — */
            --ink: #111111;
            --paper: #f6f0e7;
            --paper-soft: #fffaf2;
            --muted: #6d675e;
            --line: rgba(17, 17, 17, 0.16);
            --line-strong: rgba(17, 17, 17, 0.34);
            --accent: #d65626;
            --accent-dark: #9e3418;
            --accent-light: #ffb38f;
            --sage: #6b7d62;
            --blue: #22384c;
            --white: #ffffff;

            /* — Spacing Scale (4px-based) — */
            --space-1: 4px;
            --space-2: 8px;
            --space-3: 12px;
            --space-4: 16px;
            --space-5: 20px;
            --space-6: 24px;
            --space-7: 28px;
            --space-8: 32px;
            --space-9: 36px;
            --space-10: 40px;
            --space-12: 48px;
            --space-14: 56px;
            --space-16: 64px;
            --space-20: 80px;
            --space-24: 96px;
            --space-32: 128px;

            /* — Fluid Spacing — */
            --space-section: clamp(var(--space-20), 10vw, var(--space-32));
            --space-section-tight: clamp(var(--space-14), 7vw, var(--space-24));
            --space-gutter: clamp(var(--space-6), 4vw, var(--space-12));
            --space-container: min(var(--max), calc(100% - var(--space-9)));
            --space-container-sm: min(100% - var(--space-7), var(--max));

            /* — Typography Scale — */
            --font-sans:
                Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
                "Segoe UI", sans-serif;
            --font-serif: Georgia, "Times New Roman", serif;
            --font-display: "Fraunces", var(--font-serif);

            --text-xs: 0.78rem;
            --text-sm: 0.82rem;
            --text-base: 0.92rem;
            --text-md: 1rem;
            --text-lg: 1.1rem;
            --text-xl: 1.15rem;
            --text-2xl: 1.25rem;
            --text-3xl: 1.35rem;
            --text-4xl: 1.5rem;
            --text-5xl: 1.65rem;

            --fluid-hero-title: clamp(3.6rem, 10vw, 10.8rem);
            --fluid-section-title: clamp(2.4rem, 6.2vw, 6.7rem);
            --fluid-section-title-sm: clamp(2.25rem, 4.5vw, 4.8rem);
            --fluid-big-statement: clamp(2.4rem, 6vw, 6.2rem);
            --fluid-heading-lg: clamp(2rem, 4vw, 4.5rem);
            --fluid-heading-md: clamp(1.65rem, 3.4vw, 3.7rem);
            --fluid-heading-sm: clamp(1.35rem, 2vw, 2.15rem);
            --fluid-body-lg: clamp(1.08rem, 1.85vw, 1.55rem);
            --fluid-body: clamp(1rem, 1.6vw, 1.25rem);
            --fluid-body-sm: clamp(0.92rem, 1.45vw, 1.22rem);
            --fluid-partner: clamp(1rem, 2vw, 1.8rem);

            --leading-tight: 0.82;
            --leading-snug: 0.9;
            --leading-normal: 1.58;
            --leading-relaxed: 1.65;
            --leading-loose: 1.75;
            --leading-extra-loose: 1.78;

            --tracking-tight: -0.075em;
            --tracking-tighter: -0.065em;
            --tracking-tight-sm: -0.055em;
            --tracking-normal: -0.02em;
            --tracking-wide: 0.08em;
            --tracking-wider: 0.12em;
            --tracking-widest: 0.14em;
            --tracking-ultra-wide: 0.16em;
            --tracking-extra-wide: 0.18em;

            /* — Shadow Scale — */
            --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.08);
            --shadow-md: 0 10px 28px -10px rgba(17, 17, 17, 0.5);
            --shadow-nav: 0 18px 50px rgba(17, 17, 17, 0.08);
            --shadow-nav-scrolled: 0 16px 44px rgba(17, 17, 17, 0.12);
            --shadow-float: 0 24px 80px rgba(17, 17, 17, 0.22);
            --shadow-banner: 0 20px 50px -20px rgba(0, 0, 0, 0.5);
            --shadow-accent: 0 2px 8px rgba(214, 86, 38, 0.4);
            --shadow-focus: 0 0 0 var(--space-1) var(--accent-light);

            /* — Radius Scale — */
            --radius-sm: 16px;
            --radius-md: 18px;
            --radius-lg: 24px;
            --radius-xl: 28px;
            --radius-pill: 999px;
            --radius-circle: 50%;
            --radius: var(--radius-xl);

            /* — Animation & Motion — */
            --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
            --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
            --duration-fast: 0.2s;
            --duration-normal: 0.25s;
            --duration-slow: 0.3s;
            --duration-slower: 0.4s;
            --duration-slowest: 0.5s;

            /* — Layout — */
            --max: 1180px;
            --nav-height: 50px;

            /* — Z-Index Scale — */
            --z-base: 1;
            --z-dropdown: 5;
            --z-sticky: 100;
            --z-overlay: 90;
            --z-modal: 1000;
            --z-skip: 1000;

            /* — Color Scheme — */
            color-scheme: light;
        }