/* DEJAVU — design tokens and themes.
   Every colour used by app.css is a custom property defined here. Themes are scoped by
   [data-theme] (+ [data-mode] where a theme offers both modes), so a nested element with
   its own data-theme (e.g. the theme gallery previews) renders that theme independently.
   Customisation layers: [data-density], [data-radius], [data-font], [data-sidebar].
   Validated custom accents arrive as inline --accent / --accent-2 / --accent-ink on <html>. */

/* ================================================================ structural tokens */
:root, [data-theme] {
  --radius: 14px; --radius-sm: 10px; --radius-xs: 8px; --radius-pill: 30px;
  --pad-card: 16px 18px; --pad-head: 14px 18px; --pad-cell: 10px 12px; --ctl-h: 40px; --gap: 16px;
  --pad-content: 24px 28px 40px; --nav-item-pad: 9px 10px; --nav-tile: 36px;
  --fs-scale: 1;
  --sidebar-w: 288px;
  --font: "Inter", "Vazirmatn", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-rtl: "Vazirmatn", "Noto Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
}
[data-density="compact"] {
  --pad-card: 11px 13px; --pad-head: 10px 14px; --pad-cell: 6px 10px; --ctl-h: 34px; --gap: 11px;
  --pad-content: 16px 20px 28px; --nav-item-pad: 6px 9px; --nav-tile: 30px;
}
[data-radius="subtle"] { --radius: 7px; --radius-sm: 6px; --radius-xs: 4px; --radius-pill: 6px; }
[data-font="sm"] { --fs-scale: .93; }
[data-font="lg"] { --fs-scale: 1.08; }

/* ================================================================ DEJAVU Light (default) */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #eef0f3; --surface: #ffffff; --surface-2: #f7f8fa; --surface-3: #fafbfc;
  --line: #e2e5ea; --line-strong: #cfd4db;
  --text: #14171c; --text-2: #4a525e; --text-3: #737b87;
  --ink: #0f1216; --ink-fg: #ffffff; --ink-hover: #262c34;
  --link: #2457c5;
  --accent: #0f9d6c; --accent-ink: #ffffff; --accent-2: #1d232b;
  --green: #12805c; --green-bg: #e7f5ef; --green-line: #b9e2d0; --green-text: #0c5a40;
  --amber: #a86500; --amber-bg: #fff4e0; --amber-line: #f3d39b; --amber-text: #7a4a00;
  --red: #c0352b; --red-bg: #fdecea; --red-line: #f3c2bd; --red-text: #8d241c;
  --blue: #2457c5; --blue-bg: #eaf0fd; --blue-line: #c9d7f7; --blue-text: #1b3f8f;
  --row-warn: #fffaf0; --row-bad: #fff6f5; --muted-bg: #f0f1f3;
  --input-bg: #ffffff; --focus-ring: rgba(15, 18, 22, .12);
  --cur-iqd-bg: #eef1f5; --cur-iqd-fg: #2b3440; --cur-iqd-line: #dde2e9;
  --cur-usd-bg: #e9f6ef; --cur-usd-fg: #11704f; --cur-usd-line: #c3e6d4;
  --chart-track: #edf0f3; --chart-dot: #ffffff;
  --hero-1: #11151a; --hero-2: #1b2027; --hero-fg: #f0f2f5; --hero-muted: #8e97a3; --hero-line: #1b2027;
  --topbar-bg: rgba(238, 240, 243, .86);
  --shadow-1: 0 1px 2px rgba(16, 20, 26, .05), 0 1px 1px rgba(16, 20, 26, .03);
  --shadow-2: 0 10px 30px -12px rgba(16, 20, 26, .18), 0 2px 6px rgba(16, 20, 26, .05);
  --overlay: rgba(5, 7, 10, .5);
  /* sidebar */
  --nav-bg: #0b0d10; --nav-bg-2: #12151a; --nav-line: #1f242c; --nav-text: #a9b1bd; --nav-strong: #f2f4f7; --nav-muted: #646d78;
  --nav-hover: #181c22; --nav-tile-bg: #161a20; --nav-tile-line: #222831; --nav-tile-fg: #c7ced8; --nav-tile-hover: #303844;
  --nav-active-bg: #171b21; --nav-active-ring: #262c35; --nav-count-bg: #232932; --nav-count-fg: #d6dbe2;
  --nav-warn-bg: #3a2a10; --nav-warn-fg: #ffcf7a; --nav-scroll: #2a3038;
  --brand-1: #ffffff; --brand-2: #c9d1db; --brand-fg: #0b0d10;
  /* sign-in art */
  --auth-bg: #0b0d10; --auth-fg: #e9ecf1; --auth-muted: #8f99a6; --auth-glow-1: #1a2a24; --auth-glow-2: #16202b; --auth-grid: rgba(255, 255, 255, .035);
}

