/* ============================================================================
   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) --------------------------------
   Retoned 2026-11: the surfaces were a saturated navy and the accent a
   full-chroma periwinkle, so the whole app read as blue light. Surfaces keep
   their cool hue at about half the chroma, the accent is the same indigo
   pulled toward grey, and profit/loss lost their neon (still AA on
   surface-2). Info moved to a sky blue so it no longer reads as the accent.
   The dark themes with neon money (aurora, oceanic, slate, obsidian, forest,
   rose, sunset) got the same treatment on their status colours. */
:root,
[data-theme="midnight"] {
    color-scheme: dark;

    --color-void:        #0b0e15;
    --color-surface-0:   #10141e;
    --color-surface-1:   #161b27;
    --color-surface-2:   #1d2331;
    --color-surface-3:   #282f3f;
    --color-surface-inset:#10131c;

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

    --color-accent-primary: #8293e4;
    --color-accent-glow:    #99a7ea;
    --color-accent-deep:    #6273c6;
    --color-accent-ink:     #0a0d19;
    --color-accent-muted:   rgba(130, 147, 228, 0.16);
    --color-accent-border:  rgba(130, 147, 228, 0.42);

    --color-profit:        #3dbb87;
    --color-profit-strong: #5dcb9c;
    --color-profit-muted:  rgba(61, 187, 135, 0.15);
    --color-loss:          #e8636f;
    --color-loss-strong:   #f0848e;
    --color-loss-muted:    rgba(232, 99, 111, 0.15);
    --color-warning:       #dcaa4f;
    --color-warning-muted: rgba(220, 170, 79, 0.15);
    --color-info:          #62acd8;
    --color-info-muted:    rgba(98, 172, 216, 0.15);
    --color-neutral:       #8790a6;

    --color-text-primary:   #e6e9f2;
    --color-text-secondary: #a9b1c4;
    --color-text-tertiary:  #8f98ad;
    --color-text-disabled:  #4f566a;

    --chart-1: #8293e4;
    --chart-2: #62acd8;
    --chart-3: #3dbb87;
    --chart-4: #c486c0;
    --chart-5: #dd9a5e;
    --chart-grid: rgba(200, 212, 240, 0.07);
    --chart-axis: #7f889e;
    --chart-area-from: rgba(130, 147, 228, 0.22);
    --chart-area-to:   rgba(130, 147, 228, 0.00);

    --bg-wash-a:    rgba(130, 147, 228, 0.12);
    --bg-wash-b:    rgba(61, 187, 135, 0.06);

    --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:  #adb6c7;
    --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:        #43bf80;
    --color-profit-strong: #62d097;
    --color-profit-muted:  rgba(67, 191, 128, 0.15);
    --color-loss:          #e86b74;
    --color-loss-strong:   #f08a91;
    --color-loss-muted:    rgba(232, 107, 116, 0.15);
    --color-warning:       #e39a4c;
    --color-warning-muted: rgba(227, 154, 76, 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: #43bf80;
    --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:        #45be96;
    --color-profit-strong: #63ceaa;
    --color-profit-muted:  rgba(69, 190, 150, 0.15);
    --color-loss:          #ef6a73;
    --color-loss-strong:   #f58a91;
    --color-loss-muted:    rgba(239, 106, 115, 0.15);
    --color-warning:       #e3a957;
    --color-warning-muted: rgba(227, 169, 87, 0.15);
    --color-info:          #8ea3ea;
    --color-info-muted:    rgba(142, 163, 234, 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: #8ea3ea;
    --chart-3: #45be96;
    --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:        #3db98a;
    --color-profit-strong: #5ccaa0;
    --color-profit-muted:  rgba(61, 185, 138, 0.15);
    --color-loss:          #ee6e78;
    --color-loss-strong:   #f58d95;
    --color-loss-muted:    rgba(238, 110, 120, 0.15);
    --color-warning:       #deaa4c;
    --color-warning-muted: rgba(222, 170, 76, 0.15);
    --color-info:          #5fb3cf;
    --color-info-muted:    rgba(95, 179, 207, 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: #5fb3cf;
    --chart-3: #3db98a;
    --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: #2fcbbf;
    --color-accent-glow:    #5ddcd2;
    --color-accent-deep:    #178f86;
    --color-accent-ink:     #001513;
    --color-accent-muted:   rgba(47, 203, 191, 0.14);
    --color-accent-border:  rgba(47, 203, 191, 0.42);

    --color-profit:        #34c38c;
    --color-profit-strong: #55d3a2;
    --color-profit-muted:  rgba(52, 195, 140, 0.15);
    --color-loss:          #ee5f69;
    --color-loss-strong:   #f5818a;
    --color-loss-muted:    rgba(238, 95, 105, 0.15);
    --color-warning:       #e8b84e;
    --color-warning-muted: rgba(232, 184, 78, 0.15);
    --color-info:          #5fa9e6;
    --color-info-muted:    rgba(95, 169, 230, 0.15);
    --color-neutral:       #7b838e;

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

    --chart-1: #2fcbbf;
    --chart-2: #5fa9e6;
    --chart-3: #34c38c;
    --chart-4: #c98cff;
    --chart-5: #ff9147;
    --chart-grid: rgba(255, 255, 255, 0.08);
    --chart-axis: #757d88;
    --chart-area-from: rgba(47, 203, 191, 0.20);
    --chart-area-to:   rgba(47, 203, 191, 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: #45bfd6;
    --color-accent-glow:    #6dd3e6;
    --color-accent-deep:    #2588a0;
    --color-accent-ink:     #02151b;
    --color-accent-muted:   rgba(69, 191, 214, 0.15);
    --color-accent-border:  rgba(69, 191, 214, 0.42);

    --color-profit:        #3cc39a;
    --color-profit-strong: #5cd3ae;
    --color-profit-muted:  rgba(60, 195, 154, 0.15);
    --color-loss:          #ef7680;
    --color-loss-strong:   #f5939b;
    --color-loss-muted:    rgba(239, 118, 128, 0.15);
    --color-warning:       #e9b75a;
    --color-warning-muted: rgba(233, 183, 90, 0.15);
    --color-info:          #68ade0;
    --color-info-muted:    rgba(104, 173, 224, 0.15);
    --color-neutral:       #86a0ab;

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

    --chart-1: #45bfd6;
    --chart-2: #68ade0;
    --chart-3: #3cc39a;
    --chart-4: #bf8ae0;
    --chart-5: #f0925a;
    --chart-grid: rgba(190, 230, 240, 0.08);
    --chart-axis: #7d959f;
    --chart-area-from: rgba(69, 191, 214, 0.22);
    --chart-area-to:   rgba(69, 191, 214, 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: #f08262;
    --color-accent-glow:    #f69d82;
    --color-accent-deep:    #c4573f;
    --color-accent-ink:     #1c0805;
    --color-accent-muted:   rgba(240, 130, 98, 0.15);
    --color-accent-border:  rgba(240, 130, 98, 0.42);

    --color-profit:        #47bd94;
    --color-profit-strong: #66cda9;
    --color-profit-muted:  rgba(71, 189, 148, 0.15);
    --color-loss:          #ec5f6f;
    --color-loss-strong:   #f3828e;
    --color-loss-muted:    rgba(236, 95, 111, 0.15);
    --color-warning:       #e9ae55;
    --color-warning-muted: rgba(233, 174, 85, 0.15);
    --color-info:          #85aee8;
    --color-info-muted:    rgba(133, 174, 232, 0.15);
    --color-neutral:       #9c8781;

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

    --chart-1: #f08262;
    --chart-2: #85aee8;
    --chart-3: #47bd94;
    --chart-4: #d98ae0;
    --chart-5: #e9ae55;
    --chart-grid: rgba(255, 235, 225, 0.07);
    --chart-axis: #94807a;
    --chart-area-from: rgba(240, 130, 98, 0.22);
    --chart-area-to:   rgba(240, 130, 98, 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: #a28ff0;
    --color-accent-glow:    #bcadf7;
    --color-accent-deep:    #7a64cf;
    --color-accent-ink:     #0d0820;
    --color-accent-muted:   rgba(162, 143, 240, 0.16);
    --color-accent-border:  rgba(162, 143, 240, 0.42);

    --color-profit:        #4cc89c;
    --color-profit-strong: #6bd6b0;
    --color-profit-muted:  rgba(76, 200, 156, 0.15);
    --color-loss:          #ec6a80;
    --color-loss-strong:   #f38a9b;
    --color-loss-muted:    rgba(236, 106, 128, 0.15);
    --color-warning:       #e6bb57;
    --color-warning-muted: rgba(230, 187, 87, 0.15);
    --color-info:          #6cbfe6;
    --color-info-muted:    rgba(108, 191, 230, 0.15);
    --color-neutral:       #8798ae;

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

    --chart-1: #a28ff0;
    --chart-2: #6cbfe6;
    --chart-3: #4cc89c;
    --chart-4: #f57fb6;
    --chart-5: #e6bb57;
    --chart-grid: rgba(200, 230, 255, 0.08);
    --chart-axis: #7d8ea4;
    --chart-area-from: rgba(162, 143, 240, 0.22);
    --chart-area-to:   rgba(162, 143, 240, 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);
}

/* ---- Persian text face ---------------------------------------------------
   Sahel, by Saber Rastikerdar, SIL Open Font License 1.1 - the licence ships
   beside the file in fonts/Sahel-OFL.txt, which is what that licence asks for.

   The variable cut, so one 38KB request covers every weight the interface
   uses; the five static weights would have been 110KB and still missed 500
   and 800. swap, because a page of Persian rendered in the system font for a
   moment beats a page of nothing. */
@font-face {
    font-family: "Sahel";
    src: url("../../fonts/Sahel-VF.woff2") format("woff2-variations");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* ---- Type, space, radius (shared) ---------------------------------------- */
:root {
    /* The Persian face sits behind the Latin one rather than beside it: CSS
       falls back per glyph, so Latin keeps Inter while any Persian character
       — an analysis, a note, a settings label — picks up Sahel even when
       the interface itself is in English.

       Sahel is served from this host, not from Google, which is also why it
       is first: a reader in Iran gets the Persian face from the same server
       that sent them the page, rather than waiting on fonts.googleapis.com to
       decide whether it is reachable today. Vazirmatn stays behind it as the
       fallback for the seconds before the file lands, or if it never does. */
    --font-display: "Inter", "Sahel", "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;
}