/* ============================================================================
   HINOVEST — Calm Institutional Token System
   Portable: variable names mirror the existing theme.css so this layer can be
   dropped back into the Django project. Every theme is one [data-theme="…"]
   block redefining the same token names — adding a palette is adding a block,
   nothing else. [data-theme="graphite"] is the default.
   Accent is intentionally restrained gold (HINOVEST brand), reserved for
   primary actions + active states only.
   ============================================================================ */

/* ---- GRAPHITE (calm dark, default) --------------------------------------- */
:root,
[data-theme="graphite"] {
    color-scheme: dark;

    /* Surfaces — desaturated graphite, never pure black */
    --color-void:        #0f1216;   /* app background */
    --color-surface-0:   #14181d;   /* deepest panel / sidebar */
    --color-surface-1:   #181d23;   /* card */
    --color-surface-2:   #1e242b;   /* raised / hover */
    --color-surface-3:   #262d36;   /* active / control */
    --color-surface-inset:#11151a;  /* table body, wells */

    /* Borders — hairlines, low contrast */
    --color-border-subtle: rgba(255, 255, 255, 0.06);
    --color-border-mid:    rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    /* Brand accent — restrained gold */
    --color-accent-primary: #d8a13f;
    --color-accent-glow:    #e7b860;
    --color-accent-deep:    #a9761f;
    --color-accent-ink:     #1a130a;   /* text on gold */
    --color-accent-muted:   rgba(216, 161, 63, 0.12);
    --color-accent-border:  rgba(216, 161, 63, 0.34);

    /* Semantic — desaturated for long sessions */
    --color-profit:        #3fb27f;
    --color-profit-strong: #57c794;
    --color-profit-muted:  rgba(63, 178, 127, 0.13);
    --color-loss:          #e06a72;
    --color-loss-strong:   #ec828a;
    --color-loss-muted:    rgba(224, 106, 114, 0.13);
    --color-warning:       #d8a13f;
    --color-warning-muted: rgba(216, 161, 63, 0.13);
    --color-info:          #6f9fd8;
    --color-info-muted:    rgba(111, 159, 216, 0.13);
    --color-neutral:       #7b828c;

    /* Text */
    --color-text-primary:   #e9ebee;
    --color-text-secondary: #9aa1ab;
    --color-text-tertiary:  #6b727c;
    --color-text-disabled:  #474d56;

    /* Chart series — distinguishable, not aggressive */
    --chart-1: #d8a13f;
    --chart-2: #6f9fd8;
    --chart-3: #3fb27f;
    --chart-4: #b98ad0;
    --chart-5: #e0916a;
    --chart-grid: rgba(255, 255, 255, 0.05);
    --chart-axis: #6b727c;
    --chart-area-from: rgba(216, 161, 63, 0.16);
    --chart-area-to:   rgba(216, 161, 63, 0.00);

    /* Shadows — soft, low, single-layer */
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.34);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.46);
    --ring-focus:   0 0 0 2px var(--color-void), 0 0 0 4px var(--color-accent-primary);
}

/* ---- PARCHMENT (warm light) ---------------------------------------------- */
[data-theme="parchment"] {
    color-scheme: light;

    --color-void:        #efece4;   /* warm paper background */
    --color-surface-0:   #f4f1ea;
    --color-surface-1:   #fbfaf6;   /* card — warm off-white, not pure white */
    --color-surface-2:   #ffffff;
    --color-surface-3:   #f0ede5;
    --color-surface-inset:#f6f4ee;

    --color-border-subtle: rgba(38, 32, 22, 0.08);
    --color-border-mid:    rgba(38, 32, 22, 0.14);
    --color-border-strong: rgba(38, 32, 22, 0.22);

    --color-accent-primary: #b07d1c;
    --color-accent-glow:    #c8902f;
    --color-accent-deep:    #8c6212;
    --color-accent-ink:     #fffaf0;
    --color-accent-muted:   rgba(176, 125, 28, 0.12);
    --color-accent-border:  rgba(176, 125, 28, 0.36);

    --color-profit:        #1c8a5b;
    --color-profit-strong: #157049;
    --color-profit-muted:  rgba(28, 138, 91, 0.12);
    --color-loss:          #c0392f;
    --color-loss-strong:   #a32e26;
    --color-loss-muted:    rgba(192, 57, 47, 0.10);
    --color-warning:       #b07d1c;
    --color-warning-muted: rgba(176, 125, 28, 0.14);
    --color-info:          #2f6db0;
    --color-info-muted:    rgba(47, 109, 176, 0.10);
    --color-neutral:       #8a8276;

    --color-text-primary:   #21262d;
    --color-text-secondary: #5b6068;
    --color-text-tertiary:  #868b93;
    --color-text-disabled:  #b3b0a6;

    --chart-1: #b07d1c;
    --chart-2: #2f6db0;
    --chart-3: #1c8a5b;
    --chart-4: #8a5cae;
    --chart-5: #c2683a;
    --chart-grid: rgba(38, 32, 22, 0.07);
    --chart-axis: #868b93;
    --chart-area-from: rgba(176, 125, 28, 0.16);
    --chart-area-to:   rgba(176, 125, 28, 0.00);

    --shadow-sm:    0 1px 2px rgba(60, 50, 30, 0.08);
    --shadow-card:  0 1px 2px rgba(60, 50, 30, 0.07);
    --shadow-raised:0 6px 18px rgba(60, 50, 30, 0.10);
    --shadow-float: 0 16px 40px rgba(60, 50, 30, 0.16);
    --ring-focus:   0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-accent-primary);
}

