/* ==========================================================================
   InfraVault design tokens
   Single source of truth for type, spacing, radii, motion and both themes.
   Components must use these variables — never raw colors.
   Breakpoints (used literally in media queries): 480 · 768 · 1024 · 1280 · 1536
   ========================================================================== */

@font-face { font-family: "YekanBakh"; src: url("../fonts/YekanBakh-300.610ec86b8639.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "YekanBakh"; src: url("../fonts/YekanBakh-400.3e97f961cc8f.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "YekanBakh"; src: url("../fonts/YekanBakh-500.557bd9c064a2.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "YekanBakh"; src: url("../fonts/YekanBakh-600.149bc3e9770e.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "YekanBakh"; src: url("../fonts/YekanBakh-700.8624014195df.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "YekanBakh"; src: url("../fonts/YekanBakh-800.6b14caaeafad.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Typography — YekanBakh FaNum renders Latin digits as Persian; use .mono for technical values. */
  --font-sans: "YekanBakh", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", "SF Mono", Consolas, "Liberation Mono", monospace;

  --fs-2xs: 0.6875rem;  /* 11 */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-md: 0.875rem;    /* 14 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-lg: 1.0625rem;   /* 17 */
  --fs-xl: 1.25rem;     /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: 1.875rem;   /* 30 */
  --fs-4xl: 2.25rem;    /* 36 */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.3;
  --lh-snug: 1.5;
  --lh-base: 1.75;

  /* Spacing — 4px grid */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radii — Monef: soft but not bubbly */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 24px;
  --r-2xl: 30px;
  --r-full: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --dur-4: 520ms;

  /* Layout */
  --shell-gap: 12px;
  --sidebar-w: 272px;
  --sidebar-w-collapsed: 92px;
  --topbar-h: 76px;
  --content-max: 1720px;
  --page-pad: var(--sp-7);
  --control-h: 44px;
  --control-h-sm: 36px;
  --control-h-lg: 52px;

  /* Layers */
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-overlay: 50;
  --z-drawer: 60;
  --z-modal: 70;
  --z-palette: 80;
  --z-toast: 90;
  --z-tooltip: 100;
}

/* ---------- Dark theme (default) — sampled from the Monef reference ---------- */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #1d1c23;
  --bg-glow-1: rgba(109, 98, 240, 0.10);
  --bg-glow-2: rgba(44, 232, 75, 0.045);
  --panel: #16151c;
  --card: #16151c;
  --card-2: #1f1e26;
  --card-3: #27262f;
  --sunken: #121117;

  --border: rgba(255, 255, 255, 0.065);
  --border-strong: rgba(255, 255, 255, 0.11);
  --divider: rgba(255, 255, 255, 0.06);

  --text: #f9f9fa;
  --text-2: #9e9da7;
  --text-3: #6c6b75;
  --text-title: #d4d3da;
  --text-inverse: #0f0e14;

  --chip: rgba(255, 255, 255, 0.07);
  --chip-hover: rgba(255, 255, 255, 0.12);
  --chip-active: #f9f9fa;
  --chip-active-ink: #16151c;

  --accent: #2ce84b;
  --accent-ink: #052a0d;
  --accent-text: #4ef06a;
  --accent-soft: rgba(44, 232, 75, 0.13);
  --accent-glow: rgba(44, 232, 75, 0.35);

  --indigo: #6d62f0;
  --indigo-deep: #4540a7;
  --indigo-text: #a9a1ff;
  --indigo-soft: rgba(109, 98, 240, 0.16);

  /* Semantic tone pairs (badge/chip backgrounds, foregrounds, solid fills) */
  --tone-green-bg: rgba(44, 232, 75, 0.12);     --tone-green-fg: #4ef06a;  --tone-green: #2ce84b;
  --tone-red-bg: rgba(255, 92, 112, 0.13);      --tone-red-fg: #ff7d8d;    --tone-red: #ff5c70;
  --tone-amber-bg: rgba(244, 185, 66, 0.13);    --tone-amber-fg: #f7c866;  --tone-amber: #f4b942;
  --tone-plum-bg: rgba(214, 79, 140, 0.15);     --tone-plum-fg: #f084b4;   --tone-plum: #d64f8c;
  --tone-indigo-bg: rgba(109, 98, 240, 0.16);   --tone-indigo-fg: #a9a1ff; --tone-indigo: #6d62f0;
  --tone-sky-bg: rgba(79, 163, 255, 0.13);      --tone-sky-fg: #8cc3ff;    --tone-sky: #4fa3ff;
  --tone-neutral-bg: rgba(158, 157, 167, 0.13); --tone-neutral-fg: #b9b8c1; --tone-neutral: #8a8994;

  --success: var(--tone-green);
  --warning: var(--tone-amber);
  --danger: var(--tone-red);
  --info: #6c8cff;

  --input-bg: #1c1b22;
  --input-border: rgba(255, 255, 255, 0.08);
  --input-border-hover: rgba(255, 255, 255, 0.16);
  --placeholder: #64636d;

  --hover: rgba(255, 255, 255, 0.035);
  --active: rgba(255, 255, 255, 0.06);
  --row-hover: rgba(255, 255, 255, 0.025);
  --focus-ring: 0 0 0 3px rgba(109, 98, 240, 0.55);
  --focus-ring-danger: 0 0 0 3px rgba(255, 92, 112, 0.45);

  --overlay: rgba(6, 6, 10, 0.62);
  --dropdown-bg: #211f28;
  /* Frosted popovers (menus, hover cards, chart tips): mostly opaque + strong blur, so text stays readable. */
  --popover-bg: color-mix(in srgb, #211f28 84%, transparent);
  --popover-backdrop: blur(22px) saturate(160%);
  /* --tooltip-bg/fg: the ink/paper pair other components borrow (dark ink, light paper in both themes).
     --tooltip-surface: the [data-tip] bubble — raised graphite with a hairline edge, so it stands off
     dark cards (text 11.2:1). */
  --tooltip-bg: #2b2933;
  --tooltip-fg: #f9f9fa;
  --tooltip-surface: #383643;
  --tooltip-ring: rgba(255, 255, 255, 0.1);
  --tooltip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 32px -10px rgba(0, 0, 0, 0.8);

  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -14px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 18px 48px -18px rgba(0, 0, 0, 0.75);
  --shadow-pop: 0 30px 70px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--border-strong);

  /* Monef glass button */
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.035));
  --glass-bg-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.06));
  --glass-border: rgba(255, 255, 255, 0.13);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);

  /* Monef hero (AI-assistant card) — a layered "aurora" surface.
     --hero-bg: single-layer base (also painted alone by the login brand panel and the profile cover).
     --hero-mesh: light layers .card--hero paints over the base (top beam, light cone, corner orbs, halo).
     --hero-fg-2: secondary text (labels, hints, kbd) — ≥ 4.5:1 on the brightest glow.
     --hero-input-*: the glass search pill (.hero-field) with its gradient hairline and focus glow. */
  --hero-bg: linear-gradient(180deg, #17161d 0%, #1a1830 34%, #2a2582 78%, #3b33b8 100%);
  --hero-mesh:
    linear-gradient(90deg, transparent 6%, rgba(169, 161, 255, 0.6) 50%, transparent 94%) top / 100% 1px no-repeat,
    radial-gradient(46% 60% at 50% 0%, rgba(124, 112, 255, 0.17), transparent 72%),
    radial-gradient(38% 70% at 0% 0%, rgba(109, 98, 240, 0.16), transparent 70%),
    radial-gradient(42% 75% at 100% 100%, rgba(79, 163, 255, 0.2), transparent 70%),
    radial-gradient(34% 60% at 0% 100%, rgba(214, 79, 140, 0.16), transparent 70%),
    radial-gradient(72% 58% at 50% 100%, rgba(140, 128, 255, 0.34), transparent 74%);
  --hero-fg: #f9f9fa;
  --hero-fg-2: #e2e0f4;
  --hero-accent: #c9c4ff;
  --hero-title: linear-gradient(to left, #ffffff 22%, #cdc8ff);
  --hero-border: rgba(124, 112, 255, 0.3);
  --hero-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 34px 70px -40px rgba(76, 66, 214, 0.85);
  --hero-pattern: rgba(255, 255, 255, 0.1);
  --hero-chip: rgba(255, 255, 255, 0.08);
  --hero-chip-hover: rgba(255, 255, 255, 0.15);
  --hero-chip-border: rgba(255, 255, 255, 0.1);
  --hero-input: rgba(12, 10, 38, 0.58);
  --hero-input-border: rgba(173, 166, 255, 0.35);
  --hero-input-ring: linear-gradient(100deg, rgba(169, 161, 255, 0.85), rgba(140, 195, 255, 0.55) 33%, rgba(240, 132, 180, 0.6) 66%, rgba(169, 161, 255, 0.85));
  --hero-input-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 18px 44px -22px rgba(0, 0, 0, 0.85);
  --hero-input-focus: 0 0 0 4px rgba(124, 112, 255, 0.34), 0 0 48px -10px rgba(140, 128, 255, 0.75);
  --hero-placeholder: #b5b2d6;

  /* Charts */
  --chart-grid: rgba(255, 255, 255, 0.055);
  --chart-label: #6c6b75;
  --chart-1: #5ee07a;
  --chart-2: #7b6ef6;
  --chart-3: #f4b942;
  --chart-4: #d64f8c;
  --chart-5: #4fa3ff;
  --hatch: rgba(123, 110, 246, 0.32);
  --bar-off: #2c2b32;
  --bar-on: linear-gradient(180deg, #6f64f4, #4540a7);

  --skeleton: rgba(255, 255, 255, 0.05);
  --skeleton-shine: rgba(255, 255, 255, 0.08);

  --nav-active-bg: linear-gradient(to left, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.03) 60%, transparent 100%);
  --scrollbar: rgba(255, 255, 255, 0.1);
}

/* ---------- Light theme — soft paper surfaces, same hierarchy ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #e9e9ef;
  --bg-glow-1: rgba(109, 98, 240, 0.10);
  --bg-glow-2: rgba(44, 232, 75, 0.06);
  --panel: #f7f7fa;
  --card: #ffffff;
  --card-2: #f2f2f7;
  --card-3: #e9e9f0;
  --sunken: #efeff4;

  --border: rgba(22, 20, 44, 0.08);
  --border-strong: rgba(22, 20, 44, 0.14);
  --divider: rgba(22, 20, 44, 0.07);

  --text: #16151c;
  --text-2: #5f5e69;
  --text-3: #8e8d98;
  --text-title: #34333c;
  --text-inverse: #ffffff;

  --chip: rgba(22, 20, 44, 0.055);
  --chip-hover: rgba(22, 20, 44, 0.09);
  --chip-active: #16151c;
  --chip-active-ink: #ffffff;

  --accent: #22d445;
  --accent-ink: #04250b;
  --accent-text: #0e8a2b;
  --accent-soft: rgba(34, 212, 69, 0.14);
  --accent-glow: rgba(34, 212, 69, 0.3);

  --indigo: #5b4fe6;
  --indigo-deep: #4338ca;
  --indigo-text: #4a3fd4;
  --indigo-soft: rgba(91, 79, 230, 0.1);

  --tone-green-bg: rgba(22, 163, 74, 0.11);     --tone-green-fg: #0f7d2c;  --tone-green: #18b23a;
  --tone-red-bg: rgba(229, 56, 79, 0.1);        --tone-red-fg: #c42339;    --tone-red: #e5384f;
  --tone-amber-bg: rgba(217, 154, 22, 0.13);    --tone-amber-fg: #8f6100;  --tone-amber: #d99a16;
  --tone-plum-bg: rgba(178, 58, 110, 0.1);      --tone-plum-fg: #a2325f;   --tone-plum: #b23a6e;
  --tone-indigo-bg: rgba(91, 79, 230, 0.1);     --tone-indigo-fg: #4a3fd4; --tone-indigo: #5b4fe6;
  --tone-sky-bg: rgba(45, 134, 232, 0.1);       --tone-sky-fg: #1f6cc4;    --tone-sky: #2d86e8;
  --tone-neutral-bg: rgba(22, 20, 44, 0.06);    --tone-neutral-fg: #55545e; --tone-neutral: #8e8d98;

  --info: #4466e8;

  --input-bg: #ffffff;
  --input-border: rgba(22, 20, 44, 0.12);
  --input-border-hover: rgba(22, 20, 44, 0.22);
  --placeholder: #9d9ca6;

  --hover: rgba(22, 20, 44, 0.035);
  --active: rgba(22, 20, 44, 0.06);
  --row-hover: rgba(22, 20, 44, 0.025);
  --focus-ring: 0 0 0 3px rgba(91, 79, 230, 0.35);
  --focus-ring-danger: 0 0 0 3px rgba(229, 56, 79, 0.3);

  --overlay: rgba(22, 20, 44, 0.32);
  --dropdown-bg: #ffffff;
  --popover-bg: color-mix(in srgb, #ffffff 82%, transparent);
  --popover-backdrop: blur(22px) saturate(180%);
  /* Tooltip bubble: crisp ink on paper, lifted by a soft cool shadow (text 18.1:1). */
  --tooltip-bg: #16151c;
  --tooltip-fg: #ffffff;
  --tooltip-surface: #16151c;
  --tooltip-ring: transparent;
  --tooltip-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 5px rgba(22, 20, 44, 0.16), 0 12px 28px -10px rgba(22, 20, 44, 0.5);

  --shadow-1: 0 1px 2px rgba(22, 20, 44, 0.04), 0 12px 32px -18px rgba(22, 20, 44, 0.18);
  --shadow-2: 0 20px 50px -24px rgba(22, 20, 44, 0.28);
  --shadow-pop: 0 30px 70px -24px rgba(22, 20, 44, 0.35), 0 0 0 1px var(--border);

  --glass-bg: linear-gradient(180deg, #ffffff, #f1f1f6);
  --glass-bg-hover: linear-gradient(180deg, #ffffff, #e9e9f1);
  --glass-border: rgba(22, 20, 44, 0.12);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(22, 20, 44, 0.06);

  /* Hero: luminous paper lit by an indigo aurora — colour lives in the corner orbs and the halo, never in a
     mid-tone band under dark text (title 16:1, hints 6:1+ everywhere). */
  --hero-bg: linear-gradient(180deg, #fdfcff 0%, #f3f1ff 50%, #e2ddff 100%);
  --hero-mesh:
    linear-gradient(90deg, transparent 6%, rgba(91, 79, 230, 0.6) 50%, transparent 94%) top / 100% 1px no-repeat,
    radial-gradient(48% 52% at 50% 0%, rgba(255, 255, 255, 0.95), transparent 76%),
    radial-gradient(44% 92% at 0% 0%, rgba(124, 108, 255, 0.5), transparent 72%),
    radial-gradient(46% 88% at 100% 100%, rgba(56, 189, 248, 0.42), transparent 72%),
    radial-gradient(38% 78% at 0% 100%, rgba(192, 92, 240, 0.26), transparent 72%),
    radial-gradient(60% 62% at 50% 100%, rgba(91, 79, 230, 0.3), transparent 76%);
  --hero-fg: #16151c;
  --hero-fg-2: #3f3c55;
  --hero-accent: #4a3fd4;
  --hero-title: linear-gradient(to left, #16151c 22%, #4338ca);
  --hero-border: rgba(91, 79, 230, 0.2);
  --hero-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(22, 20, 44, 0.04), 0 30px 64px -38px rgba(91, 79, 230, 0.6);
  --hero-pattern: rgba(91, 79, 230, 0.17);
  --hero-chip: rgba(255, 255, 255, 0.74);
  --hero-chip-hover: #ffffff;
  --hero-chip-border: rgba(91, 79, 230, 0.16);
  --hero-input: rgba(255, 255, 255, 0.94);
  --hero-input-border: rgba(91, 79, 230, 0.2);
  --hero-input-ring: linear-gradient(100deg, rgba(124, 108, 255, 0.9), rgba(56, 189, 248, 0.7) 33%, rgba(192, 92, 240, 0.65) 66%, rgba(124, 108, 255, 0.9));
  --hero-input-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(22, 20, 44, 0.04), 0 16px 36px -18px rgba(91, 79, 230, 0.55);
  --hero-input-focus: 0 0 0 4px rgba(91, 79, 230, 0.2), 0 22px 46px -18px rgba(91, 79, 230, 0.75);
  --hero-placeholder: #67647c;

  --chart-grid: rgba(22, 20, 44, 0.07);
  --chart-label: #8e8d98;
  --chart-1: #18b23a;
  --chart-2: #5b4fe6;
  --chart-3: #d99a16;
  --chart-4: #b23a6e;
  --chart-5: #2d86e8;
  --hatch: rgba(91, 79, 230, 0.22);
  --bar-off: #e6e6ee;
  --bar-on: linear-gradient(180deg, #7d72f7, #5b4fe6);

  --skeleton: rgba(22, 20, 44, 0.06);
  --skeleton-shine: rgba(22, 20, 44, 0.035);

  --nav-active-bg: linear-gradient(to left, rgba(22, 20, 44, 0.07) 0%, rgba(22, 20, 44, 0.03) 60%, transparent 100%);
  --scrollbar: rgba(22, 20, 44, 0.16);
}

@media (max-width: 767px) {
  :root {
    --page-pad: var(--sp-4);
    --topbar-h: 64px;
  }
}

/* ---------- Web terminal (static/css/pages/terminal.css, static/js/pages/terminal.js) ----------
   --term-* colours feed xterm.js too (read with getComputedStyle), so they stay plain hex/rgba: no color-mix,
   no var(). --term-ansi-*: the 16-colour palette, tuned per theme (light: deeper hues + a minimum contrast). */
:root {
  --term-font: "JetBrains Mono", "Cascadia Mono", "Cascadia Code", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
}
:root,
:root[data-theme="dark"] {
  --term-bg: #0e0d13;
  --term-fg: #e4e3ec;
  --term-chrome: #15141b;
  --term-chrome-2: #1c1b23;
  --term-edge: rgba(255, 255, 255, 0.075);
  --term-glow: rgba(109, 98, 240, 0.16);
  --term-cursor: #4ef06a;
  --term-cursor-ink: #0e0d13;
  --term-selection: rgba(124, 112, 255, 0.36);
  --term-scrollbar: rgba(255, 255, 255, 0.14);
  --term-match: #3a3466;
  --term-match-edge: #7b6ef6;
  --term-match-active: #6d4f12;
  --term-match-active-edge: #f4b942;
  --term-veil: rgba(14, 13, 19, 0.82);
  --term-contrast: 1;
  --term-ansi-black: #24232d;    --term-ansi-bright-black: #5f5e6b;
  --term-ansi-red: #ff6b7f;      --term-ansi-bright-red: #ff95a4;
  --term-ansi-green: #4ee06c;    --term-ansi-bright-green: #82f396;
  --term-ansi-yellow: #f4c25a;   --term-ansi-bright-yellow: #ffd98a;
  --term-ansi-blue: #7f8cff;     --term-ansi-bright-blue: #a9b2ff;
  --term-ansi-magenta: #e27cc2;  --term-ansi-bright-magenta: #f3a6d8;
  --term-ansi-cyan: #5ccfe6;     --term-ansi-bright-cyan: #8fe3f3;
  --term-ansi-white: #c9c8d3;    --term-ansi-bright-white: #f9f9fa;
}
:root[data-theme="light"] {
  --term-bg: #fbfbfd;
  --term-fg: #23222b;
  --term-chrome: #f1f1f6;
  --term-chrome-2: #e8e8ef;
  --term-edge: rgba(22, 20, 44, 0.1);
  --term-glow: rgba(91, 79, 230, 0.1);
  --term-cursor: #5b4fe6;
  --term-cursor-ink: #ffffff;
  --term-selection: rgba(91, 79, 230, 0.2);
  --term-scrollbar: rgba(22, 20, 44, 0.2);
  --term-match: #e3e0ff;
  --term-match-edge: #5b4fe6;
  --term-match-active: #ffe2a3;
  --term-match-active-edge: #d99a16;
  --term-veil: rgba(251, 251, 253, 0.84);
  --term-contrast: 4.5;
  --term-ansi-black: #2a2933;    --term-ansi-bright-black: #6c6b75;
  --term-ansi-red: #c42339;      --term-ansi-bright-red: #e5384f;
  --term-ansi-green: #0f7d2c;    --term-ansi-bright-green: #16953a;
  --term-ansi-yellow: #8f6100;   --term-ansi-bright-yellow: #b07a00;
  --term-ansi-blue: #3646c9;     --term-ansi-bright-blue: #5b4fe6;
  --term-ansi-magenta: #a2325f;  --term-ansi-bright-magenta: #b23a6e;
  --term-ansi-cyan: #0b7189;     --term-ansi-bright-cyan: #1f8fa8;
  --term-ansi-white: #77767f;    --term-ansi-bright-white: #9a99a5;
}