:root {

    --brand-0:   #e3f2ec;
    --brand-10:  #c8e4d8;
    --brand-20:  #acd7c5;
    --brand-30:  #91cab1;
    --brand-40:  #75bd9e;
    --brand-50:  #5aaf8a;
    --brand-100: #50a580;
    --brand-200: #499775;
    --brand-300: #428a6b;
    --brand-400: #3c7c60;
    --brand-500: #326750;         /*hunter green*/
    --brand-600: #2e604b;
    --brand-700: #285340;
    --brand-800: #214535;
    --brand-900: #1b372b;

    --brand: var(--brand-500);
    --brand-dark: var(--brand-700);
    --brand-light: var(--brand-300);

    /* Neutral scale */
    --neutral-20:  #f3f5f7;
    --neutral-30:  #e7ebee;
    --neutral-40:  #dbe2e6;
    --neutral-50:  #ced8de;
    --neutral-100: #b6c4cd;
    --neutral-200: #9eb1bd;
    --neutral-300: #869dac;
    --neutral-400: #6d899c;
    --neutral-500: #5b7486;
    --neutral-600: #4a5f6d;
    --neutral-700: #36454f;       /*charcoal*/
    --neutral-800: #29353d;
    --neutral-900: #192024;


    /* surface */
    --surface-0:   #fdfbf7;       /*baby powder*/
    --surface-1:   #fbf7ef;       /*floral white*/
    --surface-50:  #faf4e8;
    --surface-100: #f8efde;       /*old lace*/
    --surface-200: #f4e6cd;
    --surface-300: #f1debc;
    --surface-400: #edd6ab;
    --surface-500: #eace9a;
    --surface-600: #e6c689;
    --surface-700: #e2bd78;
    --surface-800: #dfb568;
    --surface-900: #dbad57;


    --dsurface-0:   #91dff3;
    --dsurface-10:  #6cd5ef;
    --dsurface-20:  #47caeb;
    --dsurface-30:  #23bfe7;
    --dsurface-40:  #16a6ca;
    --dsurface-50:  #1398b9;
    --dsurface-100: #1188a6;
    --dsurface-200: #107994;    /*cerulean*/
    --dsurface-300: #0e6a81;
    --dsurface-400: #0c5b6f;
    --dsurface-500: #0a4c5c;
    --dsurface-600: #073642;    /*midnight green*/
    --dsurface-700: #062d37;
    --dsurface-800: #041e25;
    --dsurface-900: #020f12;

    /* TODO: alert scale */

    /* for plots */
    --plot-brand:      var(--brand-500);
    --plot-goldenrod:  #b8860b; /* darkgoldenrod */
    --plot-firebrick:  #b22222;
    --plot-midnight:   #191970;

    color-scheme: light dark;
}

/* ---------- Color system (light) ---------- */
:root {
    /* Base */
    --bg:             var(--surface-0);
    --text:           var(--neutral-800);
    --muted-text:     var(--neutral-400);
    --border:         var(--surface-200);
    --border-strong:  var(--surface-400);
    --neutral-border: var(--neutral-100);
    --light-surface:  var(--surface-50);
    --dark-surface:   var(--surface-200);
    --surface:        var(--surface-100);
    --navbar:         var(--neutral-700);
    --navbar-text:    #f4f7f9;
    /* --navbar-text: var(--brand-0); */

    /* Accent */
    --accent:           var(--brand-600);
    --accent-hover:     var(--brand-800);
    --accent-active:    var(--brand-900);
    --accent-contrast:  #ffffff;
    --highlight:        var(--brand-50);
    --accent-muted-bg:  var(--brand-10);
    --accent-border:    var(--brand-400);
    --accent-muted-border: var(--brand-200);

    /* secondary */
    --secondary: var(--neutral-50);
    --secondary-hover: var(--neutral-100);
    --secondary-active: var(--neutral-200);

    /* Links & focus */
    --link:       var(--brand-700);
    --link-hover: var(--brand-600);
    --link-hover-bg: color-mix(in srgb, var(--brand-500) 10%, #fff);
    --link-hover-bg: var(--brand-0);
    --focus:      var(--brand-500);
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand-500) 35%, transparent);

    /* Controls */
    --control:        var(--surface-200);
    --control-hover:  var(--surface-300);
    --control-active: var(--surface-400);
    --control-border: var(--surface-500);
    --control-fg:     var(--neutral-800);
    --neutral-control: var(--neutral-50);

    /* Status */
    --pos:  #148f6a;
    --neu:  #64748b;
    --warn: #b26e2d;
    --neg:  #b5382f;

    /* Shadows */
    --shadow-0: 0 1px 2px  rgba(0, 0, 0, 0.06);
    --shadow-1: 4px 8px 24px rgba(0, 0, 0, 0.10);
    --shadow-2: 8px 16px 32px rgba(0, 0, 0, 0.12);

    /* Charts */
    --chart-fg:   var(--text);
    --chart-grid: color-mix(in srgb, var(--text) 12%, transparent);

    --chart-1: var(--plot-brand);
    --chart-2: var(--plot-goldenrod);
    --chart-3: var(--plot-firebrick);
    --chart-4: var(--plot-midnight);
    --chart-5:    #a855f7;
    --chart-6:    #16a34a;
    --chart-7:    #f59e0b;
    --chart-8:    #e11d48;
    --chart-9:    #4f46e5;
    /* --chart-4:    #0ea5e9; */
    /* --chart-6:    #ef4444; */
    /* --chart-8:    #14b8a6; */

    /* Alerts (subtle on light) */
    --alert-bg:     #fdecec;
    --alert-border: #f3b3b3;
    --alert-text:   #7f1d1d;
    --alert-icon:   #b91c1c;

    /* Success messages (subtle on light) */
    --success-bg:     #ecfdf3;
    --success-border: #86efac;
    --success-text:   #14532d;
    --success-icon:   #16a34a;
}

