/* ============================================================================
   ZONVRA design tokens (spec §85)
   One source of truth for spacing, type, colour, elevation and status meaning.
   Every value is a custom property so themes and density change nothing else.
   ========================================================================== */

:root {
  /* ── type scale ─────────────────────────────────────────────────────────── */
  /*
   * Inter carries Latin, Heebo carries Hebrew, and both are self-hosted in
   * fonts.css. Heebo sits ahead of the system faces rather than after them:
   * the browser resolves the stack per character, so with `-apple-system` first
   * every Hebrew glyph would come from the operating system and only Latin text
   * would look designed — the wrong way round for a Hebrew-first product.
   */
  --font-sans: "Inter", "Heebo", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "Assistant", "Rubik", Roboto, "Helvetica Neue", "Noto Sans Hebrew",
    "Arial Hebrew", Arial, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  /* Tabular numerals keep money columns aligned in tables and KPI cards. */
  --font-numeric: var(--font-sans);

  --text-2xs: 0.6875rem;   /* 11px — dense table meta */
  --text-xs: 0.75rem;      /* 12px — labels, captions */
  --text-sm: 0.8125rem;    /* 13px — table body, secondary */
  --text-base: 0.875rem;   /* 14px — body default */
  --text-md: 0.9375rem;    /* 15px — emphasis body, card titles */
  --text-lg: 1.125rem;     /* 18px — section titles */
  --text-xl: 1.25rem;      /* 20px — sub-page titles */
  --text-2xl: 1.5rem;      /* 24px — hero numbers */
  --text-3xl: 1.75rem;     /* 28px — page titles */
  --text-4xl: 2.25rem;     /* 36px — command centre headline metric */

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

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

  --tracking-tight: -0.015em;
  --tracking-tighter: -0.022em;
  --tracking-normal: 0;
  --tracking-wide: 0.01em;
  --tracking-caps: 0.05em;

  /* ── spacing (4px base) ─────────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ── radii ──────────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ── elevation ──────────────────────────────────────────────────────────── */
  --shadow-xs: 0 1px 1px rgb(10 37 64 / 0.05);
  --shadow-sm: 0 1px 1px rgb(10 37 64 / 0.06), 0 1px 3px rgb(10 37 64 / 0.04);
  --shadow-md: 0 2px 5px rgb(60 66 87 / 0.08), 0 1px 1px rgb(10 37 64 / 0.06);
  --shadow-lg: 0 15px 35px rgb(60 66 87 / 0.1), 0 5px 15px rgb(10 37 64 / 0.08);
  --shadow-xl: 0 50px 100px -20px rgb(50 50 93 / 0.25), 0 30px 60px -30px rgb(0 0 0 / 0.3);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ── layout ─────────────────────────────────────────────────────────────── */
  --sidebar-width: 232px;
  --sidebar-width-collapsed: 60px;
  --topbar-height: 64px;
  --context-bar-height: 44px;
  --content-max: 1440px;
  --content-gutter: var(--space-8);
  --drawer-width: 520px;
  --mobile-nav-height: 60px;
  --app-frame-inset: 8px;
  --app-radius: 12px;

  /* ── motion ─────────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 280ms;

  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 400;
  --z-modal: 500;
  --z-palette: 600;
  --z-toast: 700;
}

/* ── light theme (default) ──────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  color-scheme: light;

  /* The deep field the application card floats on. */
  --color-backdrop: #0a2540;
  --color-backdrop-text: #ffffff;
  --color-backdrop-muted: #a5b6c9;
  --color-backdrop-hover: rgb(255 255 255 / 0.1);
  --color-backdrop-border: rgb(255 255 255 / 0.16);

  /* surfaces, from page backdrop inward */
  --color-canvas: #f6f8fa;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #f6f8fa;
  --color-surface-hover: #f6f8fa;
  --color-surface-active: #eceff3;
  --color-surface-inverse: #1a1f36;

  /* text */
  --color-text: #1a1f36;
  --color-text-secondary: #414552;
  --color-text-tertiary: #6a7383;
  --color-text-inverse: #ffffff;
  --color-text-disabled: #a3acba;

  /* borders */
  --color-border: #e3e8ee;
  --color-border-strong: #cfd7e0;
  --color-border-subtle: #eff2f6;

  /* brand accent — a single restrained accent, used for action not decoration */
  --color-accent: #635bff;
  --color-accent-hover: #554df0;
  --color-accent-active: #4740d4;
  --color-accent-subtle: #f2f1ff;
  --color-accent-border: #cdc9ff;
  --color-accent-text: #4f46e5;
  --color-accent-contrast: #ffffff;

  /* semantic status */
  --color-positive: #0e6245;
  --color-positive-subtle: #e7f6ef;
  --color-positive-border: #b9e5cd;
  --color-negative: #b3093c;
  --color-negative-subtle: #fdeef2;
  --color-negative-border: #f6c3d3;
  --color-warning: #8f4700;
  --color-warning-subtle: #fdf3e3;
  --color-warning-border: #f4dcae;
  --color-info: #1f4b99;
  --color-info-subtle: #edf2fb;
  --color-info-border: #c6d6f0;
  --color-neutral: #4f566b;
  --color-neutral-subtle: #f2f4f7;
  --color-neutral-border: #dfe3eb;

  /* severity ladder for exceptions (spec §23.3) */
  --severity-info: #3f6fa8;
  --severity-low: #0e6245;
  --severity-medium: #8f6200;
  --severity-high: #b7501a;
  --severity-critical: #b3093c;

  /* value classification (spec §1.10) — actual vs estimate vs forecast vs target */
  --classification-actual: #1a1f36;
  --classification-estimated: #6b5bd2;
  --classification-forecast: #1f6f9e;
  --classification-target: #6a7383;

  --color-focus-ring: rgb(58 151 212 / 0.36);
  --color-overlay: rgb(26 31 54 / 0.4);
  --color-selection: #dedbff;

  /* chart palette — ordered for categorical series, colour-blind safe pairs */
  --chart-1: #635bff;
  --chart-2: #0b7285;
  --chart-3: #b7791f;
  --chart-4: #b3093c;
  --chart-5: #2c7a4b;
  --chart-6: #7d5bbe;
  --chart-7: #3f6fa8;
  --chart-8: #8a5a2b;
  --chart-grid: #e9edf2;
  --chart-axis: #8792a2;
  --chart-comparison: #c7cfd9;
}

