/* ============================================================================
   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. Midnight shares the :root block, so it is both the default and
   what an unknown or retired theme name falls back to — Graphite used to hold
   that seat, which is why deleting it made every stale preference land on a
   palette nobody had chosen.
   Accent is reserved for primary actions + active states only.

   Every block also carries its own backdrop tokens: --bg-wash-a and -b are
   the two soft corner washes behind the workspace, and -a also paints the
   equity curve along its bottom edge (see .app-shell::before/::after in
   components.css). They live per theme rather than being derived in the
   shared :root at the bottom of this file: :root and [data-theme="…"] have
   identical specificity, so anything defined down there would win over a
   theme's own answer.

   Two mirrors have to move with these values: THEMES in accounts/views.py
   (the four swatch colours) and THEME_TOKENS in imports/ea_theme.py (the
   MetaTrader panel, which cannot read CSS).
   ============================================================================ */


/* Midnight is first on purpose. It shares the :root block, and :root and
   [data-theme="…"] carry identical specificity — so a theme block ABOVE this
   one loses every token to it, whatever the html element actually says. Adding
   a palette means adding a block below this point, never above.
   ------------------------------------------------------------------------- */
/* ---- MIDNIGHT (cool indigo dark, default) -------------------------------- */
:root,
[data-theme="midnight"] {
    color-scheme: dark;

    --color-void:        #0b0e17;
    --color-surface-0:   #101425;
    --color-surface-1:   #161b2e;
    --color-surface-2:   #1e2440;
    --color-surface-3:   #29314f;
    --color-surface-inset:#090c14;

    --color-border-subtle: rgba(190, 205, 255, 0.10);
    --color-border-mid:    rgba(190, 205, 255, 0.16);
    --color-border-strong: rgba(190, 205, 255, 0.26);

    --color-accent-primary: #7b8cff;
    --color-accent-glow:    #9dabff;
    --color-accent-deep:    #4f5fd6;
    --color-accent-ink:     #08091a;
    --color-accent-muted:   rgba(123, 140, 255, 0.16);
    --color-accent-border:  rgba(123, 140, 255, 0.42);

    --color-profit:        #2fd18f;
    --color-profit-strong: #54e3aa;
    --color-profit-muted:  rgba(47, 209, 143, 0.15);
    --color-loss:          #ff4d63;
    --color-loss-strong:   #ff7788;
    --color-loss-muted:    rgba(255, 77, 99, 0.15);
    --color-warning:       #f2b53c;
    --color-warning-muted: rgba(242, 181, 60, 0.15);
    --color-info:          #58a8ff;
    --color-info-muted:    rgba(88, 168, 255, 0.15);
    --color-neutral:       #858ead;

    --color-text-primary:   #eceffb;
    --color-text-secondary: #a7b0cd;
    --color-text-tertiary:  #8b95b5;
    --color-text-disabled:  #4b5372;

    --chart-1: #7b8cff;
    --chart-2: #58a8ff;
    --chart-3: #2fd18f;
    --chart-4: #e07ad0;
    --chart-5: #ffa14f;
    --chart-grid: rgba(190, 205, 255, 0.08);
    --chart-axis: #7d87a6;
    --chart-area-from: rgba(123, 140, 255, 0.22);
    --chart-area-to:   rgba(123, 140, 255, 0.00);

    --bg-wash-a:    rgba(123, 140, 255, 0.168);
    --bg-wash-b:    rgba(47, 209, 143, 0.084);

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


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

    --color-void:        #eee7d9;
    --color-surface-0:   #f7f2e8;
    --color-surface-1:   #fffcf5;
    --color-surface-2:   #ffffff;
    --color-surface-3:   #e6ddca;
    --color-surface-inset:#faf6ed;

    --color-border-subtle: rgba(64, 48, 22, 0.11);
    --color-border-mid:    rgba(64, 48, 22, 0.18);
    --color-border-strong: rgba(64, 48, 22, 0.28);

    --color-accent-primary: #8b5c14;
    --color-accent-glow:    #a06c15;
    --color-accent-deep:    #6a4409;
    --color-accent-ink:     #fffaf0;
    --color-accent-muted:   rgba(139, 92, 20, 0.11);
    --color-accent-border:  rgba(139, 92, 20, 0.38);

    --color-profit:        #0c6b44;
    --color-profit-strong: #085534;
    --color-profit-muted:  rgba(12, 107, 68, 0.11);
    --color-loss:          #b42318;
    --color-loss-strong:   #912018;
    --color-loss-muted:    rgba(180, 35, 24, 0.10);
    --color-warning:       #965306;
    --color-warning-muted: rgba(150, 83, 6, 0.12);
    --color-info:          #1f5fae;
    --color-info-muted:    rgba(31, 95, 174, 0.10);
    --color-neutral:       #6e6553;

    --color-text-primary:   #211f19;
    --color-text-secondary: #4e4a3f;
    --color-text-tertiary:  #625d4f;
    --color-text-disabled:  #a9a08c;

    --chart-1: #8b5c14;
    --chart-2: #1f5fae;
    --chart-3: #0c6b44;
    --chart-4: #7839ee;
    --chart-5: #c4320a;
    --chart-grid: rgba(64, 48, 22, 0.09);
    --chart-axis: #6b6455;
    --chart-area-from: rgba(139, 92, 20, 0.16);
    --chart-area-to:   rgba(139, 92, 20, 0.00);

    --bg-wash-a:    rgba(139, 92, 20, 0.09);
    --bg-wash-b:    rgba(31, 95, 174, 0.05);

    --shadow-sm:    0 1px 2px rgba(56, 42, 22, 0.07);
    --shadow-card:  0 1px 2px rgba(56, 42, 22, 0.06);
    --shadow-raised:0 4px 12px rgba(56, 42, 22, 0.10);
    --shadow-float: 0 12px 32px rgba(56, 42, 22, 0.16);
    --ring-focus:   0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-accent-primary);
}



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

    --color-void:        #232936;
    --color-surface-0:   #2a313f;
    --color-surface-1:   #313a4a;
    --color-surface-2:   #3b4557;
    --color-surface-3:   #465264;
    --color-surface-inset:#1e2430;

    --color-border-subtle: rgba(236, 239, 244, 0.10);
    --color-border-mid:    rgba(236, 239, 244, 0.17);
    --color-border-strong: rgba(236, 239, 244, 0.27);

    --color-accent-primary: #8fd0e2;
    --color-accent-glow:    #aee0ee;
    --color-accent-deep:    #5e93a3;
    --color-accent-ink:     #10161c;
    --color-accent-muted:   rgba(143, 208, 226, 0.16);
    --color-accent-border:  rgba(143, 208, 226, 0.44);

    --color-profit:        #a3d98a;
    --color-profit-strong: #b8e6a2;
    --color-profit-muted:  rgba(163, 217, 138, 0.17);
    --color-loss:          #f2939d;
    --color-loss-strong:   #f7a8b0;
    --color-loss-muted:    rgba(242, 147, 157, 0.17);
    --color-warning:       #f0d489;
    --color-warning-muted: rgba(240, 212, 137, 0.17);
    --color-info:          #8fb3d9;
    --color-info-muted:    rgba(143, 179, 217, 0.17);
    --color-neutral:       #8a94a6;

    --color-text-primary:   #eceff4;
    --color-text-secondary: #c3ccdb;
    --color-text-tertiary:  #a5aec0;
    --color-text-disabled:  #616b7d;

    --chart-1: #8fd0e2;
    --chart-2: #8fb3d9;
    --chart-3: #a3d98a;
    --chart-4: #c99ac2;
    --chart-5: #f0d489;
    --chart-grid: rgba(236, 239, 244, 0.09);
    --chart-axis: #99a3b4;
    --chart-area-from: rgba(143, 208, 226, 0.22);
    --chart-area-to:   rgba(143, 208, 226, 0.00);

    --bg-wash-a:    rgba(143, 208, 226, 0.14);
    --bg-wash-b:    rgba(180, 142, 173, 0.098);

    --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);
}

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

    --color-void:        #0a1109;
    --color-surface-0:   #0e180e;
    --color-surface-1:   #131f13;
    --color-surface-2:   #1b2b1b;
    --color-surface-3:   #243726;
    --color-surface-inset:#081008;

    --color-border-subtle: rgba(220, 255, 225, 0.09);
    --color-border-mid:    rgba(220, 255, 225, 0.15);
    --color-border-strong: rgba(220, 255, 225, 0.24);

    --color-accent-primary: #d9bb46;
    --color-accent-glow:    #ecd066;
    --color-accent-deep:    #a1861f;
    --color-accent-ink:     #10140a;
    --color-accent-muted:   rgba(217, 187, 70, 0.15);
    --color-accent-border:  rgba(217, 187, 70, 0.42);

    --color-profit:        #35cd85;
    --color-profit-strong: #57de9f;
    --color-profit-muted:  rgba(53, 205, 133, 0.15);
    --color-loss:          #f4636f;
    --color-loss-strong:   #ff858c;
    --color-loss-muted:    rgba(244, 99, 111, 0.15);
    --color-warning:       #e5c03d;
    --color-warning-muted: rgba(229, 192, 61, 0.15);
    --color-info:          #5fc0ae;
    --color-info-muted:    rgba(95, 192, 174, 0.15);
    --color-neutral:       #849184;

    --color-text-primary:   #e9f2e7;
    --color-text-secondary: #a6bda6;
    --color-text-tertiary:  #8aa08b;
    --color-text-disabled:  #4e6050;

    --chart-1: #d9bb46;
    --chart-2: #5fc0ae;
    --chart-3: #35cd85;
    --chart-4: #c98ae0;
    --chart-5: #f08a52;
    --chart-grid: rgba(220, 255, 225, 0.07);
    --chart-axis: #7d8f7e;
    --chart-area-from: rgba(217, 187, 70, 0.20);
    --chart-area-to:   rgba(217, 187, 70, 0.00);

    --bg-wash-a:    rgba(217, 187, 70, 0.126);
    --bg-wash-b:    rgba(53, 205, 133, 0.112);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.36);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.34);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.42);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.55);
    --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:        #140e19;
    --color-surface-0:   #1a1220;
    --color-surface-1:   #211829;
    --color-surface-2:   #2c2036;
    --color-surface-3:   #382a44;
    --color-surface-inset:#100b15;

    --color-border-subtle: rgba(255, 240, 250, 0.09);
    --color-border-mid:    rgba(255, 240, 250, 0.15);
    --color-border-strong: rgba(255, 240, 250, 0.24);

    --color-accent-primary: #f07db0;
    --color-accent-glow:    #ff9bc5;
    --color-accent-deep:    #bd4f83;
    --color-accent-ink:     #1a0a12;
    --color-accent-muted:   rgba(240, 125, 176, 0.16);
    --color-accent-border:  rgba(240, 125, 176, 0.42);

    --color-profit:        #3fcb9c;
    --color-profit-strong: #5fdbb1;
    --color-profit-muted:  rgba(63, 203, 156, 0.15);
    --color-loss:          #fb6079;
    --color-loss-strong:   #ff8395;
    --color-loss-muted:    rgba(251, 96, 121, 0.15);
    --color-warning:       #f0ab4d;
    --color-warning-muted: rgba(240, 171, 77, 0.15);
    --color-info:          #8fa5ff;
    --color-info-muted:    rgba(143, 165, 255, 0.15);
    --color-neutral:       #958799;

    --color-text-primary:   #f4e9f5;
    --color-text-secondary: #c0a5c5;
    --color-text-tertiary:  #a18ba7;
    --color-text-disabled:  #5d4e64;

    --chart-1: #f07db0;
    --chart-2: #8fa5ff;
    --chart-3: #3fcb9c;
    --chart-4: #d38ae8;
    --chart-5: #f0ac52;
    --chart-grid: rgba(255, 240, 250, 0.07);
    --chart-axis: #94829b;
    --chart-area-from: rgba(240, 125, 176, 0.20);
    --chart-area-to:   rgba(240, 125, 176, 0.00);

    --bg-wash-a:    rgba(240, 125, 176, 0.154);
    --bg-wash-b:    rgba(143, 165, 255, 0.098);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.36);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.34);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.42);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.55);
    --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:        #101317;
    --color-surface-0:   #15191e;
    --color-surface-1:   #1b2027;
    --color-surface-2:   #242a33;
    --color-surface-3:   #2f3641;
    --color-surface-inset:#0d1014;

    --color-border-subtle: rgba(255, 255, 255, 0.09);
    --color-border-mid:    rgba(255, 255, 255, 0.15);
    --color-border-strong: rgba(255, 255, 255, 0.24);

    --color-accent-primary: #4d9dee;
    --color-accent-glow:    #74b6f7;
    --color-accent-deep:    #3373b8;
    --color-accent-ink:     #06101c;
    --color-accent-muted:   rgba(77, 157, 238, 0.15);
    --color-accent-border:  rgba(77, 157, 238, 0.42);

    --color-profit:        #2fc48c;
    --color-profit-strong: #52d8a5;
    --color-profit-muted:  rgba(47, 196, 140, 0.15);
    --color-loss:          #f05966;
    --color-loss-strong:   #ff7c86;
    --color-loss-muted:    rgba(240, 89, 102, 0.15);
    --color-warning:       #eaae3b;
    --color-warning-muted: rgba(234, 174, 59, 0.15);
    --color-info:          #4d9dee;
    --color-info-muted:    rgba(77, 157, 238, 0.15);
    --color-neutral:       #848c98;

    --color-text-primary:   #edf0f4;
    --color-text-secondary: #a5adb9;
    --color-text-tertiary:  #8b939e;
    --color-text-disabled:  #4c545e;

    --chart-1: #4d9dee;
    --chart-2: #59c2e0;
    --chart-3: #2fc48c;
    --chart-4: #b98ae8;
    --chart-5: #f09055;
    --chart-grid: rgba(255, 255, 255, 0.07);
    --chart-axis: #7d8590;
    --chart-area-from: rgba(77, 157, 238, 0.20);
    --chart-area-to:   rgba(77, 157, 238, 0.00);

    --bg-wash-a:    rgba(77, 157, 238, 0.14);
    --bg-wash-b:    rgba(47, 196, 140, 0.084);

    --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);
}

