@layer tokens {
    :root {
        /* ==========================================================
           Color Palette (GLOBAL / RAW TOKENS)
           Source: Figma Globals
           ========================================================== */

        --color-white: #ffffff;
        --color-black: #000000;

        --color-gray-100: #ededed; /* light-bg */
        --color-gray-200: #dcdcdc; /* light-elevation */
        --color-gray-300: #969696; /* light-overlay */
        --color-gray-700: #595959; /* dark-overlay */
        --color-gray-800: #323232; /* dark-elevation */
        --color-gray-900: #111111; /* dark-surface */

        /* Status / Brand Colors */
        --color-blue: #478DFF;
        --color-sea-green: #319498;
        --color-orange: #EF6F00;
        --color-red: #C81111;
        --color-green: #539210;
        --color-purple: #9D20C0;
        --color-program-purple: #7D3DB4;
        --color-royal: #1958AF;
        --color-wine: #BE1C5C;
        --color-pink: #F0287B;

        /* ==========================================================
           Semantic Tokens — Light Theme (DEFAULT)
           ========================================================== */

        --bg: var(--color-gray-100);
        --surface: var(--color-white);
        --elevation: var(--color-gray-200);
        --overlay: var(--color-gray-300);
        --text: var(--color-black);

        /* Brand / Accent */
        /* Badges & Table specific semantic tokens */
        --table-header-text: var(--text);
        --table-border: var(--elevation);
        --table-zebra: var(--bg);
        --table-hover: rgba(0, 0, 0, 0.05);

        --badge-blue: var(--color-blue);
        --badge-orange: var(--color-orange);
        --badge-green: var(--color-green);
        --badge-purple: var(--color-purple);

        /* Status semantics */
        --status-moved: var(--color-gray-300);
        --status-new: var(--color-blue);
        --status-reset: #036481;
        --status-requested: #1B8D9D;
        --status-in-progress: var(--color-blue);
        --status-dnc: var(--color-red);
        --status-on-hold: #FFD800;
        --status-ineligible: var(--color-red);
        --status-archived: var(--text);
        --status-booked: #3456C2;
        --status-canceled: #C23535;
        --status-rescheduled: #EF8F34;
        --status-completed: #7D3BB4;
        --status-turn-down: #913169;
        --status-remorse: #E91E8E;
        --status-sold: #3C9035;

        /* System hints */
        --font-main: 'Inter', sans-serif;
        --font-heading: 'Montserrat', sans-serif;
        color-scheme: light dark;

        /* ==========================================================
           Spacing & Radius Tokens (Relative)
           ========================================================== */
        --spacing-xs: clamp(0.25rem, 1vw, 0.5rem);
        --spacing-sm: clamp(0.5rem, 2vw, 0.75rem);
        --spacing-md: clamp(0.75rem, 3vw, 1.25rem);
        --spacing-lg: clamp(1.25rem, 4vw, 2rem);
        --spacing-xl: clamp(2rem, 5vw, 3rem);

        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-full: 9999px;

        /* Semantic Spacing */
        --padding-inline: var(--spacing-md);
        --padding-block: var(--spacing-sm);
        --container-padding: var(--spacing-md);

        /* Shared control and modal contracts */
        --control-height: 34px;
        --control-font-size: 14px;
        --control-radius: var(--radius-sm);
        --control-padding-block: 7px;
        --control-padding-inline: 12px;
        --textarea-min-height: 110px;
        --textarea-padding-block: 12px;
        --textarea-padding-inline: 12px;
        --modal-padding-inline: 24px;
        --modal-header-padding-block-start: 22px;
        --modal-header-padding-block-end: 18px;
        --modal-body-padding-block: 22px;
        --modal-footer-padding-block: 16px;
        --modal-title-size: 1.45rem;
        --modal-subtitle-size: 0.78rem;
        --modal-backdrop: color-mix(in srgb, var(--text) 46%, transparent);
        --modal-shadow: 0 24px 80px color-mix(in srgb, var(--text) 24%, transparent);

        /* ==========================================================
           Legacy View Mappings (Backward Compatibility)
           ========================================================== */
        --white: var(--color-white);
        --black: var(--color-black);
        --grey: var(--color-gray-300);
        --light-grey: var(--color-gray-200);
        --dark-grey: var(--color-gray-700);
        --red: var(--color-red);
        --dark-red: #A00D0D;
        --alpha-red: rgba(200, 17, 17, 0.1);
        --blue: var(--color-blue);
        --dark-blue: var(--color-royal);
        --light-blue: var(--color-blue);
        --alpha-blue: rgba(71, 141, 255, 0.1);
        --azure: #007FFF;
        --green: var(--color-green);
        --dark-green: #3D6B0C;
        --alpha-green: rgba(83, 146, 16, 0.1);
        --orange: var(--color-orange);
        --alpha-orange: rgba(239, 111, 0, 0.1);
        --purple: var(--color-purple);
        --program-purple: var(--color-program-purple);
        --alpha-purple: rgba(157, 32, 192, 0.1);
        --teal: var(--color-sea-green);
        --corner: var(--radius-md);
    }

    /* ==========================================================
       Dark Theme — System Preference
       ========================================================== */
    @media (prefers-color-scheme: dark) {
        :root {
            --bg: var(--color-black);
            --surface: var(--color-gray-900);
            --elevation: var(--color-gray-800);
            --overlay: var(--color-gray-700);
            --text: var(--color-white);

            --table-header-text: var(--text);
            --table-border: var(--elevation);
            --table-zebra: var(--bg);
            --table-hover: rgba(255, 255, 255, 0.04);
        }
    }

    /* ==========================================================
       Dark Theme — Explicit
       ========================================================== */
    [data-theme="dark"],
    .dark-mode {
        --bg: var(--color-black);
        --surface: var(--color-gray-900);
        --elevation: var(--color-gray-800);
        --overlay: var(--color-gray-700);
        --text: var(--color-white);

        --table-header-text: var(--text);
        --table-border: var(--elevation);
        --table-zebra: var(--bg);
        --table-hover: rgba(255, 255, 255, 0.04);

        color-scheme: dark;
    }

    /* ==========================================================
       Light Theme — Explicit
       ========================================================== */
    [data-theme="light"],
    .light-mode {
        --bg: var(--color-gray-100);
        --surface: var(--color-white);
        --elevation: var(--color-gray-200);
        --overlay: var(--color-gray-300);
        --text: var(--color-black);

        --table-header-text: var(--text);
        --table-border: var(--elevation);
        --table-zebra: var(--bg);
        --table-hover: rgba(0, 0, 0, 0.05);

        color-scheme: light;
    }
}