/* ---- EMBER (warm charcoal dark, restrained orange) ----------------------- */
[data-theme="ember"] {
    color-scheme: dark;

    --color-void:        #16110d;
    --color-surface-0:   #1b1511;
    --color-surface-1:   #201914;
    --color-surface-2:   #2a211a;
    --color-surface-3:   #342820;
    --color-surface-inset:#130f0b;

    --color-border-subtle: rgba(255, 240, 230, 0.06);
    --color-border-mid:    rgba(255, 240, 230, 0.10);
    --color-border-strong: rgba(255, 240, 230, 0.17);

    --color-accent-primary: #e0732f;
    --color-accent-glow:    #f0904f;
    --color-accent-deep:    #b1531c;
    --color-accent-ink:     #1c0f07;
    --color-accent-muted:   rgba(224, 115, 47, 0.13);
    --color-accent-border:  rgba(224, 115, 47, 0.34);

    --color-profit:        #58b585;
    --color-profit-strong: #6fc89a;
    --color-profit-muted:  rgba(88, 181, 133, 0.13);
    --color-loss:          #e8676f;
    --color-loss-strong:   #f0848b;
    --color-loss-muted:    rgba(232, 103, 111, 0.13);
    --color-warning:       #e0a03f;
    --color-warning-muted: rgba(224, 160, 63, 0.13);
    --color-info:          #6f9fd8;
    --color-info-muted:    rgba(111, 159, 216, 0.13);
    --color-neutral:       #8a7d72;

    --color-text-primary:   #f1eae3;
    --color-text-secondary: #b3a397;
    --color-text-tertiary:  #80726a;
    --color-text-disabled:  #54483f;

    --chart-1: #e0732f;
    --chart-2: #6f9fd8;
    --chart-3: #58b585;
    --chart-4: #c98ad0;
    --chart-5: #e0a03f;
    --chart-grid: rgba(255, 240, 230, 0.05);
    --chart-axis: #80726a;
    --chart-area-from: rgba(224, 115, 47, 0.18);
    --chart-area-to:   rgba(224, 115, 47, 0.00);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.34);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.38);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.50);
    --ring-focus:   0 0 0 2px var(--color-void), 0 0 0 4px var(--color-accent-primary);
}

/* ---- MIDNIGHT (cool indigo dark) ----------------------------------------- */
[data-theme="midnight"] {
    color-scheme: dark;

    --color-void:        #0d1018;
    --color-surface-0:   #11131f;
    --color-surface-1:   #151827;
    --color-surface-2:   #1c2031;
    --color-surface-3:   #242a3e;
    --color-surface-inset:#0b0e16;

    --color-border-subtle: rgba(255, 255, 255, 0.06);
    --color-border-mid:    rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.17);

    --color-accent-primary: #7c8cf8;
    --color-accent-glow:    #9aa6fb;
    --color-accent-deep:    #5566d6;
    --color-accent-ink:     #0c0f1c;
    --color-accent-muted:   rgba(124, 140, 248, 0.14);
    --color-accent-border:  rgba(124, 140, 248, 0.34);

    --color-profit:        #41c08a;
    --color-profit-strong: #5bd0a0;
    --color-profit-muted:  rgba(65, 192, 138, 0.13);
    --color-loss:          #f0667a;
    --color-loss-strong:   #f5808f;
    --color-loss-muted:    rgba(240, 102, 122, 0.13);
    --color-warning:       #e0a03f;
    --color-warning-muted: rgba(224, 160, 63, 0.13);
    --color-info:          #6f9fd8;
    --color-info-muted:    rgba(111, 159, 216, 0.13);
    --color-neutral:       #7c8294;

    --color-text-primary:   #e7e9f2;
    --color-text-secondary: #9aa0b6;
    --color-text-tertiary:  #6a7088;
    --color-text-disabled:  #464c63;

    --chart-1: #7c8cf8;
    --chart-2: #6f9fd8;
    --chart-3: #41c08a;
    --chart-4: #c98ad0;
    --chart-5: #e0916a;
    --chart-grid: rgba(255, 255, 255, 0.05);
    --chart-axis: #6a7088;
    --chart-area-from: rgba(124, 140, 248, 0.16);
    --chart-area-to:   rgba(124, 140, 248, 0.00);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.38);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.50);
    --ring-focus:   0 0 0 2px var(--color-void), 0 0 0 4px var(--color-accent-primary);
}

