/* ASRT IBMS — design tokens. Identity: "precise ledger terminal".
 * Navy-tinted paper neutrals, ONE signature accent (signal orange), sharp 2-4px
 * radii, hairline rules instead of stacked shadows, tabular mono for figures. */

:root {
  color-scheme: light;

  /* signature accent — signal orange #F28C28 family, used nowhere else as a wash */
  --accent: #f28c28;
  --accent-strong: #bf6a12;
  --accent-soft: rgba(242, 140, 40, 0.10);
  --accent-line: rgba(242, 140, 40, 0.32);
  --accent-ink: #17243b;

  /* navy-tinted paper neutrals */
  --bg-canvas: #f4f6fa;
  --bg-surface: #f8f9fc;
  --bg-surface-2: #eef1f6;
  --bg-surface-3: #e3e8f1;
  --bg-raised: #ffffff;
  --bg-inverse: #17243b;
  --bg-input: #ffffff;
  --bg-hover: #e9eaf0;
  --bg-selected: #fdeedd;

  --text-primary: #17243b;
  --text-secondary: #465267;
  --text-muted: #929baa;
  --text-inverse: #f7f9fc;
  --text-link: #b47c32;

  --border-subtle: #e9eaf0;
  --border-strong: #d8dbe3;
  --border-hairline: #eef0f4;
  --border-focus: var(--accent);

  /* semantic — muted, print-like */
  --ok: #256b4d;
  --ok-bg: #e6efe9;
  --ok-line: #bcd6c6;
  --warn: #8a5a06;
  --warn-bg: #f6eed9;
  --warn-line: #e0cb98;
  --bad: #a32d24;
  --bad-bg: #f6e5e2;
  --bad-line: #e0b6ae;
  --info: #2f5d8a;
  --info-bg: #e6ecf2;
  --info-line: #c0cfdd;
  --neutral: #5d6b81;
  --neutral-bg: #eef1f6;
  --neutral-line: #d8dbe3;

  /* status chips */
  --chip-active: var(--ok);
  --chip-active-bg: var(--ok-bg);
  --chip-verified: var(--ok);
  --chip-verified-bg: var(--ok-bg);
  --chip-paid: var(--ok);
  --chip-paid-bg: var(--ok-bg);
  --chip-pending: var(--warn);
  --chip-pending-bg: var(--warn-bg);
  --chip-proposed: var(--warn);
  --chip-proposed-bg: var(--warn-bg);
  --chip-overdue: var(--bad);
  --chip-overdue-bg: var(--bad-bg);
  --chip-failed: var(--bad);
  --chip-failed-bg: var(--bad-bg);
  --chip-draft: var(--neutral);
  --chip-draft-bg: var(--neutral-bg);
  --chip-cancelled: var(--neutral);
  --chip-cancelled-bg: var(--neutral-bg);

  /* data viz — accent + neutrals + two signal hues, nothing else */
  --chart-1: #f28c28;
  --chart-2: #5d6b81;
  --chart-3: #a32d24;
  --chart-4: #8a5a06;
  --chart-5: #2f5d8a;
  --chart-6: #a9b2c0;
  --chart-grid: rgba(23, 36, 59, 0.09);
  --chart-text: #465267;

  /* elevation — reserved for floating layers only */
  --shadow-sm: none;
  --shadow-md: 0 6px 18px rgba(23, 36, 59, 0.14);
  --shadow-lg: 0 16px 38px rgba(23, 36, 59, 0.2);
  --shadow-focus: 0 0 0 2px rgba(242, 140, 40, 0.28);

  /* radii — sharp */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 4px;
  --r-xl: 6px;
  --r-full: 999px;

  /* spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 11px;
  --s-4: 15px;
  --s-5: 20px;
  --s-6: 28px;
  --s-7: 38px;
  --s-8: 52px;

  /* type — values below are the small-screen scale; the block after :root lifts them */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xxs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12.5px;
  --fs-md: 13.5px;
  --fs-lg: 15.5px;
  --fs-xl: 17px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-money: 18px;

  /* layout */
  --rail-w: 232px;
  --rail-w-collapsed: 56px;
  --topbar-h: 52px;
  --content-max: 1680px;

  /* touch + insets — base target is the 44px minimum, never a component's own height */
  --tap: 44px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --sidebar-bg: #17243b;
  --sidebar-fg: #b3bdd0;
  --sidebar-fg-active: #f7f9fc;
  --sidebar-line: rgba(244, 246, 250, 0.1);
  --sidebar-hover: rgba(242, 140, 40, 0.14);

  --skeleton: linear-gradient(90deg, #eef1f6 25%, #f4f6fa 37%, #eef1f6 63%);
  --overlay: rgba(23, 36, 59, 0.42);
  --paper-grid: rgba(23, 36, 59, 0.05);
  --accent-on-dark: #f2a44e;

  /* legacy aliases — components reference the accent through these */
  --brand-teal: var(--accent);
  --brand-teal-strong: var(--accent-strong);
  --brand-navy: var(--bg-inverse);
  --brand-ink: #17243b;
  --brand-steel: var(--info);
  --brand-amber: var(--warn);
  --brand-orange: var(--warn);
}

/* Viewport-width scale steps, mobile-first: the :root values above are the phone
 * scale and are only lifted once there is room for them. */
@media (min-width: 641px) {
  :root {
    --fs-xl: 19px;
    --fs-2xl: 24px;
    --fs-3xl: 30px;
    --fs-money: 22px;
  }
}

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

  --accent: #f2a44e;
  --accent-strong: #f28c28;
  --accent-soft: rgba(242, 164, 78, 0.14);
  --accent-line: rgba(242, 164, 78, 0.38);
  --accent-ink: #17243b;

  --bg-canvas: #111c30;
  --bg-surface: #17243b;
  --bg-surface-2: #1c2a45;
  --bg-surface-3: #223350;
  --bg-raised: #1f2d48;
  --bg-inverse: #f4f6fa;
  --bg-input: #131f36;
  --bg-hover: #223350;
  --bg-selected: #3a2a15;

  --text-primary: #e8eefb;
  --text-secondary: #b3bdd0;
  --text-muted: #8b98b0;
  --text-inverse: #111c30;
  --text-link: #e5b36b;

  --border-subtle: #22314d;
  --border-strong: #2e4062;
  --border-hairline: #1c2740;

  --ok: #4fbe8c;
  --ok-bg: rgba(79, 190, 140, 0.13);
  --ok-line: rgba(79, 190, 140, 0.32);
  --warn: #d9a94a;
  --warn-bg: rgba(217, 169, 74, 0.13);
  --warn-line: rgba(217, 169, 74, 0.32);
  --bad: #e07a6e;
  --bad-bg: rgba(224, 122, 110, 0.13);
  --bad-line: rgba(224, 122, 110, 0.32);
  --info: #85b3dd;
  --info-bg: rgba(133, 179, 221, 0.13);
  --info-line: rgba(133, 179, 221, 0.32);
  --neutral: #8b98b0;
  --neutral-bg: rgba(139, 152, 176, 0.13);
  --neutral-line: rgba(139, 152, 176, 0.3);

  --chart-1: #f2a44e;
  --chart-2: #b3bdd0;
  --chart-3: #e07a6e;
  --chart-4: #d9a94a;
  --chart-5: #85b3dd;
  --chart-6: #5d6b81;
  --chart-grid: rgba(232, 238, 251, 0.09);
  --chart-text: #b3bdd0;

  --shadow-sm: none;
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 16px 38px rgba(0, 0, 0, 0.58);
  --shadow-focus: 0 0 0 2px rgba(242, 164, 78, 0.34);

  --sidebar-bg: #111c30;
  --sidebar-fg: #a9b6cc;
  --sidebar-hover: rgba(242, 164, 78, 0.16);

  --skeleton: linear-gradient(90deg, #1c2a45 25%, #223350 37%, #1c2a45 63%);
  --overlay: rgba(10, 16, 28, 0.62);
  --paper-grid: rgba(232, 238, 251, 0.05);
  --accent-on-dark: #f2a44e;

  --brand-teal: var(--accent);
  --brand-teal-strong: var(--accent-strong);
  --brand-navy: var(--bg-inverse);
  --brand-ink: #17243b;
  --brand-steel: var(--info);
  --brand-amber: var(--warn);
  --brand-orange: var(--warn);
}