/* ================================================================ shared dark base */
[data-theme="dark"], [data-theme="midnight"], [data-theme="emerald"][data-mode="dark"], [data-theme="graphite"][data-mode="dark"] {
  color-scheme: dark;
  --green: #3ecf8e; --green-bg: rgba(62, 207, 142, .11); --green-line: rgba(62, 207, 142, .3); --green-text: #8be6bd;
  --amber: #f2b44b; --amber-bg: rgba(242, 180, 75, .11); --amber-line: rgba(242, 180, 75, .3); --amber-text: #f8d390;
  --red: #ff6b5e; --red-bg: rgba(255, 107, 94, .11); --red-line: rgba(255, 107, 94, .32); --red-text: #ffa59d;
  --blue: #7aa7ff; --blue-bg: rgba(122, 167, 255, .11); --blue-line: rgba(122, 167, 255, .3); --blue-text: #b1cbff;
  --row-warn: rgba(242, 180, 75, .06); --row-bad: rgba(255, 107, 94, .07);
  --cur-usd-bg: rgba(62, 207, 142, .12); --cur-usd-fg: #8be6bd; --cur-usd-line: rgba(62, 207, 142, .3);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .01);
  --shadow-2: 0 16px 36px -14px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .35);
  --overlay: rgba(0, 0, 0, .6);
  --auth-grid: rgba(255, 255, 255, .03);
}

/* ================================================================ DEJAVU Dark — black, charcoal, metallic */
[data-theme="dark"] {
  --bg: #0b0c0e; --surface: #141619; --surface-2: #1a1d21; --surface-3: #1e2126;
  --line: #262a30; --line-strong: #353b43;
  --text: #eceef1; --text-2: #b6bcc5; --text-3: #8a919b;
  --ink: #d9dde3; --ink-fg: #0b0c0e; --ink-hover: #f2f4f7;
  --link: #9cbcff;
  --accent: #c3cad4; --accent-ink: #0b0c0e; --accent-2: #8b95a3;
  --muted-bg: #1f2328; --input-bg: #101215; --focus-ring: rgba(217, 221, 227, .2);
  --cur-iqd-bg: #1f2328; --cur-iqd-fg: #cfd4db; --cur-iqd-line: #30353c;
  --chart-track: #23272d; --chart-dot: #141619;
  --hero-1: #1e2126; --hero-2: #2a2e35; --hero-fg: #f4f6f8; --hero-muted: #a0a8b3; --hero-line: #30353c;
  --topbar-bg: rgba(11, 12, 14, .82);
  --nav-bg: #08090b; --nav-bg-2: #0d0f12; --nav-line: #1b1e23; --nav-text: #9aa1ab; --nav-strong: #f2f4f7; --nav-muted: #5c636d;
  --nav-hover: #15181c; --nav-tile-bg: #121418; --nav-tile-line: #22262c; --nav-tile-fg: #c0c6ce; --nav-tile-hover: #3a414b;
  --nav-active-bg: #16191d; --nav-active-ring: #2c3138; --nav-count-bg: #20242a; --nav-count-fg: #d6dbe2;
  --nav-warn-bg: #3a2a10; --nav-warn-fg: #ffcf7a; --nav-scroll: #262a30;
  --brand-1: #f4f6f8; --brand-2: #9aa3ae; --brand-fg: #0b0c0e;
  --auth-bg: #08090b; --auth-fg: #eceef1; --auth-muted: #8a919b; --auth-glow-1: #1d2025; --auth-glow-2: #15181c;
}

