:root {
    /*
       Design color tokens
       Names mirror the Figma paint styles
    */

    /* Brand / Primary */
    --color-primary: #112AD4;
    --color-primary-30: color-mix(in srgb, var(--color-primary) 60%, transparent);
    --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent);
    --color-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent);
    --color-primary-8: color-mix(in srgb, var(--color-primary) 8%, transparent);
    --color-primary-5: color-mix(in srgb, var(--color-primary) 5%, transparent);
    --color-primary-2: color-mix(in srgb, var(--color-primary) 2%, transparent);
    --color-primary-hover: #253CDB;
    --color-primary-alt: #2C4BE3;
    --color-primary-light: #EFF1FF;
    --color-primary-lighter: #F6F7FF;

    /* Text */
    --color-text-primary: #202D4E;
    --color-text-primary-14: color-mix(in srgb, var(--color-text-primary) 14%, transparent);
    --color-text-primary-4: color-mix(in srgb, var(--color-text-primary) 4%, transparent);
    --color-text-primary-60: color-mix(in srgb, var(--color-text-primary) 60%, transparent);
    --color-text-dark: #0F1C3F;
    --color-text-muted: #5A6478;
    --color-text-secondary: #8893A8;

    /* Backgrounds */
    --color-bg-white: #FFFFFF;
    --color-bg-white-90: color-mix(in srgb, var(--color-bg-white) 90%, transparent);
    --color-bg-white-80: color-mix(in srgb, var(--color-bg-white) 80%, transparent);
    --color-bg-white-60: color-mix(in srgb, var(--color-bg-white) 60%, transparent);
    --color-bg-white-50: color-mix(in srgb, var(--color-bg-white) 50%, transparent);
    --color-bg-white-10: color-mix(in srgb, var(--color-bg-white) 10%, transparent);
    --color-bg-white-6: color-mix(in srgb, var(--color-bg-white) 6%, transparent);
    --color-bg-light: #F2F3F5;
    --color-bg-blue: #F2F3FF;
    --color-bg-dark: #202D4E;
    --color-bg-darkest: #0F1C3F;
    --color-bg-backdrop: color-mix(in srgb, #080B13 80%, transparent);

    /* Status */
    --color-success: #009C5B;
    --color-success-bg: #E6F3EA;
    --color-error: #D92D20;
    --color-error-bg: #FEF3F2;
    --color-warning: #E89600;

    /* Borders */
    --color-border: #E9EBF3;
    --color-border-dark: #D7DEE3;
    --color-divider: #EEF0F6;

    /* Chart / Data */
    --chart-live: #00CA3D;
    --chart-green: #22C55E;
    --chart-blue: #4C6DF7;
    --chart-amber: #F59E0B;
    --chart-orange: #D0691F;
    --chart-red: #EF4444;

    /* Others */
    --color-black: #000000;
    --color-dark-graphite: #101727;
    --color-dark-graphite-55: color-mix(in srgb, var(--color-dark-graphite) 55%, transparent);
    --color-dark-graphite-35: color-mix(in srgb, var(--color-dark-graphite) 35%, transparent);
    --color-dark-graphite-25: color-mix(in srgb, var(--color-dark-graphite) 25%, transparent);
    --color-graphite: #374151;
    --color-muted-blue-gray: #41537A;
    --color-bg-subtle-blue: #ECEFF9;
    --color-border-soft: #E5E7EB;
    --color-border-soft-20: color-mix(in srgb, var(--color-border-soft) 20%, transparent);
    --color-disabled: #D0D5E8;
    --color-input-bg: #F9FAFB;
    --color-purple: #A77FF0;
    --color-purple-bg: #F8F5FE;
    --color-orange-bg: #FFF8E9;

    /* ==========================================
    FIGMA DEV MODE ALIASES (MAPPING TO CSS VARS)
    ========================================== */

    /* Brand / Primary */

    --Brand-Primary: var(--color-primary);
    --Brand-Primary-100: var(--color-primary);
    --Brand-Primary-20: var(--color-primary-20);
    --Brand-Primary-10: var(--color-primary-10);
    --Brand-Primary-5: var(--color-primary-5);
    --Brand-Primary-2: var(--color-primary-2);
    --Brand-Primary-Hover: var(--color-primary-hover);
    --Brand-Primary-Alt: var(--color-primary-alt);
    --Brand-Primary-Light: var(--color-primary-light);
    --Brand-Primary-Lighter: var(--color-primary-lighter);

    /* Text */
    --Text-Primary: var(--color-text-primary);
    --Text-Primary-100: var(--color-text-primary);
    --Text-Primary-14: var(--color-text-primary-14);
    --Text-Primary-4: var(--color-text-primary-4);
    --Text-Dark: var(--color-text-dark);
    --Text-Muted: var(--color-text-muted);
    --Text-Secondary: var(--color-text-secondary);

    /* Backgrounds */
    --BG-White: var(--color-bg-white);
    --BG-White-100: var(--color-bg-white);
    --BG-White-80: var(--color-bg-white-80);
    --BG-White-60: var(--color-bg-white-60);
    --BG-White-10: var(--color-bg-white-10);
    --BG-White-6: var(--color-bg-white-6);
    --BG-Light: var(--color-bg-light);
    --BG-Blue: var(--color-bg-blue);
    --Dark-Navy: var(--color-bg-dark);
    --Darkest: var(--color-bg-darkest);

    /* Status */
    --Success: var(--color-success);
    --Success-BG: var(--color-success-bg);
    --Error: var(--color-error);
    --Error-BG: var(--color-error-bg);
    --Status-Warning: var(--color-warning);

    /* Borders */
    --Border: var(--color-border);
    --Border-Dark: var(--color-border-dark);
    --Divider: var(--color-divider);

    /* Chart / Data */
    --Live-Green: var(--chart-live);
    --Chart-Green: var(--chart-green);
    --Chart-Blue: var(--chart-blue);
    --Chart-Amber: var(--chart-amber);
    --Chart-Orange: var(--chart-orange);
    --Chart-Red: var(--chart-red);
    --Chart-Red-100: var(--chart-red);
    --Chart-Red-16: color-mix(in srgb, var(--chart-red) 16%, transparent);
    --Chart-Red-8: color-mix(in srgb, var(--chart-red) 8%, transparent);
    --Chart-Red-4: color-mix(in srgb, var(--chart-red) 4%, transparent);

    /* Others */
    --Dark-Graphite-100: var(--color-dark-graphite);
    --Dark-Graphite-55: var(--color-dark-graphite-55);
    --Dark-Graphite-35: var(--color-dark-graphite-35);
    --Dark-Graphite-25: var(--color-dark-graphite-25);
    --Graphite: var(--color-graphite);
    --Muted-Blue-Gray: var(--color-muted-blue-gray);
    --BG-Subtle-Blue: var(--color-bg-subtle-blue);
    --Border-Soft: var(--color-border-soft);
    --Border-Soft-100: var(--color-border-soft);
    --Border-Soft-20: var(--color-border-soft-20);
    --Disabled: var(--color-disabled);
    --Input-BG: var(--color-input-bg);
    --Purple: var(--color-purple);
    --Purple-BG: var(--color-purple-bg);
    --Orange-BG: var(--color-orange-bg);
    --Border-Divider: var(--color-divider);
    --Extended-Dark-Graphite-100: var(--color-dark-graphite);
    --Status-Success-BG: var(--color-success-bg);
    --Status-Error-BG: var(--color-error-bg);
}