:root {
    color-scheme: light;

    /* Brand */
    --cdl-color-yellow-50: #fffbea;
    --cdl-color-yellow-100: #fff4bd;
    --cdl-color-yellow-300: #ffe36b;
    --cdl-color-yellow-500: #ffd000;
    --cdl-color-yellow-600: #e7bb00;
    --cdl-color-yellow-700: #b88f00;
    --cdl-color-navy-950: #071827;
    --cdl-color-navy-900: #0c2132;
    --cdl-color-navy-800: #163047;
    --cdl-color-navy-700: #24445d;
    --cdl-color-glass-50: #f4fafb;
    --cdl-color-glass-100: #e8f4f6;
    --cdl-color-glass-300: #a9d6dd;
    --cdl-color-glass-500: #65b4c0;

    /* Neutral */
    --cdl-color-white: #fff;
    --cdl-color-gray-25: #fcfdfd;
    --cdl-color-gray-50: #f7f9fa;
    --cdl-color-gray-100: #f0f3f5;
    --cdl-color-gray-200: #e1e7ea;
    --cdl-color-gray-300: #cbd4d9;
    --cdl-color-gray-500: #6e7c86;
    --cdl-color-gray-600: #53636e;
    --cdl-color-gray-700: #374a57;
    --cdl-color-gray-900: #142631;
    --cdl-color-green-50: #effaf5;
    --cdl-color-green-600: #137a52;
    --cdl-color-red-50: #fff2f1;
    --cdl-color-red-600: #b83232;

    /* Semantic */
    --cdl-background: var(--cdl-color-white);
    --cdl-background-subtle: var(--cdl-color-gray-50);
    --cdl-surface: var(--cdl-color-white);
    --cdl-surface-raised: var(--cdl-color-white);
    --cdl-text-primary: var(--cdl-color-navy-950);
    --cdl-text-secondary: var(--cdl-color-gray-600);
    --cdl-text-tertiary: var(--cdl-color-gray-500);
    --cdl-border-subtle: color-mix(in srgb, var(--cdl-color-navy-950) 9%, transparent);
    --cdl-border-strong: color-mix(in srgb, var(--cdl-color-navy-950) 18%, transparent);
    --cdl-focus: var(--cdl-color-navy-950);
    --cdl-accent: var(--cdl-color-yellow-500);
    --cdl-accent-hover: var(--cdl-color-yellow-300);
    --cdl-accent-active: var(--cdl-color-yellow-600);

    /* Typography */
    --cdl-font-sans: "Inter", "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --cdl-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --cdl-font-size-xs: 0.75rem;
    --cdl-font-size-sm: 0.875rem;
    --cdl-font-size-md: 1rem;
    --cdl-font-size-lg: 1.125rem;
    --cdl-font-size-xl: 1.375rem;
    --cdl-font-size-2xl: clamp(1.75rem, 4vw, 2.5rem);
    --cdl-font-size-3xl: clamp(2.5rem, 7vw, 4.5rem);
    --cdl-line-tight: 1.05;
    --cdl-line-heading: 1.15;
    --cdl-line-body: 1.65;
    --cdl-tracking-tight: -0.045em;
    --cdl-tracking-label: 0.1em;

    /* Spacing — 4px base */
    --cdl-space-1: 0.25rem;
    --cdl-space-2: 0.5rem;
    --cdl-space-3: 0.75rem;
    --cdl-space-4: 1rem;
    --cdl-space-5: 1.25rem;
    --cdl-space-6: 1.5rem;
    --cdl-space-8: 2rem;
    --cdl-space-10: 2.5rem;
    --cdl-space-12: 3rem;
    --cdl-space-16: 4rem;
    --cdl-space-20: 5rem;
    --cdl-space-24: 6rem;
    --cdl-space-28: 7rem;
    --cdl-space-32: 8rem;

    /* Shape */
    --cdl-radius-xs: 0.375rem;
    --cdl-radius-sm: 0.5rem;
    --cdl-radius-md: 0.75rem;
    --cdl-radius-lg: 1rem;
    --cdl-radius-xl: 1.5rem;
    --cdl-radius-full: 999px;

    /* Soft Elevation */
    --cdl-shadow-0: 0 0 0 1px var(--cdl-border-subtle);
    --cdl-shadow-1: 0 1px 2px rgb(7 24 39 / 4%), 0 0 0 1px var(--cdl-border-subtle);
    --cdl-shadow-2: 0 8px 24px rgb(7 24 39 / 7%), 0 1px 3px rgb(7 24 39 / 4%), 0 0 0 1px var(--cdl-border-subtle);
    --cdl-shadow-3: 0 20px 48px rgb(7 24 39 / 9%), 0 0 0 1px var(--cdl-border-subtle);

    /* Motion */
    --cdl-duration-fast: 120ms;
    --cdl-duration-base: 220ms;
    --cdl-duration-slow: 480ms;
    --cdl-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --cdl-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
    --cdl-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);

    /* Layout */
    --cdl-container: 75rem;
    --cdl-gutter: 1.25rem;
    --cdl-header-height: 4.5rem;
}

@media (min-width: 48rem) {
    :root {
        --cdl-gutter: 2rem;
        --cdl-header-height: 5rem;
    }
}