/* ================================================================ DEJAVU Midnight — navy control centre */
[data-theme="midnight"] {
  --bg: #0a1020; --surface: #0f172a; --surface-2: #131d33; --surface-3: #17223b;
  --line: #1f2b46; --line-strong: #2b3b5e;
  --text: #e6ecf7; --text-2: #aab7d0; --text-3: #7b8bab;
  --ink: #4c8dff; --ink-fg: #ffffff; --ink-hover: #6aa0ff;
  --link: #8db8ff;
  --accent: #4c8dff; --accent-ink: #ffffff; --accent-2: #7fa8f0;
  --blue: #8db8ff;
  --muted-bg: #172038; --input-bg: #0c1426; --focus-ring: rgba(76, 141, 255, .3);
  --cur-iqd-bg: #18233f; --cur-iqd-fg: #c9d6ef; --cur-iqd-line: #2b3b5e;
  --chart-track: #1a2540; --chart-dot: #0f172a;
  --hero-1: #13234a; --hero-2: #1b3266; --hero-fg: #f2f6ff; --hero-muted: #9fb3dc; --hero-line: #24407e;
  --topbar-bg: rgba(10, 16, 32, .84);
  --nav-bg: #070c18; --nav-bg-2: #0b1222; --nav-line: #17213a; --nav-text: #93a3c4; --nav-strong: #f0f4fc; --nav-muted: #56658a;
  --nav-hover: #101a32; --nav-tile-bg: #0e1730; --nav-tile-line: #1c2a4c; --nav-tile-fg: #b9c8e6; --nav-tile-hover: #2b4170;
  --nav-active-bg: #111d3a; --nav-active-ring: #22345e; --nav-count-bg: #18264a; --nav-count-fg: #d0dcf5;
  --nav-warn-bg: #3a2c12; --nav-warn-fg: #ffcf7a; --nav-scroll: #1f2b46;
  --brand-1: #e9f0ff; --brand-2: #8fb0f0; --brand-fg: #070c18;
  --auth-bg: #070c18; --auth-fg: #e6ecf7; --auth-muted: #8193b8; --auth-glow-1: #142a5c; --auth-glow-2: #0f1d3d;
}