/* ── dark theme ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  color-scheme: dark;

  --color-backdrop: #050e1a;
  --color-backdrop-text: #e8ecf5;
  --color-backdrop-muted: #8792a8;
  --color-backdrop-hover: rgb(255 255 255 / 0.08);
  --color-backdrop-border: rgb(255 255 255 / 0.12);

  --color-canvas: #0b1322;
  --color-surface: #0f1729;
  --color-surface-raised: #16203a;
  --color-surface-sunken: #131c30;
  --color-surface-hover: #1a2440;
  --color-surface-active: #202b49;
  --color-surface-inverse: #e8ecf5;

  --color-text: #e8ecf5;
  --color-text-secondary: #b3bdd0;
  --color-text-tertiary: #8792a8;
  --color-text-inverse: #0f1729;
  --color-text-disabled: #5c6780;

  --color-border: #24304d;
  --color-border-strong: #384462;
  --color-border-subtle: #1b2540;

  --color-accent: #8a83ff;
  --color-accent-hover: #9c96ff;
  --color-accent-active: #b0abff;
  --color-accent-subtle: #1d1f47;
  --color-accent-border: #3a3880;
  --color-accent-text: #a9a3ff;
  --color-accent-contrast: #0f1729;

  --color-positive: #4cc38a;
  --color-positive-subtle: #10281f;
  --color-positive-border: #235c43;
  --color-negative: #ef6a86;
  --color-negative-subtle: #2c1420;
  --color-negative-border: #6b2a41;
  --color-warning: #e0a63e;
  --color-warning-subtle: #2a1f0e;
  --color-warning-border: #5c4520;
  --color-info: #74a8f0;
  --color-info-subtle: #10203a;
  --color-info-border: #2b4472;
  --color-neutral: #9aa5bb;
  --color-neutral-subtle: #18213a;
  --color-neutral-border: #2c3757;

  --severity-info: #74a8f0;
  --severity-low: #4cc38a;
  --severity-medium: #e0a63e;
  --severity-high: #ef9057;
  --severity-critical: #ef6a86;

  --classification-actual: #e8ecf5;
  --classification-estimated: #b3a8f5;
  --classification-forecast: #7cc0dd;
  --classification-target: #8792a8;

  --color-focus-ring: rgb(122 162 255 / 0.45);
  --color-overlay: rgb(2 6 14 / 0.65);
  --color-selection: #2b2a63;

  --chart-1: #8a83ff;
  --chart-2: #3fb8c6;
  --chart-3: #e0a63e;
  --chart-4: #ef6a86;
  --chart-5: #4cc38a;
  --chart-6: #b18cf0;
  --chart-7: #74a8f0;
  --chart-8: #c99a6a;
  --chart-grid: #1e2942;
  --chart-axis: #6b7690;
  --chart-comparison: #3a466a;

  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45);
  --shadow-md: 0 4px 12px rgb(0 0 0 / 0.5);
  --shadow-lg: 0 12px 32px rgb(0 0 0 / 0.55);
  --shadow-xl: 0 24px 56px rgb(0 0 0 / 0.65);
}

/* ── density (spec §102) ────────────────────────────────────────────────── */
[data-density="compact"] {
  --row-height: 36px;
  --cell-padding-block: var(--space-2);
  --cell-padding-inline: var(--space-3);
  --card-padding: var(--space-4);
  --section-gap: var(--space-5);
}

[data-density="comfortable"],
:root {
  --row-height: 48px;
  --cell-padding-block: var(--space-3);
  --cell-padding-inline: var(--space-4);
  --card-padding: var(--space-5);
  --section-gap: var(--space-8);
}