/* ---- NORD (arctic frost dark) -------------------------------------------- */
[data-theme="nord"] {
    color-scheme: dark;

    --color-void:        #1e222a;
    --color-surface-0:   #232833;
    --color-surface-1:   #2a303c;
    --color-surface-2:   #333a48;
    --color-surface-3:   #3c4453;
    --color-surface-inset:#1a1e26;

    --color-border-subtle: rgba(236, 239, 244, 0.07);
    --color-border-mid:    rgba(236, 239, 244, 0.12);
    --color-border-strong: rgba(236, 239, 244, 0.19);

    --color-accent-primary: #88c0d0;
    --color-accent-glow:    #a3d2df;
    --color-accent-deep:    #5e93a3;
    --color-accent-ink:     #11161c;
    --color-accent-muted:   rgba(136, 192, 208, 0.14);
    --color-accent-border:  rgba(136, 192, 208, 0.36);

    --color-profit:        #8fbf7f;
    --color-profit-strong: #a6d196;
    --color-profit-muted:  rgba(143, 191, 127, 0.15);
    --color-loss:          #cf6d77;
    --color-loss-strong:   #dd8891;
    --color-loss-muted:    rgba(207, 109, 119, 0.15);
    --color-warning:       #ebcb8b;
    --color-warning-muted: rgba(235, 203, 139, 0.15);
    --color-info:          #81a1c1;
    --color-info-muted:    rgba(129, 161, 193, 0.15);
    --color-neutral:       #7b8494;

    --color-text-primary:   #e5e9f0;
    --color-text-secondary: #aab2c2;
    --color-text-tertiary:  #79818f;
    --color-text-disabled:  #525a68;

    --chart-1: #88c0d0;
    --chart-2: #81a1c1;
    --chart-3: #8fbf7f;
    --chart-4: #b48ead;
    --chart-5: #ebcb8b;
    --chart-grid: rgba(236, 239, 244, 0.06);
    --chart-axis: #79818f;
    --chart-area-from: rgba(136, 192, 208, 0.18);
    --chart-area-to:   rgba(136, 192, 208, 0.00);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.26);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.32);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.44);
    --ring-focus:   0 0 0 2px var(--color-void), 0 0 0 4px var(--color-accent-primary);
}

/* ---- FOREST (deep green dark) -------------------------------------------- */
[data-theme="forest"] {
    color-scheme: dark;

    --color-void:        #0c130e;
    --color-surface-0:   #101a12;
    --color-surface-1:   #142016;
    --color-surface-2:   #1b2a1d;
    --color-surface-3:   #233527;
    --color-surface-inset:#0a110c;

    --color-border-subtle: rgba(220, 255, 225, 0.06);
    --color-border-mid:    rgba(220, 255, 225, 0.10);
    --color-border-strong: rgba(220, 255, 225, 0.17);

    --color-accent-primary: #cdb24a;
    --color-accent-glow:    #ddc463;
    --color-accent-deep:    #9c8125;
    --color-accent-ink:     #12160a;
    --color-accent-muted:   rgba(205, 178, 74, 0.13);
    --color-accent-border:  rgba(205, 178, 74, 0.34);

    --color-profit:        #46c07f;
    --color-profit-strong: #5fd197;
    --color-profit-muted:  rgba(70, 192, 127, 0.13);
    --color-loss:          #e0707a;
    --color-loss-strong:   #ec8a92;
    --color-loss-muted:    rgba(224, 112, 122, 0.13);
    --color-warning:       #d8b23f;
    --color-warning-muted: rgba(216, 178, 63, 0.13);
    --color-info:          #6fae9f;
    --color-info-muted:    rgba(111, 174, 159, 0.13);
    --color-neutral:       #79857a;

    --color-text-primary:   #e7efe6;
    --color-text-secondary: #9bb09c;
    --color-text-tertiary:  #6e8270;
    --color-text-disabled:  #4a5a4c;

    --chart-1: #cdb24a;
    --chart-2: #6fae9f;
    --chart-3: #46c07f;
    --chart-4: #b98ad0;
    --chart-5: #e0916a;
    --chart-grid: rgba(220, 255, 225, 0.05);
    --chart-axis: #6e8270;
    --chart-area-from: rgba(205, 178, 74, 0.16);
    --chart-area-to:   rgba(205, 178, 74, 0.00);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.38);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.50);
    --ring-focus:   0 0 0 2px var(--color-void), 0 0 0 4px var(--color-accent-primary);
}