/* ---------- Color system (dark) ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        /* Base */
        --bg:         #0c0f12;
        --text:       #e7edf3;
        --muted-text: #9aa7b4;
        --border:     #1f2937;
        --surface:    #0f141a;
        --navbar:     var(--neutral-900);
        --navbar-text:#dbe3ea;

        /* Accent */
        --accent:            var(--brand-400);
        --accent-contrast:   #ffffff;
        --highlight:         var(--brand-800);
        --accent-muted-bg:   color-mix(in srgb, var(--accent) 18%, transparent);
        --accent-border:     var(--brand-500);

        /* Links & focus */
        --link:              var(--brand-300);
        --link-hover:        var(--brand-200);
        --focus:             var(--brand-300);
        --focus-ring:        0 0 0 3px color-mix(in srgb, var(--brand-300) 40%, transparent);

        /* Controls */
        --control-fg:        #0f141a; /* dark-on-light control content */
        --control-bg:        color-mix(in srgb, #ffffff 9%, var(--neutral-900));
        --control-bg-hover:  color-mix(in srgb, #ffffff 14%, var(--neutral-900));
        --control-bg-active: color-mix(in srgb, #ffffff 18%, var(--neutral-900));
        --control-border:    color-mix(in srgb, var(--neutral-100) 12%, transparent);

        /* Status */
        --pos:  #34d399;
        --neu:  #94a3b8;
        --warn: #f59e0b;
        --neg:  #f87171;

        /* Shadows */
        --shadow-0: 0 1px 2px  rgba(0, 0, 0, 0.55);
        --shadow-1: 0 8px 24px rgba(0, 0, 0, 0.55);
        --shadow-2: 0 16px 32px rgba(0, 0, 0, 0.50);

        /* Charts */
        --chart-fg:   var(--text);
        --chart-grid: color-mix(in srgb, var(--text) 22%, transparent);
        /* keep same hues, lift luminance for contrast on dark */
        --chart-1: color-mix(in srgb, var(--plot-brand) 78%, #ffffff);
        --chart-2: color-mix(in srgb, var(--plot-goldenrod) 78%, #ffffff);
        --chart-3: color-mix(in srgb, var(--plot-firebrick) 78%, #ffffff);
        --chart-4: color-mix(in srgb, var(--plot-midnight) 78%, #ffffff);

        --chart-5:    #c084fc;
        --chart-6:    #22c55e;
        --chart-7:    #f87171;
        --chart-8:    #38bdf8;
        --chart-9:    #f59e0b;
        /* --chart-2:    #6366f1; */
        /* --chart-3:    #fb7185; */
        /* --chart-8:    #2dd4bf; */

        /* Alerts (high-contrast on dark) */
        --alert-bg:     #2b1010;
        --alert-border: #7f1d1d;
        --alert-text:   #fecaca;
        --alert-icon:   #fca5a5;

        /* Success messages (high-contrast on dark) */
        --success-bg:     #0f2417;
        --success-border: #166534;
        --success-text:   #bbf7d0;
        --success-icon:   #86efac;
    }
}