/* ================================================================ DEJAVU Emerald — neutral charcoal, restrained green */
[data-theme="emerald"][data-mode="dark"] {
  --bg: #0c0e0e; --surface: #141716; --surface-2: #191d1b; --surface-3: #1d2220;
  --line: #252b28; --line-strong: #333b37;
  --text: #e9eeeb; --text-2: #b2bcb7; --text-3: #828c87;
  --ink: #e4eae7; --ink-fg: #0c0e0e; --ink-hover: #ffffff;
  --link: #6fd8ad;
  --accent: #10b981; --accent-ink: #04150e; --accent-2: #7d8a84;
  --muted-bg: #1d2220; --input-bg: #101312; --focus-ring: rgba(16, 185, 129, .25);
  --cur-iqd-bg: #1d2220; --cur-iqd-fg: #cdd5d1; --cur-iqd-line: #303835;
  --chart-track: #212624; --chart-dot: #141716;
  --hero-1: #17201c; --hero-2: #1e2b25; --hero-fg: #f1f6f3; --hero-muted: #93a59c; --hero-line: #26352e;
  --topbar-bg: rgba(12, 14, 14, .84);
  --nav-bg: #090b0a; --nav-bg-2: #0e1110; --nav-line: #1a1f1d; --nav-text: #98a39e; --nav-strong: #f0f4f2; --nav-muted: #5a6560;
  --nav-hover: #141816; --nav-tile-bg: #111513; --nav-tile-line: #202724; --nav-tile-fg: #bcc7c2; --nav-tile-hover: #2d3833;
  --nav-active-bg: #121a16; --nav-active-ring: #1f2e27; --nav-count-bg: #1c2320; --nav-count-fg: #d3dcd8;
  --nav-warn-bg: #3a2a10; --nav-warn-fg: #ffcf7a; --nav-scroll: #252b28;
  --brand-1: #eefaf4; --brand-2: #9fc9b5; --brand-fg: #090b0a;
  --auth-bg: #090b0a; --auth-fg: #e9eeeb; --auth-muted: #87938e; --auth-glow-1: #10291e; --auth-glow-2: #141a17;
}
[data-theme="emerald"][data-mode="light"] {
  color-scheme: light;
  --bg: #eef2f0; --surface: #ffffff; --surface-2: #f6f9f7; --surface-3: #f9fbfa;
  --line: #dfe6e2; --line-strong: #c9d3ce;
  --text: #111816; --text-2: #46524d; --text-3: #6c7873;
  --ink: #111816; --ink-fg: #ffffff; --ink-hover: #26302c;
  --link: #0b7a54;
  --accent: #0b8a5f; --accent-ink: #ffffff; --accent-2: #26302c;
  --green: #0b7a54; --green-bg: #e5f4ec; --green-line: #b3dfc8; --green-text: #075238;
  --amber: #a86500; --amber-bg: #fff4e0; --amber-line: #f3d39b; --amber-text: #7a4a00;
  --red: #c0352b; --red-bg: #fdecea; --red-line: #f3c2bd; --red-text: #8d241c;
  --blue: #2457c5; --blue-bg: #eaf0fd; --blue-line: #c9d7f7; --blue-text: #1b3f8f;
  --row-warn: #fffaf0; --row-bad: #fff6f5; --muted-bg: #eef2f0;
  --input-bg: #ffffff; --focus-ring: rgba(11, 138, 95, .18);
  --cur-iqd-bg: #eef2f0; --cur-iqd-fg: #2b3531; --cur-iqd-line: #d9e1dd;
  --cur-usd-bg: #e5f4ec; --cur-usd-fg: #0b6b4a; --cur-usd-line: #b3dfc8;
  --chart-track: #e9eeeb; --chart-dot: #ffffff;
  --hero-1: #0f1714; --hero-2: #16231e; --hero-fg: #f1f6f3; --hero-muted: #8fa198; --hero-line: #16231e;
  --topbar-bg: rgba(238, 242, 240, .86);
  --shadow-1: 0 1px 2px rgba(10, 20, 16, .05), 0 1px 1px rgba(10, 20, 16, .03);
  --shadow-2: 0 10px 30px -12px rgba(10, 20, 16, .18), 0 2px 6px rgba(10, 20, 16, .05);
  --overlay: rgba(5, 10, 8, .45);
  --nav-bg: #0d1110; --nav-bg-2: #121816; --nav-line: #1d2522; --nav-text: #a3aeaa; --nav-strong: #f1f5f3; --nav-muted: #63706a;
  --nav-hover: #172019; --nav-tile-bg: #141b18; --nav-tile-line: #222c28; --nav-tile-fg: #c4ceca; --nav-tile-hover: #31403a;
  --nav-active-bg: #15201b; --nav-active-ring: #24342d; --nav-count-bg: #1f2925; --nav-count-fg: #d6dfdb;
  --nav-warn-bg: #3a2a10; --nav-warn-fg: #ffcf7a; --nav-scroll: #26302c;
  --brand-1: #ffffff; --brand-2: #bfdccd; --brand-fg: #0d1110;
  --auth-bg: #0d1110; --auth-fg: #eaf0ed; --auth-muted: #8a9690; --auth-glow-1: #12301f; --auth-glow-2: #141c19; --auth-grid: rgba(255, 255, 255, .035);
}