/* ---- ROSE (plum / rose dark) --------------------------------------------- */
[data-theme="rose"] {
    color-scheme: dark;

    --color-void:        #15101a;
    --color-surface-0:   #1a1320;
    --color-surface-1:   #1f1726;
    --color-surface-2:   #281e30;
    --color-surface-3:   #32263c;
    --color-surface-inset:#110c16;

    --color-border-subtle: rgba(255, 240, 250, 0.06);
    --color-border-mid:    rgba(255, 240, 250, 0.10);
    --color-border-strong: rgba(255, 240, 250, 0.17);

    --color-accent-primary: #e07aa6;
    --color-accent-glow:    #ee93b9;
    --color-accent-deep:    #b85580;
    --color-accent-ink:     #1b0f15;
    --color-accent-muted:   rgba(224, 122, 166, 0.14);
    --color-accent-border:  rgba(224, 122, 166, 0.34);

    --color-profit:        #4fbf97;
    --color-profit-strong: #68d0ab;
    --color-profit-muted:  rgba(79, 191, 151, 0.13);
    --color-loss:          #ec6f80;
    --color-loss-strong:   #f28a98;
    --color-loss-muted:    rgba(236, 111, 128, 0.13);
    --color-warning:       #e0a651;
    --color-warning-muted: rgba(224, 166, 81, 0.13);
    --color-info:          #8f9fe0;
    --color-info-muted:    rgba(143, 159, 224, 0.13);
    --color-neutral:       #897e8c;

    --color-text-primary:   #efe6f0;
    --color-text-secondary: #b29bb6;
    --color-text-tertiary:  #82728a;
    --color-text-disabled:  #564a5c;

    --chart-1: #e07aa6;
    --chart-2: #8f9fe0;
    --chart-3: #4fbf97;
    --chart-4: #c98ad0;
    --chart-5: #e0a651;
    --chart-grid: rgba(255, 240, 250, 0.05);
    --chart-axis: #82728a;
    --chart-area-from: rgba(224, 122, 166, 0.16);
    --chart-area-to:   rgba(224, 122, 166, 0.00);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.38);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.50);
    --ring-focus:   0 0 0 2px var(--color-void), 0 0 0 4px var(--color-accent-primary);
}

/* ---- SLATE (neutral mono dark, blue accent) ------------------------------ */
[data-theme="slate"] {
    color-scheme: dark;

    --color-void:        #121519;
    --color-surface-0:   #171a1f;
    --color-surface-1:   #1c2026;
    --color-surface-2:   #232830;
    --color-surface-3:   #2c323b;
    --color-surface-inset:#0e1115;

    --color-border-subtle: rgba(255, 255, 255, 0.06);
    --color-border-mid:    rgba(255, 255, 255, 0.10);
    --color-border-strong: rgba(255, 255, 255, 0.16);

    --color-accent-primary: #5b9bd5;
    --color-accent-glow:    #79b0e0;
    --color-accent-deep:    #3f74a8;
    --color-accent-ink:     #0b1018;
    --color-accent-muted:   rgba(91, 155, 213, 0.13);
    --color-accent-border:  rgba(91, 155, 213, 0.34);

    --color-profit:        #46b483;
    --color-profit-strong: #5fc699;
    --color-profit-muted:  rgba(70, 180, 131, 0.13);
    --color-loss:          #de6b74;
    --color-loss-strong:   #e8858d;
    --color-loss-muted:    rgba(222, 107, 116, 0.13);
    --color-warning:       #d8a13f;
    --color-warning-muted: rgba(216, 161, 63, 0.13);
    --color-info:          #5b9bd5;
    --color-info-muted:    rgba(91, 155, 213, 0.13);
    --color-neutral:       #7c828c;

    --color-text-primary:   #e8eaee;
    --color-text-secondary: #9aa0aa;
    --color-text-tertiary:  #6b717b;
    --color-text-disabled:  #474d56;

    --chart-1: #5b9bd5;
    --chart-2: #6f9fd8;
    --chart-3: #46b483;
    --chart-4: #b98ad0;
    --chart-5: #e0916a;
    --chart-grid: rgba(255, 255, 255, 0.05);
    --chart-axis: #6b717b;
    --chart-area-from: rgba(91, 155, 213, 0.16);
    --chart-area-to:   rgba(91, 155, 213, 0.00);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.28);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.34);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.46);
    --ring-focus:   0 0 0 2px var(--color-void), 0 0 0 4px var(--color-accent-primary);
}