/* ---- DAYLIGHT (cool blue, the bluest of the light set) -------------------- */
[data-theme="daylight"] {
    color-scheme: light;

    --color-void:        #e8eef8;
    --color-surface-0:   #f3f7fd;
    --color-surface-1:   #ffffff;
    --color-surface-2:   #ffffff;
    --color-surface-3:   #dbe4f3;
    --color-surface-inset:#f3f7fd;

    --color-border-subtle: rgba(16, 32, 64, 0.10);
    --color-border-mid:    rgba(16, 32, 64, 0.17);
    --color-border-strong: rgba(16, 32, 64, 0.27);

    --color-accent-primary: #1d63d8;
    --color-accent-glow:    #2f77ee;
    --color-accent-deep:    #164ba8;
    --color-accent-ink:     #ffffff;
    --color-accent-muted:   rgba(29, 99, 216, 0.10);
    --color-accent-border:  rgba(29, 99, 216, 0.38);

    --color-profit:        #067647;
    --color-profit-strong: #045c37;
    --color-profit-muted:  rgba(6, 118, 71, 0.11);
    --color-loss:          #b42318;
    --color-loss-strong:   #912018;
    --color-loss-muted:    rgba(180, 35, 24, 0.10);
    --color-warning:       #b54708;
    --color-warning-muted: rgba(181, 71, 8, 0.12);
    --color-info:          #0a68ad;
    --color-info-muted:    rgba(10, 104, 173, 0.10);
    --color-neutral:       #5f6b80;

    --color-text-primary:   #0f1a2b;
    --color-text-secondary: #44506a;
    --color-text-tertiary:  #57647d;
    --color-text-disabled:  #94a0b5;

    --chart-1: #1d63d8;
    --chart-2: #0b8fb5;
    --chart-3: #067647;
    --chart-4: #7839ee;
    --chart-5: #d1620a;
    --chart-grid: rgba(16, 32, 64, 0.09);
    --chart-axis: #63708a;
    --chart-area-from: rgba(29, 99, 216, 0.16);
    --chart-area-to:   rgba(29, 99, 216, 0.00);

    --bg-wash-a:    rgba(29, 99, 216, 0.09);
    --bg-wash-b:    rgba(11, 143, 181, 0.06);

    --shadow-sm:    0 1px 2px rgba(16, 32, 64, 0.07);
    --shadow-card:  0 1px 2px rgba(16, 32, 64, 0.06);
    --shadow-raised:0 4px 12px rgba(16, 32, 64, 0.09);
    --shadow-float: 0 12px 32px rgba(16, 32, 64, 0.15);
    --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:   #08090b;
    --color-surface-1:   #0e1113;
    --color-surface-2:   #161a1e;
    --color-surface-3:   #212730;
    --color-surface-inset:#050607;

    --color-border-subtle: rgba(255, 255, 255, 0.11);
    --color-border-mid:    rgba(255, 255, 255, 0.18);
    --color-border-strong: rgba(255, 255, 255, 0.28);

    --color-accent-primary: #1fdccd;
    --color-accent-glow:    #5cf0e2;
    --color-accent-deep:    #12988d;
    --color-accent-ink:     #001513;
    --color-accent-muted:   rgba(31, 220, 205, 0.14);
    --color-accent-border:  rgba(31, 220, 205, 0.42);

    --color-profit:        #23d693;
    --color-profit-strong: #4ae5ab;
    --color-profit-muted:  rgba(35, 214, 147, 0.15);
    --color-loss:          #ff4d5b;
    --color-loss-strong:   #ff7681;
    --color-loss-muted:    rgba(255, 77, 91, 0.15);
    --color-warning:       #ffc53d;
    --color-warning-muted: rgba(255, 197, 61, 0.15);
    --color-info:          #4da6ff;
    --color-info-muted:    rgba(77, 166, 255, 0.15);
    --color-neutral:       #7b838e;

    --color-text-primary:   #f4f7fa;
    --color-text-secondary: #9aa3ad;
    --color-text-tertiary:  #838d98;
    --color-text-disabled:  #464e57;

    --chart-1: #1fdccd;
    --chart-2: #4da6ff;
    --chart-3: #23d693;
    --chart-4: #c98cff;
    --chart-5: #ff9147;
    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-axis: #757d88;
    --chart-area-from: rgba(31, 220, 205, 0.20);
    --chart-area-to:   rgba(31, 220, 205, 0.00);

    /* Truest black stays truest black: the grid is the only figure, and the
       washes barely lift off it — a wide gradient over #000 is where OLED
       banding shows. */
    --bg-wash-a:    rgba(31, 220, 205, 0.098);
    --bg-wash-b:    rgba(77, 166, 255, 0.07);

    --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:        #181825;
    --color-surface-0:   #1e1e2e;
    --color-surface-1:   #26263a;
    --color-surface-2:   #302f47;
    --color-surface-3:   #3c3b57;
    --color-surface-inset:#131320;

    --color-border-subtle: rgba(205, 214, 244, 0.10);
    --color-border-mid:    rgba(205, 214, 244, 0.17);
    --color-border-strong: rgba(205, 214, 244, 0.27);

    --color-accent-primary: #cba6f7;
    --color-accent-glow:    #ddbcff;
    --color-accent-deep:    #9a6ee0;
    --color-accent-ink:     #16121f;
    --color-accent-muted:   rgba(203, 166, 247, 0.16);
    --color-accent-border:  rgba(203, 166, 247, 0.42);

    --color-profit:        #8fe08a;
    --color-profit-strong: #a8ec9f;
    --color-profit-muted:  rgba(143, 224, 138, 0.15);
    --color-loss:          #f37799;
    --color-loss-strong:   #f795b0;
    --color-loss-muted:    rgba(243, 119, 153, 0.15);
    --color-warning:       #f9df9a;
    --color-warning-muted: rgba(249, 223, 154, 0.15);
    --color-info:          #82b1ff;
    --color-info-muted:    rgba(130, 177, 255, 0.15);
    --color-neutral:       #8b90ab;

    --color-text-primary:   #d8e0f7;
    --color-text-secondary: #b0b8d4;
    --color-text-tertiary:  #969db8;
    --color-text-disabled:  #5b5f78;

    --chart-1: #cba6f7;
    --chart-2: #82b1ff;
    --chart-3: #8fe08a;
    --chart-4: #f5aede;
    --chart-5: #fbaf76;
    --chart-grid: rgba(205, 214, 244, 0.08);
    --chart-axis: #8b90ab;
    --chart-area-from: rgba(203, 166, 247, 0.22);
    --chart-area-to:   rgba(203, 166, 247, 0.00);

    --bg-wash-a:    rgba(203, 166, 247, 0.154);
    --bg-wash-b:    rgba(130, 177, 255, 0.098);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.36);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.34);
    --shadow-raised:0 6px 20px rgba(0, 0, 0, 0.40);
    --shadow-float: 0 16px 44px rgba(0, 0, 0, 0.52);
    --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:        #08181e;
    --color-surface-0:   #0d2129;
    --color-surface-1:   #122b35;
    --color-surface-2:   #1a3946;
    --color-surface-3:   #244a5a;
    --color-surface-inset:#061318;

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

    --color-accent-primary: #38c9e3;
    --color-accent-glow:    #62e2f5;
    --color-accent-deep:    #1d8ba5;
    --color-accent-ink:     #02151b;
    --color-accent-muted:   rgba(56, 201, 227, 0.15);
    --color-accent-border:  rgba(56, 201, 227, 0.42);

    --color-profit:        #2fd0a0;
    --color-profit-strong: #52e0b5;
    --color-profit-muted:  rgba(47, 208, 160, 0.15);
    --color-loss:          #f4626f;
    --color-loss-strong:   #ff848d;
    --color-loss-muted:    rgba(244, 98, 111, 0.15);
    --color-warning:       #f2bb4c;
    --color-warning-muted: rgba(242, 187, 76, 0.15);
    --color-info:          #56aef0;
    --color-info-muted:    rgba(86, 174, 240, 0.15);
    --color-neutral:       #86a0ab;

    --color-text-primary:   #e6f3f8;
    --color-text-secondary: #a3bbc5;
    --color-text-tertiary:  #8aa3ad;
    --color-text-disabled:  #4b5f6a;

    --chart-1: #38c9e3;
    --chart-2: #56aef0;
    --chart-3: #2fd0a0;
    --chart-4: #bf8ae0;
    --chart-5: #f0925a;
    --chart-grid: rgba(190, 230, 240, 0.08);
    --chart-axis: #7d959f;
    --chart-area-from: rgba(56, 201, 227, 0.22);
    --chart-area-to:   rgba(56, 201, 227, 0.00);

    --bg-wash-a:    rgba(56, 201, 227, 0.154);
    --bg-wash-b:    rgba(47, 208, 160, 0.098);

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

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

    --color-void:        #f0e6da;
    --color-surface-0:   #f9f2e9;
    --color-surface-1:   #fffcf8;
    --color-surface-2:   #ffffff;
    --color-surface-3:   #e6d9c8;
    --color-surface-inset:#faf5ee;

    --color-border-subtle: rgba(74, 50, 28, 0.11);
    --color-border-mid:    rgba(74, 50, 28, 0.18);
    --color-border-strong: rgba(74, 50, 28, 0.28);

    --color-accent-primary: #ab3f18;
    --color-accent-glow:    #c04a1d;
    --color-accent-deep:    #86300f;
    --color-accent-ink:     #fff7f2;
    --color-accent-muted:   rgba(171, 63, 24, 0.11);
    --color-accent-border:  rgba(171, 63, 24, 0.38);

    --color-profit:        #0c6b44;
    --color-profit-strong: #085534;
    --color-profit-muted:  rgba(12, 107, 68, 0.11);
    --color-loss:          #a8231a;
    --color-loss-strong:   #8a1d15;
    --color-loss-muted:    rgba(168, 35, 26, 0.10);
    --color-warning:       #8e5206;
    --color-warning-muted: rgba(142, 82, 6, 0.12);
    --color-info:          #1f5fae;
    --color-info-muted:    rgba(31, 95, 174, 0.10);
    --color-neutral:       #6f6355;

    --color-text-primary:   #271f17;
    --color-text-secondary: #544a3d;
    --color-text-tertiary:  #665b4c;
    --color-text-disabled:  #b0a48f;

    --chart-1: #ab3f18;
    --chart-2: #1f5fae;
    --chart-3: #0c6b44;
    --chart-4: #7839ee;
    --chart-5: #8b5c14;
    --chart-grid: rgba(74, 50, 28, 0.09);
    --chart-axis: #6c6152;
    --chart-area-from: rgba(171, 63, 24, 0.16);
    --chart-area-to:   rgba(171, 63, 24, 0.00);

    --bg-wash-a:    rgba(171, 63, 24, 0.09);
    --bg-wash-b:    rgba(31, 95, 174, 0.05);

    --shadow-sm:    0 1px 2px rgba(64, 44, 24, 0.07);
    --shadow-card:  0 1px 2px rgba(64, 44, 24, 0.06);
    --shadow-raised:0 4px 12px rgba(64, 44, 24, 0.10);
    --shadow-float: 0 12px 32px rgba(64, 44, 24, 0.16);
    --ring-focus:   0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-accent-primary);
}

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

    --color-void:        #e6f1ec;
    --color-surface-0:   #f2f9f5;
    --color-surface-1:   #fdfffe;
    --color-surface-2:   #ffffff;
    --color-surface-3:   #dbe9e2;
    --color-surface-inset:#f3faf6;

    --color-border-subtle: rgba(6, 48, 34, 0.11);
    --color-border-mid:    rgba(6, 48, 34, 0.18);
    --color-border-strong: rgba(6, 48, 34, 0.28);

    /* Accent and money are both green here, which is the theme's whole idea —
       so they are held apart by hue as well as lightness: the accent is teal,
       the money is forest. A P&L figure has to read as money, not as a link. */
    --color-accent-primary: #067165;
    --color-accent-glow:    #08897a;
    --color-accent-deep:    #04564d;
    --color-accent-ink:     #ffffff;
    --color-accent-muted:   rgba(6, 113, 101, 0.11);
    --color-accent-border:  rgba(6, 113, 101, 0.38);

    --color-profit:        #17683f;
    --color-profit-strong: #105231;
    --color-profit-muted:  rgba(23, 104, 63, 0.11);
    --color-loss:          #b42318;
    --color-loss-strong:   #912018;
    --color-loss-muted:    rgba(180, 35, 24, 0.10);
    --color-warning:       #965306;
    --color-warning-muted: rgba(150, 83, 6, 0.12);
    --color-info:          #17639e;
    --color-info-muted:    rgba(23, 99, 158, 0.10);
    --color-neutral:       #5c6d65;

    --color-text-primary:   #0d1c16;
    --color-text-secondary: #43534c;
    --color-text-tertiary:  #536159;
    --color-text-disabled:  #a1b0a8;

    --chart-1: #067165;
    --chart-2: #17639e;
    --chart-3: #4d8b2f;
    --chart-4: #7839ee;
    --chart-5: #c4320a;
    --chart-grid: rgba(6, 48, 34, 0.09);
    --chart-axis: #5b6b63;
    --chart-area-from: rgba(6, 113, 101, 0.16);
    --chart-area-to:   rgba(6, 113, 101, 0.00);

    --bg-wash-a:    rgba(6, 113, 101, 0.09);
    --bg-wash-b:    rgba(77, 139, 47, 0.05);

    --shadow-sm:    0 1px 2px rgba(8, 44, 32, 0.07);
    --shadow-card:  0 1px 2px rgba(8, 44, 32, 0.06);
    --shadow-raised:0 4px 12px rgba(8, 44, 32, 0.10);
    --shadow-float: 0 12px 32px rgba(8, 44, 32, 0.16);
    --ring-focus:   0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-accent-primary);
}

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

    --color-void:        #efeafb;
    --color-surface-0:   #f7f3fe;
    --color-surface-1:   #fefdff;
    --color-surface-2:   #ffffff;
    --color-surface-3:   #e4dcf7;
    --color-surface-inset:#f8f5fe;

    --color-border-subtle: rgba(58, 36, 96, 0.11);
    --color-border-mid:    rgba(58, 36, 96, 0.18);
    --color-border-strong: rgba(58, 36, 96, 0.28);

    --color-accent-primary: #6532c4;
    --color-accent-glow:    #7845d8;
    --color-accent-deep:    #4d2599;
    --color-accent-ink:     #ffffff;
    --color-accent-muted:   rgba(101, 50, 196, 0.10);
    --color-accent-border:  rgba(101, 50, 196, 0.38);

    --color-profit:        #067647;
    --color-profit-strong: #045c37;
    --color-profit-muted:  rgba(6, 118, 71, 0.11);
    --color-loss:          #b42318;
    --color-loss-strong:   #912018;
    --color-loss-muted:    rgba(180, 35, 24, 0.10);
    --color-warning:       #b54708;
    --color-warning-muted: rgba(181, 71, 8, 0.12);
    --color-info:          #4451cf;
    --color-info-muted:    rgba(68, 81, 207, 0.10);
    --color-neutral:       #6c6383;

    --color-text-primary:   #1a1433;
    --color-text-secondary: #4b4368;
    --color-text-tertiary:  #5c547a;
    --color-text-disabled:  #a49dba;

    --chart-1: #6532c4;
    --chart-2: #4451cf;
    --chart-3: #067647;
    --chart-4: #c11574;
    --chart-5: #c4320a;
    --chart-grid: rgba(58, 36, 96, 0.09);
    --chart-axis: #635b7b;
    --chart-area-from: rgba(101, 50, 196, 0.16);
    --chart-area-to:   rgba(101, 50, 196, 0.00);

    --bg-wash-a:    rgba(101, 50, 196, 0.09);
    --bg-wash-b:    rgba(193, 21, 116, 0.05);

    --shadow-sm:    0 1px 2px rgba(40, 26, 72, 0.07);
    --shadow-card:  0 1px 2px rgba(40, 26, 72, 0.06);
    --shadow-raised:0 4px 12px rgba(40, 26, 72, 0.10);
    --shadow-float: 0 12px 32px rgba(40, 26, 72, 0.16);
    --ring-focus:   0 0 0 2px var(--color-surface-1), 0 0 0 4px var(--color-accent-primary);
}