/* ================================================================ DEJAVU Graphite — graphite, minimal colour, silver */
[data-theme="graphite"][data-mode="dark"] {
  --bg: #16181b; --surface: #1e2124; --surface-2: #24272b; --surface-3: #292d31;
  --line: #30343a; --line-strong: #3e434b;
  --text: #e7e9ec; --text-2: #b5bac1; --text-3: #8c929b;
  --ink: #c9ced5; --ink-fg: #16181b; --ink-hover: #e3e6ea;
  --link: #b9c3d0;
  --accent: #aeb6c1; --accent-ink: #16181b; --accent-2: #7c8591;
  --green: #5fc29a; --green-text: #9ad8be; --blue: #9db6d6; --blue-text: #c2d2e6;
  --muted-bg: #2a2e33; --input-bg: #1a1c1f; --focus-ring: rgba(174, 182, 193, .22);
  --cur-iqd-bg: #2a2e33; --cur-iqd-fg: #d2d6dc; --cur-iqd-line: #3b4047;
  --cur-usd-bg: rgba(95, 194, 154, .1); --cur-usd-fg: #9ad8be; --cur-usd-line: rgba(95, 194, 154, .28);
  --chart-track: #2b2f34; --chart-dot: #1e2124;
  --hero-1: #2a2e33; --hero-2: #33383e; --hero-fg: #f2f3f5; --hero-muted: #a3a9b1; --hero-line: #3b4047;
  --topbar-bg: rgba(22, 24, 27, .84);
  --nav-bg: #121417; --nav-bg-2: #17191c; --nav-line: #23262a; --nav-text: #9da3ab; --nav-strong: #eef0f2; --nav-muted: #646a73;
  --nav-hover: #1c1f22; --nav-tile-bg: #1a1c20; --nav-tile-line: #2a2d32; --nav-tile-fg: #c3c8ce; --nav-tile-hover: #3c4148;
  --nav-active-bg: #1f2226; --nav-active-ring: #33373d; --nav-count-bg: #282b30; --nav-count-fg: #d6dadf;
  --nav-warn-bg: #3a2a10; --nav-warn-fg: #ffcf7a; --nav-scroll: #30343a;
  --brand-1: #f2f3f5; --brand-2: #a6adb6; --brand-fg: #121417;
  --auth-bg: #121417; --auth-fg: #e7e9ec; --auth-muted: #8c929b; --auth-glow-1: #262a2f; --auth-glow-2: #1c1f22;
}
[data-theme="graphite"][data-mode="light"] {
  color-scheme: light;
  --bg: #e9eaec; --surface: #f8f8f9; --surface-2: #f1f2f4; --surface-3: #f4f5f6;
  --line: #dcdee2; --line-strong: #c6c9cf;
  --text: #1c1f23; --text-2: #4b5058; --text-3: #6e747d;
  --ink: #2a2e34; --ink-fg: #ffffff; --ink-hover: #3d424a;
  --link: #3c5a85;
  --accent: #78808b; --accent-ink: #ffffff; --accent-2: #3a4048;
  --green: #2f7a5c; --green-bg: #e8f2ed; --green-line: #c2dccf; --green-text: #1e5a42;
  --amber: #9a6100; --amber-bg: #fbf1df; --amber-line: #ead09c; --amber-text: #704700;
  --red: #b23a31; --red-bg: #faebe9; --red-line: #edc6c2; --red-text: #84281f;
  --blue: #3c5a85; --blue-bg: #e9eef5; --blue-line: #cbd6e5; --blue-text: #2b4466;
  --row-warn: #fbf7ee; --row-bad: #fbf3f2; --muted-bg: #eceef0;
  --input-bg: #ffffff; --focus-ring: rgba(42, 46, 52, .14);
  --cur-iqd-bg: #eceef0; --cur-iqd-fg: #2c3036; --cur-iqd-line: #d6d9dd;
  --cur-usd-bg: #e8f2ed; --cur-usd-fg: #2f7a5c; --cur-usd-line: #c2dccf;
  --chart-track: #e4e6e9; --chart-dot: #f8f8f9;
  --hero-1: #25292e; --hero-2: #33383e; --hero-fg: #f4f5f6; --hero-muted: #a2a8b0; --hero-line: #33383e;
  --topbar-bg: rgba(233, 234, 236, .86);
  --shadow-1: 0 1px 2px rgba(20, 22, 26, .06), 0 1px 1px rgba(20, 22, 26, .03);
  --shadow-2: 0 10px 30px -12px rgba(20, 22, 26, .2), 0 2px 6px rgba(20, 22, 26, .06);
  --overlay: rgba(10, 11, 13, .45);
  --nav-bg: #1f2226; --nav-bg-2: #25292d; --nav-line: #31353a; --nav-text: #b1b6bd; --nav-strong: #f3f4f6; --nav-muted: #747a83;
  --nav-hover: #2a2e33; --nav-tile-bg: #272a2f; --nav-tile-line: #363a40; --nav-tile-fg: #ccd0d6; --nav-tile-hover: #4a4f57;
  --nav-active-bg: #2b2f34; --nav-active-ring: #3d4248; --nav-count-bg: #33373d; --nav-count-fg: #e0e3e7;
  --nav-warn-bg: #3a2a10; --nav-warn-fg: #ffcf7a; --nav-scroll: #3a3e44;
  --brand-1: #ffffff; --brand-2: #c4c9d0; --brand-fg: #1f2226;
  --auth-bg: #1f2226; --auth-fg: #eceef0; --auth-muted: #9aa0a8; --auth-glow-1: #31363c; --auth-glow-2: #282b30; --auth-grid: rgba(255, 255, 255, .04);
}