/* ---- DAYLIGHT (cool clean light) ----------------------------------------- */
[data-theme="daylight"] {
    color-scheme: light;

    --color-void:        #eef1f5;
    --color-surface-0:   #f3f5f8;
    --color-surface-1:   #ffffff;
    --color-surface-2:   #ffffff;
    --color-surface-3:   #eceff4;
    --color-surface-inset:#f4f6f9;

    --color-border-subtle: rgba(20, 28, 40, 0.08);
    --color-border-mid:    rgba(20, 28, 40, 0.14);
    --color-border-strong: rgba(20, 28, 40, 0.22);

    --color-accent-primary: #2f6fd0;
    --color-accent-glow:    #3f80e0;
    --color-accent-deep:    #2456a8;
    --color-accent-ink:     #ffffff;
    --color-accent-muted:   rgba(47, 111, 208, 0.12);
    --color-accent-border:  rgba(47, 111, 208, 0.34);

    --color-profit:        #1c8a5b;
    --color-profit-strong: #157049;
    --color-profit-muted:  rgba(28, 138, 91, 0.12);
    --color-loss:          #c0392f;
    --color-loss-strong:   #a32e26;
    --color-loss-muted:    rgba(192, 57, 47, 0.10);
    --color-warning:       #b9831c;
    --color-warning-muted: rgba(185, 131, 28, 0.14);
    --color-info:          #2f6db0;
    --color-info-muted:    rgba(47, 109, 176, 0.10);
    --color-neutral:       #828995;

    --color-text-primary:   #1b2430;
    --color-text-secondary: #545c6a;
    --color-text-tertiary:  #818996;
    --color-text-disabled:  #aab1bd;

    --chart-1: #2f6fd0;
    --chart-2: #2f6db0;
    --chart-3: #1c8a5b;
    --chart-4: #8a5cae;
    --chart-5: #c2683a;
    --chart-grid: rgba(20, 28, 40, 0.07);
    --chart-axis: #818996;
    --chart-area-from: rgba(47, 111, 208, 0.16);
    --chart-area-to:   rgba(47, 111, 208, 0.00);

    --shadow-sm:    0 1px 2px rgba(30, 41, 59, 0.08);
    --shadow-card:  0 1px 2px rgba(30, 41, 59, 0.07);
    --shadow-raised:0 6px 18px rgba(30, 41, 59, 0.10);
    --shadow-float: 0 16px 40px rgba(30, 41, 59, 0.16);
    --ring-focus:   0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-accent-primary);
}

/* ---- OBSIDIAN (true black, OLED, cyan accent) ----------------------------- */
[data-theme="obsidian"] {
    color-scheme: dark;

    --color-void:        #000000;
    --color-surface-0:   #0a0c0e;
    --color-surface-1:   #0f1214;
    --color-surface-2:   #16191d;
    --color-surface-3:   #1f2429;
    --color-surface-inset:#050607;

    --color-border-subtle: rgba(255, 255, 255, 0.07);
    --color-border-mid:    rgba(255, 255, 255, 0.12);
    --color-border-strong: rgba(255, 255, 255, 0.18);

    --color-accent-primary: #2fd4c8;
    --color-accent-glow:    #58e5da;
    --color-accent-deep:    #1a9a90;
    --color-accent-ink:     #00110f;
    --color-accent-muted:   rgba(47, 212, 200, 0.12);
    --color-accent-border:  rgba(47, 212, 200, 0.34);

    --color-profit:        #35c98b;
    --color-profit-strong: #54daa1;
    --color-profit-muted:  rgba(53, 201, 139, 0.13);
    --color-loss:          #f0616b;
    --color-loss-strong:   #f77e87;
    --color-loss-muted:    rgba(240, 97, 107, 0.13);
    --color-warning:       #e3b341;
    --color-warning-muted: rgba(227, 179, 65, 0.13);
    --color-info:          #58a6ff;
    --color-info-muted:    rgba(88, 166, 255, 0.13);
    --color-neutral:       #6e7681;

    --color-text-primary:   #f0f3f6;
    --color-text-secondary: #9198a1;
    --color-text-tertiary:  #656c76;
    --color-text-disabled:  #424951;

    --chart-1: #2fd4c8;
    --chart-2: #58a6ff;
    --chart-3: #35c98b;
    --chart-4: #bc8cff;
    --chart-5: #f0883e;
    --chart-grid: rgba(255, 255, 255, 0.06);
    --chart-axis: #656c76;
    --chart-area-from: rgba(47, 212, 200, 0.16);
    --chart-area-to:   rgba(47, 212, 200, 0.00);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.60);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.55);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.65);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.75);
    --ring-focus:   0 0 0 2px var(--color-void), 0 0 0 4px var(--color-accent-primary);
}

