/* =============================================================================
   LAYER 1 - PALETTE  ("Slate & Amber", v1)
   -----------------------------------------------------------------------------
   The ONLY file in the app that contains color values (hex, rgb, url icons).
   Components never use these names directly: they use the theme roles in
   01_theme-dark.css / 02_theme-light.css (var(--color-...)).

   To change a color everywhere, change it here.
   To change what a color is USED for, change the theme files instead.

   - Slate uses the hue of the gray in the EnData logo (OKLCH hue 227),
     in perceptually even steps.
   - amber-500 and orange-500 are the exact logo colors.
   Full guide: docs/THEMING.md   Plan: plans/theme-system.md
   ============================================================================= */

:root {
    --palette-white: #FFFFFF;
    --palette-black: #000000;

    /* Slate: all neutrals (backgrounds, text, borders) */
    --palette-slate-50:  #F2F7F9;
    --palette-slate-100: #E8EDEF;
    --palette-slate-150: #DEE3E5;
    --palette-slate-200: #CCD6DB;
    --palette-slate-300: #B5C0C4;   /* same brightness as the original UI's body text (#bebebe) */
    --palette-slate-400: #8D969B;
    --palette-slate-500: #707E85;
    --palette-slate-600: #59676E;
    --palette-slate-700: #3A474D;
    --palette-slate-750: #2B383D;
    --palette-slate-800: #222A2E;
    --palette-slate-850: #181F23;
    --palette-slate-900: #10171B;
    --palette-slate-950: #091013;

    /* Amber: the brand accent (500 = logo amber) */
    --palette-amber-50:  #FFF6E0;
    --palette-amber-100: #FFEAB8;
    --palette-amber-200: #FFD77A;
    --palette-amber-300: #FFC53D;
    --palette-amber-400: #FBB519;
    --palette-amber-500: #F9A900;
    --palette-amber-600: #E48E00;
    --palette-amber-700: #CC6E00;
    --palette-amber-800: #A35A00;
    --palette-amber-900: #6E3D00;

    /* Brand island (login and register, D4): fixed brand-dark in every theme.
       Used only through the --brand-* roles in 31_login.css. */
    --palette-brand-navy: #0B1E2D;
    --palette-brand-orange: #F5A10A;
    --palette-brand-orange-deep: #E07200;
    --palette-brand-orange-light: #F7C04A;
    --palette-brand-gold: #C48A00;
    --palette-brand-steel: #3A4F5C;
    --palette-brand-steel-dark: #2A3D4A;
    --palette-brand-mist: #E8F0F5;
    --palette-brand-sky: #7A9DB5;
    --palette-brand-sky-dark: #4A6D85;
    --palette-brand-green: #2D9E6B;

    /* AI assistant mode tones (D16): ANALYZE bronze, ASK light gold.
       The 700s are the light theme's versions (on white: 6.7:1, 5.7:1; gold-700
       is dark enough for the filter chip's tint, 4.8:1). */
    --palette-gold-200: #E7C582;
    --palette-gold-700: #806311;
    --palette-bronze-400: #B68655;
    --palette-bronze-700: #7A5431;

    /* Gold: a softened amber for the dark theme's accent. Saturated logo amber
       glares on near-black backgrounds; this keeps the brand hue, calmer.
       (Chosen 2026-09-28, option C.) */
    --palette-gold-400: #D6B26F;
    --palette-gold-500: #CAA754;

    /* Orange: 500 = the logo's gradient end; 400/700 are used for "warning" */
    --palette-orange-400: #F08A3C;
    --palette-orange-500: #EB7600;
    --palette-orange-700: #B4540A;

    /* Status hues */
    --palette-green-400: #3FB68B;
    --palette-green-700: #197652;   /* 4.9:1 on its own 10% tint (AI notes) */
    --palette-red-400:   #F0676D;
    --palette-red-700:   #C33B41;
    --palette-blue-400:  #5AB4D6;
    --palette-blue-700:  #1D6F8F;

    /* Data colors: chart series and well groups. The same in both themes on
       purpose; they are chosen to read on dark and light backgrounds. */
    --data-1: #2563EB;
    --data-2: #16A34A;
    --data-3: #9333EA;
    --data-4: #0891B2;
    --data-5: #DB2777;
    --data-6: #64748B;
    /* Colorscale categories in the palette picker */
    --data-sequential: #4CAF50;    /* green: magnitude */
    --data-diverging: #FF9800;     /* orange: direction from a midpoint */
    --data-qualitative: #9C27B0;   /* purple: group identity */

    /* Brand gradient: logo and login page only, never on data screens */
    --brand-gradient: linear-gradient(90deg, var(--palette-amber-500), var(--palette-orange-500));

    /* Form icons. Bootstrap draws the checkbox tick and switch knob as SVG
       images, which cannot read CSS variables, so their color (slate-950) is
       baked in here. Dark on amber passes contrast in both themes. */
    --palette-icon-check: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23091013' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --palette-icon-check-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --palette-icon-switch-knob-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%238D969B'/%3e%3c/svg%3e");
    --palette-icon-switch-knob: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23091013'/%3e%3c/svg%3e");
    --palette-icon-switch-knob-white: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFF'/%3e%3c/svg%3e");
    /* Select chevron in slate-400: the same quiet weight as the dcc.Dropdown carets */
    --palette-icon-chevron: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238D969B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}