:root {
    /* ==========================================================================
       DESIGN SYSTEM TOKENS - LIGHT MODE
       ========================================================================== */
    
    /* New Brand Colors */
    --siaputbk-orange: #FE7002;
    --siaputbk-orange-hover: #F85A00;
    --siaputbk-orange-light: #FD8A00;
    --siaputbk-navy: #02225B;
    --siaputbk-navy-dark: #001F58;

    /* Base Layout Colors */
    --background: #FFFFFF;
    --background-soft: #FAFAFA;
    --background-cream: #FFF7ED;

    --heading: var(--siaputbk-navy-dark);
    --body: #71717A;
    --body-subtle: #A1A1AA;

    --border-default: #E4E4E7;
    --card: #FFFFFF;

    --success: #16A34A;
    --warning: #F59E0B;
    --danger: #DC2626;

    /* Spacing & Radius & Elevation */
    --radius-base: 8px;
    --radius-lg: 16px;
    --radius-default: 8px;
    --radius-sm: 6px;
    --radius-full: 9999px;

    /* Background Tokens */
    --neutral-primary-soft: var(--background);
    --neutral-primary: var(--background);
    --neutral-primary-medium: var(--background);
    --neutral-primary-strong: var(--background);
    --neutral-secondary-soft: var(--background-soft);
    --neutral-secondary: var(--background-soft);
    --neutral-secondary-medium: #F4F4F5;
    --neutral-secondary-strong: #F4F4F5;
    --neutral-tertiary-soft: #F4F4F5;
    --neutral-tertiary: #F4F4F5;
    --neutral-tertiary-medium: var(--border-default);
    --neutral-quaternary: var(--border-default);
    --gray-token: #A1A1AA;
    --header-bg: rgba(255, 255, 255, 0.85);
    --hero-overlay: linear-gradient(to right, rgba(255, 255, 255, 1) 25%, rgba(255, 255, 255, 0.9) 45%, rgba(255, 255, 255, 0) 80%);
    --hero-overlay-mobile: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%);

    /* Brand Backgrounds */
    --brand-softer: var(--background-cream);
    --brand-soft: #FFEAD6;
    --brand: var(--siaputbk-orange);
    --brand-medium: var(--siaputbk-orange-light);
    --brand-strong: var(--siaputbk-orange-hover);

    /* Status Backgrounds */
    --success-soft: #F0FDF4;
    --success-medium: #DCFCE7;
    --success-strong: #15803D;
    --danger-soft: #FEF2F2;
    --danger-medium: #FEE2E2;
    --danger-strong: #B91C1C;
    --warning-soft: #FFFBEB;
    --warning-medium: #FEF3C7;
    --warning-strong: #D97706;

    /* Glint Properties */
    --color-1-400: rgba(255,255,255,0.25);
    --color-1-700: rgba(0,0,0,0.03);

    /* Utility */
    --dark: var(--siaputbk-navy-dark);
    --dark-strong: var(--siaputbk-navy);
    --disabled: #F4F4F5;

    /* Accents (Same in both modes) */
    --purple-token: #7C3AED;
    --sky-token: #0EA5E9;
    --teal-token: #0D9488;
    --pink-token: #EC4899;
    --cyan-token: #06B6D4;
    --fuchsia-token: #C026D3;
    --indigo-token: #4F46E5;
    --orange-token: var(--siaputbk-orange);

    /* Text Color Tokens */
    --white-token: #FFFFFF;
    --black-token: #09090B;

    /* Brand Text */
    --fg-brand-subtle: var(--siaputbk-orange-light);
    --fg-brand: var(--siaputbk-orange);
    --fg-brand-strong: var(--siaputbk-orange-hover);

    /* Status Text */
    --fg-success: var(--success);
    --fg-success-strong: #16A34A;
    --fg-danger: var(--danger);
    --fg-danger-strong: #DC2626;
    --fg-warning-subtle: var(--warning);
    --fg-warning: #B45309;
    --fg-disabled: #A1A1AA;

    /* Informational / Accent Text */
    --fg-yellow: #EAB308;
    --fg-info: #2563EB;
    --fg-purple: #7C3AED;
    --fg-purple-strong: #6D28D9;
    --fg-cyan: #0891B2;
    --fg-indigo: #4F46E5;
    --fg-pink: #DB2777;
    --fg-lime: #65A30D;

    /* Border Color Tokens */
    --border-dark: var(--siaputbk-navy);
    --border-buffer: #FFFFFF;
    --border-buffer-medium: #FFFFFF;
    --border-buffer-strong: #FFFFFF;
    --border-muted: var(--background-soft);
    --border-light-subtle: #FAFAFA;
    --border-light: #F4F4F5;
    --border-light-medium: #E4E4E7;
    --border-default-subtle: #F4F4F5;
    --border-default: var(--border-default);
    --border-default-medium: var(--border-default);
    --border-default-strong: #D4D4D8;
    --border-success-subtle: #BBF7D0;
    --border-success: var(--success);
    --border-danger-subtle: #FECACA;
    --border-danger: var(--danger);
    --border-warning-subtle: #FDE68A;
    --border-warning: var(--warning);
    --border-brand-subtle: #FFEAD6;
    --border-brand-light: var(--siaputbk-orange-light);
    --border-brand: var(--siaputbk-orange);
    --border-dark-subtle: var(--border-default);
    --border-purple: #8B5CF6;
    --border-orange: var(--siaputbk-orange);

    /* Shadows */
    --shadow-2xs: 0 1px rgb(0 0 0 / 0.03);
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.05), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.05), 0 8px 10px -6px rgb(0 0 0 / 0.05);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.1);

    /* Glint style shadow */
    --shadow-glint: var(--shadow-2xs), inset rgba(255,255,255,0.4) 0 1px 0px 0px;

    /* ==========================================================================
       NEUBRUTALIST COMPATIBILITY MAPPINGS - LIGHT MODE
       ========================================================================== */
    --black: var(--heading);
    --white: var(--neutral-primary-soft);
    --blue: var(--siaputbk-navy);
    --purple: var(--purple-token);
    --yellow: var(--warning-medium);
    --pink: var(--pink-token);
    --green: var(--success);
    --orange: var(--siaputbk-orange);
    --lavender: var(--neutral-secondary-medium);
    --sky: var(--neutral-secondary-medium);
    --cream: var(--background-cream);
    --text: var(--heading);
    --text-secondary: var(--body);
    --bg: var(--background);
    --red: var(--danger);
    --font: 'Inter', sans-serif;
    
    --border: 1px solid var(--border-default);
    --border-thin: 1px solid var(--border-default);
    --radius: var(--radius-base);
    --radius-lg: 16px;
    --shadow: var(--shadow-sm);
    --shadow-sm-neubrutalist: var(--shadow-2xs);
    --shadow-lg-neubrutalist: var(--shadow-md);
    --shadow-hover: var(--shadow-md);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* ==========================================================================
           DESIGN SYSTEM TOKENS - DARK MODE
           ========================================================================== */
        
        --siaputbk-orange: #FE7002;
        --siaputbk-orange-hover: #F85A00;
        --siaputbk-orange-light: #FD8A00;
        --siaputbk-navy: #93C5FD;
        --siaputbk-navy-dark: #60A5FA;

        --background: #09090B;
        --background-soft: #121214;
        --background-cream: #1C1917;

        --heading: #FAFAFA;
        --body: #A1A1AA;
        --body-subtle: #71717A;

        --border-default: #27272A;
        --card: #18181B;

        --success: #22C55E;
        --warning: #F59E0B;
        --danger: #EF4444;

        --radius-base: 8px;
        --radius-lg: 16px;
        --radius-default: 8px;
        --radius-sm: 6px;
        --radius-full: 9999px;

        /* Background Tokens */
        --neutral-primary-soft: var(--background);
        --neutral-primary: var(--background);
        --neutral-primary-medium: var(--background-soft);
        --neutral-primary-strong: #1E1E24;
        --neutral-secondary-soft: var(--background);
        --neutral-secondary: var(--background);
        --neutral-secondary-medium: var(--background-soft);
        --neutral-secondary-strong: #1E1E24;
        --neutral-tertiary-soft: var(--background);
        --neutral-tertiary: var(--background-soft);
        --neutral-tertiary-medium: var(--border-default);
        --neutral-quaternary: var(--border-default);
        --gray-token: #3F3F46;
        --header-bg: rgba(9, 9, 11, 0.85);
        --hero-overlay: linear-gradient(to right, rgba(9, 9, 11, 1) 25%, rgba(9, 9, 11, 0.9) 45%, rgba(9, 9, 11, 0) 80%);
        --hero-overlay-mobile: linear-gradient(to bottom, rgba(9, 9, 11, 0.95) 0%, rgba(9, 9, 11, 0.85) 100%);

        /* Brand Backgrounds */
        --brand-softer: var(--background-cream);
        --brand-soft: #2E251B;
        --brand: var(--siaputbk-orange);
        --brand-medium: var(--siaputbk-orange-light);
        --brand-strong: var(--siaputbk-orange-hover);

        /* Status Backgrounds */
        --success-soft: #052E16;
        --success-medium: #14532D;
        --success-strong: #16A34A;
        --danger-soft: #450A0A;
        --danger-medium: #991B1B;
        --danger-strong: #DC2626;
        --warning-soft: #78350F;
        --warning-medium: #92400E;
        --warning-strong: #D97706;

        /* Glint Properties */
        --color-1-400: rgba(255,255,255,0.08);
        --color-1-700: rgba(0,0,0,0.1);

        /* Utility */
        --dark: #18181B;
        --dark-strong: #27272A;
        --disabled: #18181B;

        /* Text Color Tokens */
        --white-token: #FFFFFF;
        --black-token: #09090B;

        /* Brand Text */
        --fg-brand-subtle: var(--siaputbk-orange-light);
        --fg-brand: var(--siaputbk-orange);
        --fg-brand-strong: var(--siaputbk-orange-hover);

        /* Status Text */
        --fg-success: var(--success);
        --fg-success-strong: #4ADE80;
        --fg-danger: var(--danger);
        --fg-danger-strong: #FCA5A5;
        --fg-warning-subtle: var(--warning);
        --fg-warning: #FDE68A;
        --fg-disabled: #52525B;

        /* Informational / Accent Text */
        --fg-yellow: #FACC15;
        --fg-info: #93C5FD;
        --fg-purple: #8B5CF6;
        --fg-purple-strong: #DDD6FE;
        --fg-cyan: #06B6D4;
        --fg-indigo: #818CF8;
        --fg-pink: #EC4899;
        --fg-lime: #84CC16;

        /* Border Color Tokens */
        --border-dark: #3F3F46;
        --border-buffer: #09090B;
        --border-buffer-medium: #18181B;
        --border-buffer-strong: #27272A;
        --border-muted: #09090B;
        --border-light-subtle: #09090B;
        --border-light: #18181B;
        --border-light-medium: #27272A;
        --border-default-subtle: #09090B;
        --border-default: var(--border-default);
        --border-default-medium: #3F3F46;
        --border-default-strong: #52525B;
        --border-success-subtle: #14532D;
        --border-success: #15803D;
        --border-danger-subtle: #991B1B;
        --border-danger: #DC2626;
        --border-warning-subtle: #92400E;
        --border-warning: var(--warning);
        --border-brand-subtle: #2A1F15;
        --border-brand-light: var(--siaputbk-orange-light);
        --border-brand: var(--siaputbk-orange);
        --border-dark-subtle: #27272A;
        --border-purple: #8B5CF6;
        --border-orange: var(--siaputbk-orange);

        /* Shadows */
        --shadow-2xs: 0 1px rgb(0 0 0 / 0.3);
        --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
        --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
        --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.5);

        --shadow-glint: none;

        /* ==========================================================================
           NEUBRUTALIST COMPATIBILITY MAPPINGS - DARK MODE
           ========================================================================== */
        --black: var(--heading);
        --white: var(--neutral-primary-soft);
        --blue: var(--siaputbk-navy);
        --purple: var(--purple-token);
        --yellow: var(--warning-medium);
        --pink: var(--pink-token);
        --green: var(--success);
        --orange: var(--siaputbk-orange);
        --lavender: var(--neutral-secondary-medium);
        --sky: var(--neutral-secondary-medium);
        --cream: var(--background-cream);
        --text: var(--heading);
        --text-secondary: var(--body);
        --bg: var(--background);
        --red: var(--danger);
        --font: 'Inter', sans-serif;
        
        --border: 1px solid var(--border-default);
        --border-thin: 1px solid var(--border-default);
        --radius: var(--radius-base);
        --radius-lg: 16px;
        --shadow: var(--shadow-sm);
        --shadow-sm-neubrutalist: var(--shadow-2xs);
        --shadow-lg-neubrutalist: var(--shadow-md);
        --shadow-hover: var(--shadow-md);
    }
}