/* ---- MOCHA (coffee dark, mauve accent) ----------------------------------- */
[data-theme="mocha"] {
    color-scheme: dark;

    --color-void:        #1e1e2e;
    --color-surface-0:   #181825;
    --color-surface-1:   #232336;
    --color-surface-2:   #2b2b40;
    --color-surface-3:   #35354d;
    --color-surface-inset:#14141f;

    --color-border-subtle: rgba(205, 214, 244, 0.07);
    --color-border-mid:    rgba(205, 214, 244, 0.12);
    --color-border-strong: rgba(205, 214, 244, 0.20);

    --color-accent-primary: #cba6f7;
    --color-accent-glow:    #dcbdff;
    --color-accent-deep:    #9d72d4;
    --color-accent-ink:     #1e1e2e;
    --color-accent-muted:   rgba(203, 166, 247, 0.13);
    --color-accent-border:  rgba(203, 166, 247, 0.34);

    --color-profit:        #a6e3a1;
    --color-profit-strong: #bcecb8;
    --color-profit-muted:  rgba(166, 227, 161, 0.13);
    --color-loss:          #f38ba8;
    --color-loss-strong:   #f7a5bc;
    --color-loss-muted:    rgba(243, 139, 168, 0.13);
    --color-warning:       #f9e2af;
    --color-warning-muted: rgba(249, 226, 175, 0.13);
    --color-info:          #89b4fa;
    --color-info-muted:    rgba(137, 180, 250, 0.13);
    --color-neutral:       #7f849c;

    --color-text-primary:   #cdd6f4;
    --color-text-secondary: #a6adc8;
    --color-text-tertiary:  #7f849c;
    --color-text-disabled:  #585b70;

    --chart-1: #cba6f7;
    --chart-2: #89b4fa;
    --chart-3: #a6e3a1;
    --chart-4: #f5c2e7;
    --chart-5: #fab387;
    --chart-grid: rgba(205, 214, 244, 0.06);
    --chart-axis: #7f849c;
    --chart-area-from: rgba(203, 166, 247, 0.18);
    --chart-area-to:   rgba(203, 166, 247, 0.00);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.36);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.48);
    --ring-focus:   0 0 0 2px var(--color-void), 0 0 0 4px var(--color-accent-primary);
}

/* ---- OCEANIC (deep sea, teal accent) ------------------------------------- */
[data-theme="oceanic"] {
    color-scheme: dark;

    --color-void:        #0c1a1f;
    --color-surface-0:   #10222a;
    --color-surface-1:   #142b34;
    --color-surface-2:   #1b3742;
    --color-surface-3:   #244653;
    --color-surface-inset:#0a1519;

    --color-border-subtle: rgba(190, 230, 240, 0.07);
    --color-border-mid:    rgba(190, 230, 240, 0.12);
    --color-border-strong: rgba(190, 230, 240, 0.19);

    --color-accent-primary: #4fc3d9;
    --color-accent-glow:    #6fdcef;
    --color-accent-deep:    #2b8ca3;
    --color-accent-ink:     #04191f;
    --color-accent-muted:   rgba(79, 195, 217, 0.13);
    --color-accent-border:  rgba(79, 195, 217, 0.34);

    --color-profit:        #45c99a;
    --color-profit-strong: #61d9ae;
    --color-profit-muted:  rgba(69, 201, 154, 0.13);
    --color-loss:          #e2717f;
    --color-loss-strong:   #ec8b96;
    --color-loss-muted:    rgba(226, 113, 127, 0.13);
    --color-warning:       #e8b24c;
    --color-warning-muted: rgba(232, 178, 76, 0.13);
    --color-info:          #6aaee0;
    --color-info-muted:    rgba(106, 174, 224, 0.13);
    --color-neutral:       #7d919a;

    --color-text-primary:   #e4f1f5;
    --color-text-secondary: #9cb2bb;
    --color-text-tertiary:  #6f858e;
    --color-text-disabled:  #4a5c65;

    --chart-1: #4fc3d9;
    --chart-2: #6aaee0;
    --chart-3: #45c99a;
    --chart-4: #b58ad6;
    --chart-5: #e08a5c;
    --chart-grid: rgba(190, 230, 240, 0.06);
    --chart-axis: #6f858e;
    --chart-area-from: rgba(79, 195, 217, 0.17);
    --chart-area-to:   rgba(79, 195, 217, 0.00);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.34);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.32);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.38);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.50);
    --ring-focus:   0 0 0 2px var(--color-void), 0 0 0 4px var(--color-accent-primary);
}

