/* file: portal/app/static/css/colors.css
 *
 * Raw color palette — building blocks for theme.css.
 * Do NOT reference these directly in components.
 * Use semantic tokens from theme.css instead.
 */

@layer tokens {

:root {
    /* --- Neutral (white → black, inverts in dark mode) --- */
    --palette-neutral-0:    #ffffff;
    --palette-neutral-50:   #f9fafb;
    --palette-neutral-100:  #f3f4f6;
    --palette-neutral-200:  #e5e7eb;
    --palette-neutral-300:  #d1d5db;
    --palette-neutral-400:  #9ca3af;
    --palette-neutral-400-rgb: 156, 163, 175;
    --palette-neutral-500:  #6b7280;
    --palette-neutral-500-rgb: 107, 114, 128;
    --palette-neutral-600:  #4b5563;
    --palette-neutral-600-rgb: 75, 85, 99;
    --palette-neutral-700:  #374151;
    --palette-neutral-800:  #1f2937;
    --palette-neutral-900:  #111827;
    --palette-neutral-950:  #030712;
    --palette-neutral-1000: #000000;

    /* --- Gray --- */
    --palette-gray-50: #fafafa;
    --palette-gray-100: #f5f5f5;
    --palette-gray-200: #e5e5e5;
    --palette-gray-300: #d4d4d4;
    --palette-gray-400: #a3a3a3;
    --palette-gray-500: #737373;
    --palette-gray-600: #525252;
    --palette-gray-700: #404040;
    --palette-gray-800: #262626;
    --palette-gray-900: #171717;
    --palette-gray-950: #0a0a0a;

    /* --- Blue (Brand) --- */
    --palette-blue-100: #dbeafe;
    --palette-blue-200: #bfdbfe;
    --palette-blue-300: #93c5fd;
    --palette-blue-400: #60a5fa;
    --palette-blue-500: #3b82f6;
    --palette-blue-500-rgb: 59, 130, 246;
    --palette-blue-600: #2563eb;
    --palette-blue-600-rgb: 37, 99, 235;
    --palette-blue-700: #1d4ed8;
    --palette-blue-800: #1e40af;
    --palette-blue-900: #1e3a8a;

    --palette-blue-focus: #86b7fe;
    --palette-blue-focus-ring: rgba(13, 110, 253, 0.25);

    /* --- Green (Success) --- */
    --palette-green-50:  #f0fdf4;
    --palette-green-100: #dcfce7;
    --palette-green-500: #22c55e;
    --palette-green-500-rgb: 34, 197, 94;
    --palette-green-600: #16a34a;
    --palette-green-600-rgb: 22, 163, 74;
    --palette-green-700: #15803d;

    /* --- Red (Danger) — Tailwind v3 --- */
    --palette-red-50:  #fef2f2;
    --palette-red-100: #fee2e2;
    --palette-red-200: #fecaca;
    --palette-red-300: #fca5a5;
    --palette-red-400: #f87171;
    --palette-red-500: #ef4444;
    --palette-red-500-rgb: 239, 68, 68;
    --palette-red-600: #dc2626;
    --palette-red-600-rgb: 220, 38, 38;
    --palette-red-700: #b91c1c;
    --palette-red-800: #991b1b;
    --palette-red-900: #7f1d1d;
    --palette-red-950: #450a0a;

    /* --- Amber (Warning) --- */
    --palette-amber-50:  #fffbeb;
    --palette-amber-100: #fef3c7;
    --palette-amber-500: #f59e0b;
    --palette-amber-500-rgb: 245, 158, 11;
    --palette-amber-600: #d97706;
    --palette-amber-700: #b45309;

    /* --- Cyan (Info) --- */
    --palette-cyan-500: #06b6d4;
    --palette-cyan-500-rgb: 6, 182, 212;
    --palette-cyan-600: #0891b2;
    --palette-cyan-600-rgb: 8, 145, 178;
    --palette-cyan-700: #0e7490;

    /* --- Surface colors --- */
    --palette-page-bg:  #f0f2f5;
    --palette-surface:  #ffffff;

    /* --- Sidebar (dark navy) --- */
    --palette-navy-900: #0d1117;
    --palette-navy-800: #161b22;
    --palette-navy-700: #1b2a4a;
    --palette-navy-600: #243448;
    --palette-navy-500: #30415e;
    --palette-navy-400: #8b949e;
    --palette-navy-300: #c0cfe0;
    --palette-navy-200: #e6edf3;

    /* --- Chart colors (Tableau 20) — light mode --- */
    --chart-color-1:  #4E79A7;
    --chart-color-2:  #F28E2B;
    --chart-color-3:  #E15759;
    --chart-color-4:  #76B7B2;
    --chart-color-5:  #59A14F;
    --chart-color-6:  #EDC948;
    --chart-color-7:  #B07AA1;
    --chart-color-8:  #FF9DA7;
    --chart-color-9:  #9C755F;
    --chart-color-10: #BAB0AC;
    --chart-color-11: #A0CBE8;
    --chart-color-12: #FFBE7D;
    --chart-color-13: #FF9D9A;
    --chart-color-14: #9DD4CF;
    --chart-color-15: #8CD17D;
    --chart-color-16: #F1CE63;
    --chart-color-17: #D4A6C8;
    --chart-color-18: #FFCCD5;
    --chart-color-19: #C49C94;
    --chart-color-20: #D9D9D9;

    /* --- Google CWV status colors — light mode --- */
    --google-success:            #55d290;
    --google-warning:            #f3cc7a;
    --google-destructive:        #f5534f;
    --google-success-text:       #67b17c;
    --google-warning-text:       #ec8700;
    --google-destructive-text:   #f25659;

    /* --- Code syntax highlighting — light mode --- */
    --code-comment:  #6a737d;
    --code-string:   #032f62;
    --code-number:   #005cc5;
    --code-keyword:  #d73a49;
    --code-property: #005cc5;
    --code-atom:     #22863a;
    --code-unit:     #e36209;
    --code-selector: #22863a;
}

/* --- Dark mode palette overrides --- */
[data-bs-theme="dark"] {
    /* Neutral (inverted: 0↔1000, 50↔950, 100↔900, …) */
    --palette-neutral-0:    #000000;
    --palette-neutral-50:   #030712;
    --palette-neutral-100:  #111827;
    --palette-neutral-200:  #1f2937;
    --palette-neutral-300:  #374151;
    --palette-neutral-400:  #4b5563;
    --palette-neutral-400-rgb: 75, 85, 99;
    --palette-neutral-500:  #6b7280;
    --palette-neutral-500-rgb: 107, 114, 128;
    --palette-neutral-600:  #9ca3af;
    --palette-neutral-600-rgb: 156, 163, 175;
    --palette-neutral-700:  #d1d5db;
    --palette-neutral-800:  #e5e7eb;
    --palette-neutral-900:  #f3f4f6;
    --palette-neutral-950:  #f9fafb;
    --palette-neutral-1000: #ffffff;

    /* Gray (inverted: 50↔950, 100↔900, …) */
    --palette-gray-50:  #0a0a0a;
    --palette-gray-100: #171717;
    --palette-gray-200: #262626;
    --palette-gray-300: #404040;
    --palette-gray-400: #525252;
    --palette-gray-500: #737373;
    --palette-gray-600: #a3a3a3;
    --palette-gray-700: #d4d4d4;
    --palette-gray-800: #e5e5e5;
    --palette-gray-900: #f5f5f5;
    --palette-gray-950: #fafafa;

    /* Blue (inverted: 50↔900, 100↔800, …) */
    --palette-blue-100: #1e3a8a;
    --palette-blue-200: #1e40af;
    --palette-blue-300: #1d4ed8;
    --palette-blue-400: #2563eb;
    --palette-blue-500: #3b82f6;
    --palette-blue-500-rgb: 59, 130, 246;
    --palette-blue-600: #60a5fa;
    --palette-blue-600-rgb: 96, 165, 250;
    --palette-blue-700: #93c5fd;
    --palette-blue-800: #bfdbfe;
    --palette-blue-900: #dbeafe;

    --palette-blue-focus: #6ea8fe;
    --palette-blue-focs-ring: rgba(13, 110, 253, 0.35);

    /* Green (inverted: 50↔700, 100↔600, 500↔500) */
    --palette-green-50:  #15803d;
    --palette-green-100: #16a34a;
    --palette-green-500: #22c55e;
    --palette-green-500-rgb: 34, 197, 94;
    --palette-green-600: #dcfce7;
    --palette-green-700: #f0fdf4;

    /* Red (inverted — Tailwind v3) */
    --palette-red-50:  #450a0a;
    --palette-red-100: #7f1d1d;
    --palette-red-200: #991b1b;
    --palette-red-300: #b91c1c;
    --palette-red-400: #dc2626;
    --palette-red-500: #ef4444;
    --palette-red-500-rgb: 239, 68, 68;
    --palette-red-600: #f87171;
    --palette-red-700: #fca5a5;
    --palette-red-800: #fecaca;
    --palette-red-900: #fee2e2;
    --palette-red-950: #fef2f2;

    /* Amber (inverted: 50↔700, 100↔600, 500↔500) */
    --palette-amber-50:  #b45309;
    --palette-amber-100: #d97706;
    --palette-amber-500: #f59e0b;
    --palette-amber-500-rgb: 245, 158, 11;
    --palette-amber-600: #fef3c7;
    --palette-amber-700: #fffbeb;

    /* Cyan (inverted: 500↔500, 600↔100, 700↔50) */
    --palette-cyan-500: #06b6d4;
    --palette-cyan-500-rgb: 6, 182, 212;
    --palette-cyan-600: #a5f3fc;
    --palette-cyan-700: #cffafe;

    /* Surface colors — dark mode */
    --palette-page-bg:  #1a1d21;
    --palette-surface:  #21262d;

    /* Chart colors (same hues, richer saturation) */
    --chart-color-1:  #5B8DB8;
    --chart-color-2:  #E8922F;
    --chart-color-3:  #D45456;
    --chart-color-4:  #5FABA5;
    --chart-color-5:  #4E9444;
    --chart-color-6:  #D4B23E;
    --chart-color-7:  #A06B90;
    --chart-color-8:  #E07A85;
    --chart-color-9:  #A07862;
    --chart-color-10: #8A817C;
    --chart-color-11: #7AAED4;
    --chart-color-12: #D9A05C;
    --chart-color-13: #D47D7A;
    --chart-color-14: #6DBAB4;
    --chart-color-15: #6BB55E;
    --chart-color-16: #CCAD3D;
    --chart-color-17: #B07DA0;
    --chart-color-18: #D4868F;
    --chart-color-19: #9A7C6E;
    --chart-color-20: #7A7A7A;

    /* Google CWV status colors — dark mode */
    --google-success:            #0cce6b;
    --google-warning:            #ffa400;
    --google-destructive:        #ff4e42;
    --google-success-text:       #0cce6b;
    --google-warning-text:       #ffa400;
    --google-destructive-text:   #ff4e42;

    /* Code syntax — dark mode */
    --code-comment:  #8b949e;
    --code-string:   #a5d6ff;
    --code-number:   #79c0ff;
    --code-keyword:  #ff7b72;
    --code-property: #79c0ff;
    --code-atom:     #7ee787;
    --code-unit:     #ffa657;
    --code-selector: #7ee787;
}

} /* end @layer tokens */