/* ---- SUNSET (warm dark, coral) ------------------------------------------- */
[data-theme="sunset"] {
    color-scheme: dark;

    --color-void:        #17100f;
    --color-surface-0:   #1d1413;
    --color-surface-1:   #241917;
    --color-surface-2:   #30201e;
    --color-surface-3:   #3d2926;
    --color-surface-inset:#120c0b;

    --color-border-subtle: rgba(255, 235, 225, 0.09);
    --color-border-mid:    rgba(255, 235, 225, 0.15);
    --color-border-strong: rgba(255, 235, 225, 0.24);

    --color-accent-primary: #ff7a59;
    --color-accent-glow:    #ff9a7d;
    --color-accent-deep:    #c9503a;
    --color-accent-ink:     #1c0805;
    --color-accent-muted:   rgba(255, 122, 89, 0.15);
    --color-accent-border:  rgba(255, 122, 89, 0.42);

    --color-profit:        #3fc99a;
    --color-profit-strong: #5fdcb1;
    --color-profit-muted:  rgba(63, 201, 154, 0.15);
    --color-loss:          #ff5c72;
    --color-loss-strong:   #ff8090;
    --color-loss-muted:    rgba(255, 92, 114, 0.15);
    --color-warning:       #ffb648;
    --color-warning-muted: rgba(255, 182, 72, 0.15);
    --color-info:          #7fb2ff;
    --color-info-muted:    rgba(127, 178, 255, 0.15);
    --color-neutral:       #9c8781;

    --color-text-primary:   #f7ece7;
    --color-text-secondary: #c2a89f;
    --color-text-tertiary:  #a48d85;
    --color-text-disabled:  #5d4a45;

    --chart-1: #ff7a59;
    --chart-2: #7fb2ff;
    --chart-3: #3fc99a;
    --chart-4: #d98ae0;
    --chart-5: #ffb648;
    --chart-grid: rgba(255, 235, 225, 0.07);
    --chart-axis: #94807a;
    --chart-area-from: rgba(255, 122, 89, 0.22);
    --chart-area-to:   rgba(255, 122, 89, 0.00);

    --bg-wash-a:    rgba(255, 122, 89, 0.13);
    --bg-wash-b:    rgba(127, 178, 255, 0.07);

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

/* ---- ESPRESSO (deep brown dark, caramel) --------------------------------- */
[data-theme="espresso"] {
    color-scheme: dark;

    --color-void:        #17120e;
    --color-surface-0:   #1d1712;
    --color-surface-1:   #241d17;
    --color-surface-2:   #30271f;
    --color-surface-3:   #3d3228;
    --color-surface-inset:#120e0a;

    --color-border-subtle: rgba(255, 240, 220, 0.09);
    --color-border-mid:    rgba(255, 240, 220, 0.15);
    --color-border-strong: rgba(255, 240, 220, 0.24);

    --color-accent-primary: #dca469;
    --color-accent-glow:    #efbc86;
    --color-accent-deep:    #a3743f;
    --color-accent-ink:     #1a1108;
    --color-accent-muted:   rgba(220, 164, 105, 0.15);
    --color-accent-border:  rgba(220, 164, 105, 0.42);

    --color-profit:        #58c98f;
    --color-profit-strong: #74dba7;
    --color-profit-muted:  rgba(88, 201, 143, 0.15);
    --color-loss:          #ef6b6b;
    --color-loss-strong:   #f78a8a;
    --color-loss-muted:    rgba(239, 107, 107, 0.15);
    --color-warning:       #e0b451;
    --color-warning-muted: rgba(224, 180, 81, 0.15);
    --color-info:          #8fb4e0;
    --color-info-muted:    rgba(143, 180, 224, 0.15);
    --color-neutral:       #99897a;

    --color-text-primary:   #f2e9df;
    --color-text-secondary: #bfae9c;
    --color-text-tertiary:  #a09080;
    --color-text-disabled:  #574c40;

    --chart-1: #dca469;
    --chart-2: #8fb4e0;
    --chart-3: #58c98f;
    --chart-4: #c294d4;
    --chart-5: #ef8f5c;
    --chart-grid: rgba(255, 240, 220, 0.07);
    --chart-axis: #8d7e6f;
    --chart-area-from: rgba(220, 164, 105, 0.20);
    --chart-area-to:   rgba(220, 164, 105, 0.00);

    --bg-wash-a:    rgba(220, 164, 105, 0.12);
    --bg-wash-b:    rgba(143, 180, 224, 0.07);

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

/* ---- AURORA (deep night sky, violet accent) ------------------------------ */
[data-theme="aurora"] {
    color-scheme: dark;

    --color-void:        #0a1420;
    --color-surface-0:   #0e1a29;
    --color-surface-1:   #132132;
    --color-surface-2:   #1b2c42;
    --color-surface-3:   #253854;
    --color-surface-inset:#081120;

    --color-border-subtle: rgba(200, 230, 255, 0.10);
    --color-border-mid:    rgba(200, 230, 255, 0.16);
    --color-border-strong: rgba(200, 230, 255, 0.26);

    --color-accent-primary: #a78bfa;
    --color-accent-glow:    #c4b0ff;
    --color-accent-deep:    #7c5cd6;
    --color-accent-ink:     #0d0820;
    --color-accent-muted:   rgba(167, 139, 250, 0.16);
    --color-accent-border:  rgba(167, 139, 250, 0.42);

    --color-profit:        #4fd8a8;
    --color-profit-strong: #6fe6bd;
    --color-profit-muted:  rgba(79, 216, 168, 0.15);
    --color-loss:          #ff5f7a;
    --color-loss-strong:   #ff8296;
    --color-loss-muted:    rgba(255, 95, 122, 0.15);
    --color-warning:       #f5c451;
    --color-warning-muted: rgba(245, 196, 81, 0.15);
    --color-info:          #62c8ff;
    --color-info-muted:    rgba(98, 200, 255, 0.15);
    --color-neutral:       #8798ae;

    --color-text-primary:   #e7f0fa;
    --color-text-secondary: #a4b6cc;
    --color-text-tertiary:  #8a9cb4;
    --color-text-disabled:  #4a5a70;

    --chart-1: #a78bfa;
    --chart-2: #62c8ff;
    --chart-3: #4fd8a8;
    --chart-4: #f57fb6;
    --chart-5: #f5c451;
    --chart-grid: rgba(200, 230, 255, 0.08);
    --chart-axis: #7d8ea4;
    --chart-area-from: rgba(167, 139, 250, 0.22);
    --chart-area-to:   rgba(167, 139, 250, 0.00);

    --bg-wash-a:    rgba(167, 139, 250, 0.14);
    --bg-wash-b:    rgba(79, 216, 168, 0.08);

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

/* ---- PORCELAIN (achromatic, ink accent) ---------------------------------- */
[data-theme="porcelain"] {
    color-scheme: light;

    /* The one light theme with no hue at all: a grey page, a white card and an
       ink-black accent. It is here so that "light" does not have to mean
       "tinted" — and so the other five have something to be different from. */
    --color-void:        #ededed;
    --color-surface-0:   #f7f7f7;
    --color-surface-1:   #ffffff;
    --color-surface-2:   #ffffff;
    --color-surface-3:   #e1e1e1;
    --color-surface-inset:#f7f7f7;

    --color-border-subtle: rgba(0, 0, 0, 0.11);
    --color-border-mid:    rgba(0, 0, 0, 0.18);
    --color-border-strong: rgba(0, 0, 0, 0.28);

    --color-accent-primary: #2f3337;
    --color-accent-glow:    #43484d;
    --color-accent-deep:    #1d2023;
    --color-accent-ink:     #ffffff;
    --color-accent-muted:   rgba(47, 51, 55, 0.08);
    --color-accent-border:  rgba(47, 51, 55, 0.30);

    --color-profit:        #0a6b45;
    --color-profit-strong: #075334;
    --color-profit-muted:  rgba(10, 107, 69, 0.11);
    --color-loss:          #b02218;
    --color-loss-strong:   #8e1c14;
    --color-loss-muted:    rgba(176, 34, 24, 0.10);
    --color-warning:       #9a5a09;
    --color-warning-muted: rgba(154, 90, 9, 0.12);
    --color-info:          #2b5fa8;
    --color-info-muted:    rgba(43, 95, 168, 0.10);
    --color-neutral:       #6b6b6b;

    --color-text-primary:   #131313;
    --color-text-secondary: #454545;
    --color-text-tertiary:  #595959;
    --color-text-disabled:  #9c9c9c;

    --chart-1: #2f3337;
    --chart-2: #2b5fa8;
    --chart-3: #0a6b45;
    --chart-4: #7a4aa5;
    --chart-5: #b45309;
    --chart-grid: rgba(0, 0, 0, 0.09);
    --chart-axis: #6a6a6a;
    --chart-area-from: rgba(47, 51, 55, 0.14);
    --chart-area-to:   rgba(47, 51, 55, 0.00);

    --bg-wash-a:    rgba(47, 51, 55, 0.06);
    --bg-wash-b:    rgba(43, 95, 168, 0.04);

    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-card:  0 1px 2px rgba(0, 0, 0, 0.07);
    --shadow-raised:0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-float: 0 12px 32px rgba(0, 0, 0, 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;
    /* No Vazirmatn here: it is proportional with Latin digit coverage, and a
       numeric column has no Persian glyphs — keeping it out preserves
       tabular-nums alignment in both languages. */
    --font-mono: "JetBrains Mono", "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-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-12: 48px;

    --radius-xs: 6px;
    --radius-sm: 7px;
    /* Aliases: several call sites reached for these names before they existed,
       and an unresolvable var() drops the whole declaration. */
    --radius-md: 10px;
    --shadow-lg: var(--shadow-raised);
    --radius: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --sidebar-w: 232px;
    --sidebar-w-collapsed: 64px;
    --topbar-h: 56px;
    /* The workspace tab strip: 8px of padding over a 38px tab plus its bottom
       hairline. It is sticky under the topbar, so anything that scrolls itself
       into view has to clear BOTH — scroll-margin-top counted only the topbar,
       which is how clicking a row in the settings rail parked its heading
       behind the tabs. */
    --tabs-h: 47px;
    --sticky-h: calc(var(--topbar-h) + var(--tabs-h));

    /* 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);
}

/* Persian is a joined script: positive letter-spacing opens gaps inside
   connected words, so wide tracking is a Latin-only device. */
html[dir="rtl"] {
    --tracking-wide: 0;
    --tracking-wider: 0;
}