/* ---- SANDSTONE (warm light, terracotta accent) --------------------------- */
[data-theme="sandstone"] {
    color-scheme: light;

    --color-void:        #f2ede6;
    --color-surface-0:   #f7f3ec;
    --color-surface-1:   #fffdf9;
    --color-surface-2:   #ffffff;
    --color-surface-3:   #ece5da;
    --color-surface-inset:#f8f5f0;

    --color-border-subtle: rgba(60, 45, 32, 0.09);
    --color-border-mid:    rgba(60, 45, 32, 0.15);
    --color-border-strong: rgba(60, 45, 32, 0.23);

    --color-accent-primary: #c05f34;
    --color-accent-glow:    #d4713f;
    --color-accent-deep:    #974624;
    --color-accent-ink:     #fff7f2;
    --color-accent-muted:   rgba(192, 95, 52, 0.12);
    --color-accent-border:  rgba(192, 95, 52, 0.36);

    --color-profit:        #1f7a56;
    --color-profit-strong: #176246;
    --color-profit-muted:  rgba(31, 122, 86, 0.12);
    --color-loss:          #b93b30;
    --color-loss-strong:   #9c3027;
    --color-loss-muted:    rgba(185, 59, 48, 0.10);
    --color-warning:       #b07d1c;
    --color-warning-muted: rgba(176, 125, 28, 0.14);
    --color-info:          #33689e;
    --color-info-muted:    rgba(51, 104, 158, 0.10);
    --color-neutral:       #8c8175;

    --color-text-primary:   #2c2620;
    --color-text-secondary: #5d564d;
    --color-text-tertiary:  #8b8378;
    --color-text-disabled:  #b6afa5;

    --chart-1: #c05f34;
    --chart-2: #33689e;
    --chart-3: #1f7a56;
    --chart-4: #8a5cae;
    --chart-5: #b07d1c;
    --chart-grid: rgba(60, 45, 32, 0.07);
    --chart-axis: #8b8378;
    --chart-area-from: rgba(192, 95, 52, 0.16);
    --chart-area-to:   rgba(192, 95, 52, 0.00);

    --shadow-sm:    0 1px 2px rgba(60, 45, 32, 0.08);
    --shadow-card:  0 1px 2px rgba(60, 45, 32, 0.07);
    --shadow-raised:0 6px 18px rgba(60, 45, 32, 0.10);
    --shadow-float: 0 16px 40px rgba(60, 45, 32, 0.16);
    --ring-focus:   0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-accent-primary);
}

/* ---- MINT (cool light, green accent) ------------------------------------- */
[data-theme="mint"] {
    color-scheme: light;

    --color-void:        #eaf2ee;
    --color-surface-0:   #f1f7f4;
    --color-surface-1:   #ffffff;
    --color-surface-2:   #ffffff;
    --color-surface-3:   #e4ede8;
    --color-surface-inset:#f3f8f5;

    --color-border-subtle: rgba(20, 45, 35, 0.08);
    --color-border-mid:    rgba(20, 45, 35, 0.14);
    --color-border-strong: rgba(20, 45, 35, 0.22);

    --color-accent-primary: #12866a;
    --color-accent-glow:    #189b7c;
    --color-accent-deep:    #0c6650;
    --color-accent-ink:     #ffffff;
    --color-accent-muted:   rgba(18, 134, 106, 0.12);
    --color-accent-border:  rgba(18, 134, 106, 0.34);

    --color-profit:        #12866a;
    --color-profit-strong: #0c6650;
    --color-profit-muted:  rgba(18, 134, 106, 0.12);
    --color-loss:          #c0392f;
    --color-loss-strong:   #a32e26;
    --color-loss-muted:    rgba(192, 57, 47, 0.10);
    --color-warning:       #b9831c;
    --color-warning-muted: rgba(185, 131, 28, 0.14);
    --color-info:          #2f6db0;
    --color-info-muted:    rgba(47, 109, 176, 0.10);
    --color-neutral:       #7f8c86;

    --color-text-primary:   #16211c;
    --color-text-secondary: #4d5b54;
    --color-text-tertiary:  #7c8a83;
    --color-text-disabled:  #a9b4ae;

    --chart-1: #12866a;
    --chart-2: #2f6db0;
    --chart-3: #4f9d54;
    --chart-4: #8a5cae;
    --chart-5: #c2683a;
    --chart-grid: rgba(20, 45, 35, 0.07);
    --chart-axis: #7c8a83;
    --chart-area-from: rgba(18, 134, 106, 0.16);
    --chart-area-to:   rgba(18, 134, 106, 0.00);

    --shadow-sm:    0 1px 2px rgba(16, 40, 30, 0.08);
    --shadow-card:  0 1px 2px rgba(16, 40, 30, 0.07);
    --shadow-raised:0 6px 18px rgba(16, 40, 30, 0.10);
    --shadow-float: 0 16px 40px rgba(16, 40, 30, 0.16);
    --ring-focus:   0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-accent-primary);
}