/* ================================================================ sidebar appearance override */
[data-sidebar="light"] .sidebar, .sidebar[data-sidebar="light"] {
  --nav-bg: #f7f8fa; --nav-bg-2: #f1f2f5; --nav-line: #e1e4e9; --nav-text: #4b525d; --nav-strong: #12151a; --nav-muted: #8a919b;
  --nav-hover: #e9ecf0; --nav-tile-bg: #ffffff; --nav-tile-line: #dde1e6; --nav-tile-fg: #3a414b; --nav-tile-hover: #b9c0c9;
  --nav-active-bg: #ffffff; --nav-active-ring: #d5dae1; --nav-count-bg: #e6e9ee; --nav-count-fg: #2b323c;
  --nav-warn-bg: #fff1d6; --nav-warn-fg: #8a5300; --nav-scroll: #cfd4db;
  --brand-1: #12151a; --brand-2: #3a414b; --brand-fg: #ffffff;
}
[data-sidebar="dark"] .sidebar, .sidebar[data-sidebar="dark"] {
  --nav-bg: #0b0d10; --nav-bg-2: #12151a; --nav-line: #1f242c; --nav-text: #a9b1bd; --nav-strong: #f2f4f7; --nav-muted: #646d78;
  --nav-hover: #181c22; --nav-tile-bg: #161a20; --nav-tile-line: #222831; --nav-tile-fg: #c7ced8; --nav-tile-hover: #303844;
  --nav-active-bg: #171b21; --nav-active-ring: #262c35; --nav-count-bg: #232932; --nav-count-fg: #d6dbe2; --nav-scroll: #2a3038;
}
[data-sidebar="accent"] .sidebar, .sidebar[data-sidebar="accent"] {
  --nav-bg: color-mix(in srgb, var(--accent) 22%, #07090b);
  --nav-bg-2: color-mix(in srgb, var(--accent) 14%, #07090b);
  --nav-line: color-mix(in srgb, var(--accent) 30%, #1b1f24);
  --nav-hover: color-mix(in srgb, var(--accent) 26%, #101317);
  --nav-tile-bg: color-mix(in srgb, var(--accent) 18%, #0f1215);
  --nav-tile-line: color-mix(in srgb, var(--accent) 34%, #1e2228);
  --nav-active-bg: color-mix(in srgb, var(--accent) 30%, #0d1013);
  --nav-active-ring: color-mix(in srgb, var(--accent) 45%, #1e2228);
  --nav-text: #d5dbe2; --nav-strong: #ffffff; --nav-muted: #9aa3ad; --nav-tile-fg: #e6eaef;
}