@layer designSystem {
    :root {
        /* Required for the light-dark() CSS function to parse correctly */
        color-scheme: light dark;

        --color-black: #1c1c1e;
        --color-white: #ffffff;

        /* ==========================================
           1. APPLE RAW PALETTE TOKENS (HIG Standards)
           ========================================== */
        --apple-blue: light-dark(#007af5, #0a84ff);
        --apple-blue-hover: light-dark(#0062c4, #2693ff);
        --apple-green: light-dark(#34c759, #30d158);
        --apple-indigo: light-dark(#5856d6, #5e5ce6);
        --apple-orange: light-dark(#ff9500, #ff9f0a);
        --apple-pink: light-dark(#ff2d55, #ff375f);
        --apple-purple: light-dark(#af52de, #bf5af2);
        --apple-red: light-dark(#ff3b30, #ff453a);
        --apple-teal: light-dark(#55bef0, #40c8ea);
        --apple-yellow: light-dark(#ffcc00, #ffd60a);

        /* Subtle Surface + Border variants */
        --apple-blue-surface: light-dark(
            color-mix(in oklab, #007af5 6%, var(--color-white) 94%),
            color-mix(in oklab, #0a84ff 8%, var(--color-black) 92%)
        );
        --apple-blue-border: light-dark(
            color-mix(in oklab, #007af5 20%, transparent),
            color-mix(in oklab, #0a84ff 10%, transparent)
        );

        --apple-green-surface: light-dark(
            color-mix(in oklab, #34c759 6%, var(--color-white) 94%),
            color-mix(in oklab, #30d158 8%, var(--color-black) 92%)
        );
        --apple-green-border: light-dark(
            color-mix(in oklab, #34c759 10%, transparent),
            color-mix(in oklab, #30d158 10%, transparent)
        );

        --apple-indigo-surface: light-dark(
            color-mix(in oklab, #5856d6 6%, var(--color-white) 94%),
            color-mix(in oklab, #5e5ce6 8%, var(--color-black) 92%)
        );
        --apple-indigo-border: light-dark(
            color-mix(in oklab, #5856d6 20%, transparent),
            color-mix(in oklab, #5e5ce6 10%, transparent)
        );

        --apple-orange-surface: light-dark(
            color-mix(in oklab, #ff9500 6%, var(--color-white) 94%),
            color-mix(in oklab, #ff9f0a 8%, var(--color-black) 92%)
        );
        --apple-orange-border: light-dark(
            color-mix(in oklab, #ff9500 10%, transparent),
            color-mix(in oklab, #ff9f0a 10%, transparent)
        );

        --apple-pink-surface: light-dark(
            color-mix(in oklab, #ff2d55 6%, --color-white 94%),
            color-mix(in oklab, #ff375f 8%, --color-black 92%)
        );
        --apple-pink-border: light-dark(
            color-mix(in oklab, #ff2d55 10%, transparent),
            color-mix(in oklab, #ff375f 10%, transparent)
        );

        --apple-purple-surface: light-dark(
            color-mix(in oklab, #af52de 6%, var(--color-white) 94%),
            color-mix(in oklab, #bf5af2 8%, var(--color-black) 92%)
        );
        --apple-purple-border: light-dark(
            color-mix(in oklab, #af52de 10%, transparent),
            color-mix(in oklab, #bf5af2 10%, transparent)
        );

        --apple-red-surface: light-dark(
            color-mix(in oklab, #ff3b30 6%, var(--color-white) 94%),
            color-mix(in oklab, #ff453a 8%, var(--color-black) 92%)
        );
        --apple-red-border: light-dark(
            color-mix(in oklab, #ff3b30 10%, transparent),
            color-mix(in oklab, #ff453a 10%, transparent)
        );

        --apple-teal-surface: light-dark(
            color-mix(in oklab, #55bef0 6%, var(--color-white) 94%),
            color-mix(in oklab, #40c8ea 8%, var(--color-black) 92%)
        );
        --apple-teal-border: light-dark(
            color-mix(in oklab, #55bef0 10%, transparent),
            color-mix(in oklab, #40c8ea 10%, transparent)
        );

        --apple-yellow-surface: light-dark(
            color-mix(in oklab, #ffcc00 6%, var(--color-white) 94%),
            color-mix(in oklab, #ffd60a 8%, var(--color-black) 92%)
        );
        --apple-yellow-border: light-dark(
            color-mix(in oklab, #ffcc00 20%, transparent),
            color-mix(in oklab, #ffd60a 10%, transparent)
        );

        /* Apple System Grays 1-6 */
        --apple-gray-1: light-dark(#8e8e93, #8e8e93);
        --apple-gray-2: light-dark(#aeaea3, #636366);
        --apple-gray-3: light-dark(#d1d1d6, #48484a);
        --apple-gray-4: light-dark(#e5e5ea, #3a3a3c);
        --apple-gray-5: light-dark(#f2f2f7, #2c2c2e);
        --apple-gray-6: light-dark(var(--color-white), var(--color-black));

        /* Apple Alpha Labels (Vibrant text overlay blending) */
        --apple-label-primary: light-dark(
            var(--color-black),
            var(--color-white)
        );
        --apple-label-secondary: light-dark(
            #3c3c4399,
            #ebebf599
        ); /* ~60% alpha visibility */
        --apple-label-muted: light-dark(
            #3c3c434d,
            #ebebf54d
        ); /* ~30% alpha visibility */

        /* ==========================================
           2. SEMANTIC DESIGN SYSTEM MAPPINGS
           ========================================== */
        --color-primary: var(--apple-blue);
        --color-primary-hover: var(--apple-blue-hover);
        --color-secondary: var(--apple-gray-1);
        --color-primary-constrast: var(--color-white);

        /* Background & Layering hierarchy */
        --color-background: var(
            --apple-gray-6
        ); /* White in Light / Pure Dark in Dark */
        --color-surface: var(
            --apple-gray-5
        ); /* Soft light tint / Elevated slate */
        --color-surface-2: var(
            --apple-gray-4
        ); /* Standard card or secondary backdrop */

        /* Text readability pairings */
        --color-text: var(--apple-label-primary);
        --color-prose: color-mix(
            in oklab,
            var(--color-text) 82%,
            var(--color-background)
        );
        --color-text-secondary: var(--apple-label-secondary);
        --color-text-muted: var(--apple-label-muted);

        /* Hardware & Component Dividers */
        --color-border: var(--apple-gray-3);
        --color-border-focus: var(--apple-blue);

        /* Contextual Alerts & Action Flags */
        --color-success: var(--apple-green);
        --color-warning: var(--apple-orange);
        --color-danger: var(--apple-red);

        /* ==========================================
           3. DESIGN SYSTEM UTILITIES (Unchanged)
           ========================================== */
        --font-family-base: ui-sans-serif, system-ui, -apple-system, sans-serif;
        --font-family-mono: ui-monospace, SFMono-Regular, monospace;

        --font-size-xs: 0.75rem;
        --font-size-sm: 0.875rem;
        --font-size-base: 1rem;
        --font-size-lg: 1.125rem;
        --font-size-xl: 1.25rem;
        --font-size-2xl: 1.5rem;
        --font-size-3xl: 1.875rem;
        --font-size-4xl: 2.25rem;
        --font-size-5xl: 3rem;
        --font-size-6xl: 4.5rem;

        --font-weight-light: 300;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-black: 900;

        --line-height-tight: 1.25;
        --line-height-base: 1.5;
        --line-height-relaxed: 1.75;

        --tracking-tight: -0.022em;
        --tracking-normal: -0.011em;
        --tracking-wide: 0.1em;

        --spacing-1: 0.25rem;
        --spacing-2: 0.5rem;
        --spacing-3: 0.75rem;
        --spacing-4: 1rem;
        --spacing-5: 1.25rem;
        --spacing-6: 1.5rem;
        --spacing-8: 2rem;
        --spacing-12: 3rem;
        --spacing-16: 4rem;
        --spacing-20: 5rem;
        --spacing-24: 6rem;

        --size-container-sm: 640px;
        --size-container-md: 768px;
        --size-container-lg: 1024px;
        --size-container-xl: 1280px;

        --radius-sm: 0.25rem;
        --radius-md: 0.5rem;
        --radius-lg: 0.75rem;
        --radius-full: 9999px;

        --border-width: 1px;
        --border-style: solid;

        /* Compute just the color dynamically */
        --shadow-color-sm: light-dark(rgb(0 0 0 / 0.05), rgb(0 0 0 / 0.3));
        --shadow-color: light-dark(rgb(0 0 0 / 0.1), rgb(0 0 0 / 0.4));
        --shadow-color-md: light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.5));

        /* Apply it to the static layout geometry */
        --shadow-sm: 0 1px 2px 0 var(--shadow-color-sm);
        --shadow: 0 1px 3px 0 var(--shadow-color);
        --shadow-md: 0 4px 6px -1px var(--shadow-color-md);

        /* ==========================================
           4. Sizes
           ========================================== */

        --breakout-max-width: 1400px;
        --content-max-width: 1200px;
        --site-horizontal-inset: var(--spacing-6);
        --breakout-gutter: var(--spacing-6);

        --mobile-header-cut: 900px;

        /* ==========================================
           4. Animations
           ========================================== */

        --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
        --ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
        --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
        --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

        --duration-fast: 120ms;
        --duration-base: 200ms;
        --duration-slow: 320ms;
        --duration-slower: 480ms;
    }
}