/* ---- LAVENDER (soft light, violet accent) -------------------------------- */
[data-theme="lavender"] {
    color-scheme: light;

    --color-void:        #f0edf7;
    --color-surface-0:   #f5f2fb;
    --color-surface-1:   #ffffff;
    --color-surface-2:   #ffffff;
    --color-surface-3:   #e9e4f4;
    --color-surface-inset:#f6f3fc;

    --color-border-subtle: rgba(40, 28, 60, 0.08);
    --color-border-mid:    rgba(40, 28, 60, 0.14);
    --color-border-strong: rgba(40, 28, 60, 0.22);

    --color-accent-primary: #6d4bc4;
    --color-accent-glow:    #7f5fd6;
    --color-accent-deep:    #55389e;
    --color-accent-ink:     #ffffff;
    --color-accent-muted:   rgba(109, 75, 196, 0.12);
    --color-accent-border:  rgba(109, 75, 196, 0.34);

    --color-profit:        #1c8a5b;
    --color-profit-strong: #157049;
    --color-profit-muted:  rgba(28, 138, 91, 0.12);
    --color-loss:          #c0392f;
    --color-loss-strong:   #a32e26;
    --color-loss-muted:    rgba(192, 57, 47, 0.10);
    --color-warning:       #b9831c;
    --color-warning-muted: rgba(185, 131, 28, 0.14);
    --color-info:          #4a72c9;
    --color-info-muted:    rgba(74, 114, 201, 0.10);
    --color-neutral:       #857e95;

    --color-text-primary:   #211b30;
    --color-text-secondary: #554e66;
    --color-text-tertiary:  #837c93;
    --color-text-disabled:  #b0aabd;

    --chart-1: #6d4bc4;
    --chart-2: #4a72c9;
    --chart-3: #1c8a5b;
    --chart-4: #c2559c;
    --chart-5: #c2683a;
    --chart-grid: rgba(40, 28, 60, 0.07);
    --chart-axis: #837c93;
    --chart-area-from: rgba(109, 75, 196, 0.16);
    --chart-area-to:   rgba(109, 75, 196, 0.00);

    --shadow-sm:    0 1px 2px rgba(35, 25, 55, 0.08);
    --shadow-card:  0 1px 2px rgba(35, 25, 55, 0.07);
    --shadow-raised:0 6px 18px rgba(35, 25, 55, 0.10);
    --shadow-float: 0 16px 40px rgba(35, 25, 55, 0.16);
    --ring-focus:   0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-accent-primary);
}

/* ---- Type, space, radius (shared) ---------------------------------------- */
:root {
    /* Vazirmatn sits behind the Latin faces rather than beside them: CSS
       falls back per glyph, so Latin keeps Inter while any Persian character
       — an analysis, a note, a settings label — picks up Vazirmatn even when
       the interface itself is in English. */
    --font-display: "Inter", "Vazirmatn", system-ui, -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", "Vazirmatn", "SFMono-Regular", ui-monospace, monospace;

    --text-2xs: 11px;
    --text-xs:  12px;
    --text-sm:  13px;
    --text-base:14px;
    --text-md:  15px;
    --text-lg:  17px;
    --text-xl:  20px;
    --text-2xl: 25px;
    --text-3xl: 32px;
    --text-4xl: 40px;

    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.03em;
    --tracking-wider: 0.07em;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    --radius-sm: 7px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --sidebar-w: 232px;
    --sidebar-w-collapsed: 64px;
    --topbar-h: 56px;

    /* Density — driven by [data-density] on the shell */
    --row-h: 40px;
    --table-fs: var(--text-sm);
    --cell-py: 9px;
}

[data-density="compact"] {
    --row-h: 32px;
    --cell-py: 5px;
    --table-fs: var(--text-xs);
}
[data-density="comfortable"] {
    --row-h: 48px;
    --cell-py: 13px;
    --table-fs: var(--text-base);
}