/* SGA ERP / tokens.css — the design tokens of both themes (docs/DESIGN.md §2).
   One markup, two looks: every component in app.css reads these custom properties only, so a theme is this file.
     html[data-theme="light"]  "Site command centre": charcoal shell with the white SGA lockup, warm light canvas, white
                               cards, a dark "position" band with a faint blueprint grid. SGA red #C4161C for money-in and
                               alarms, blueprint blue #2B5F9E for the plan (certified, committed); everything else is ink.
     html[data-theme="dark"]   "Glass": near-black ground lit by soft SGA-red / blueprint-blue aurora, frosted panels,
                               glowing figures. Solid panels for prefers-reduced-transparency and without backdrop-filter.
   data-theme is written by the server for a saved light/dark choice and by static/js/theme.js (before first paint) for
   'system'. Without either (no JS, 'system') the light values of :root apply.
   Text tiers are checked against the worst-case panel background of each theme (tools: docs/DESIGN.md §8, ≥ 4.5:1).
   Legacy names (--ground, --muted, --border …) are kept as aliases so module CSS written for the old sheet keeps working. */

/* ---------- fonts (self-hosted, SPEC §4) ---------- */
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/NotoSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/NotoSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "Noto Sans Arabic"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/NotoSansArabic-var.woff2") format("woff2"); }
@font-face { font-family: "Noto Naskh Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/NotoNaskhArabic-Regular.ttf") format("truetype"); }
@font-face { font-family: "Noto Naskh Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/NotoNaskhArabic-Bold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Montserrat-Regular.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/Montserrat-Medium.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Montserrat-Bold.ttf") format("truetype"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/Montserrat-ExtraBold.ttf") format("truetype"); }

/* ---------- theme-independent: type, spacing, radii, motion ---------- */
:root {
  --font: "Noto Sans", "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Montserrat", "Noto Sans Arabic", "Noto Sans", sans-serif;     /* headings */
  --font-figure: "Montserrat", "Noto Sans", sans-serif;                          /* money and counts, both languages */
  --fs-hero: 52px; --fs-title: 24px; --fs-section: 16px; --fs-kpi: 24px; --fs-body: 14px; --fs-small: 12px; --fs-tiny: 11px;
  --lh-body: 1.5;
  --sidebar-width: 248px; --pad: 28px; --gap: 16px; --card-pad: 20px; --content-max: 1360px;
  --control-height: 34px; --input-height: 40px; --row-height: 44px; --nav-row: 38px; --topbar: 56px; --bottombar: 64px;
  --radius-xl: 20px; --radius-card: 14px; --radius-inner: 10px; --radius-control: 10px; --radius-pill: 999px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --t-press: 120ms; --t-hover: 150ms; --t-ui: 220ms;
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 2.5 8 6l-3.5 3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Arabic: Noto Sans Arabic for words (Montserrat has no Arabic), a step larger, looser lines, no tracking */
html[lang="ar"] {
  --font: "Noto Sans Arabic", "Noto Sans", system-ui, sans-serif;
  --font-display: "Noto Sans Arabic", "Montserrat", sans-serif;
  --fs-body: 15px; --fs-small: 13px; --fs-tiny: 12px; --fs-section: 17px; --lh-body: 1.65;
}

/* ---------- LIGHT: site command centre (also the no-JS default) ---------- */
:root, html[data-theme="light"] {
  color-scheme: light;
  /* surfaces */
  --canvas: #EFECE6;        /* warm sand/concrete ground */
  --surface: #FFFFFF;       /* cards */
  --surface-2: #F7F5F1;     /* inset blocks, hover rows, read-only inputs */
  --surface-3: #ECE8E1;     /* selected / active fill */
  --surface-solid: #FFFFFF; /* popovers and sheets (never translucent) */
  --overlay: rgba(21, 23, 26, 0.42);
  /* text tiers (≥ 4.5:1 on --surface and --surface-2) */
  --text: #15171A; --text-2: #565B62; --text-3: #63676E;
  /* lines */
  --line: #E2DDD3; --line-soft: #EFEBE4; --control: #CBC4B7; --line-strong: #15171A;
  /* the charcoal shell (sidebar, position band, light phone bars) */
  --shell: #15171A; --shell-2: #1E2125; --shell-3: #2A2E33; --shell-line: #34383E;
  --on-shell: #F3F1EC; --on-shell-2: #B9BCC2; --on-shell-3: #9A9EA5;
  /* brand and data hues: base (marks, fills), -ink (text on light), -tint (chip fill) */
  --red: #C4161C; --red-ink: #A51217; --red-tint: #FBE9E9; --red-line: #F0C7C8;
  --blue: #2B5F9E; --blue-ink: #2B5F9E; --blue-tint: #E7EEF7; --blue-2: #9BB4D3;
  --green: #1E6B45; --green-ink: #1E6B45; --green-tint: #E3F2EA;
  --amber: #E0A43B; --amber-ink: #8A5300; --amber-tint: #FCF1DE;
  --violet: #6D4FC2; --violet-ink: #5B3FB0; --violet-tint: #EEE9FA;
  --steel: #8D939B;
  /* primary action: ink pill; the "+ New" and hot actions: SGA red */
  --primary: #15171A; --primary-ink: #FFFFFF; --primary-bg: #15171A; --primary-bg-hover: #2A2E33; --primary-glow: none;
  --hot: #C4161C; --hot-ink: #FFFFFF; --hot-bg: #C4161C; --hot-bg-hover: #A51217; --hot-glow: 0 6px 16px -6px rgba(196, 22, 28, 0.45);
  --focus: #C4161C;
  /* panels */
  --panel-bg: var(--surface); --panel-line: var(--line); --panel-shadow: 0 1px 2px rgba(21, 23, 26, 0.04);
  --inner-bg: transparent; --inner-line: var(--line);
  --blur: 0px;
  --popover-shadow: 0 18px 40px -12px rgba(21, 23, 26, 0.28), 0 2px 6px rgba(21, 23, 26, 0.08);
  /* charts */
  --chart-1: var(--red); --chart-2: var(--shell); --chart-3: var(--steel); --chart-4: var(--blue);
  --chart-muted: #D5D0C8; --chart-track: #ECE8E1; --chart-grid: #E6E1D8; --chart-tick: #63676E;
  --chart-line: #C4161C; --chart-area-top: rgba(196, 22, 28, 0.20); --chart-in: #2B5F9E; --chart-out: #9AA0A8;
}

/* ---------- DARK: glass ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0A0C10;
  --surface: #161A20;       /* solid: popovers, sticky bars and module blocks that sit over moving content */
  --surface-2: rgba(255, 255, 255, 0.085);
  --surface-3: rgba(255, 255, 255, 0.12);
  --surface-solid: #171B21;
  --overlay: rgba(4, 5, 8, 0.62);
  --text: #F3F1EC; --text-2: #BCC2CA; --text-3: #AEB5BF;
  --line: rgba(255, 255, 255, 0.11); --line-soft: rgba(255, 255, 255, 0.07); --control: rgba(255, 255, 255, 0.2); --line-strong: rgba(255, 255, 255, 0.5);
  --shell: rgba(255, 255, 255, 0.055); --shell-2: rgba(255, 255, 255, 0.04); --shell-3: rgba(255, 255, 255, 0.085); --shell-line: rgba(255, 255, 255, 0.11);
  --on-shell: #F3F1EC; --on-shell-2: #BCC2CA; --on-shell-3: #AEB5BF;
  --red: #E5484D; --red-ink: #FF9EA1; --red-tint: rgba(229, 72, 77, 0.16); --red-line: rgba(229, 72, 77, 0.35);
  --blue: #5B9BFF; --blue-ink: #A9C8FF; --blue-tint: rgba(91, 155, 255, 0.14); --blue-2: rgba(91, 155, 255, 0.55);
  --green: #3DD68C; --green-ink: #9FF0C6; --green-tint: rgba(61, 214, 140, 0.14);
  --amber: #F5B342; --amber-ink: #FFD28A; --amber-tint: rgba(245, 179, 66, 0.14);
  --violet: #A78BFA; --violet-ink: #CDBEFF; --violet-tint: rgba(167, 139, 250, 0.16);
  --steel: #7D8592;
  --primary: #E5484D; --primary-ink: #FFFFFF;
  --primary-bg: linear-gradient(135deg, #D63A40, #A8141A); --primary-bg-hover: linear-gradient(135deg, #E0444A, #B5141A);
  --primary-glow: 0 10px 24px -10px rgba(229, 72, 77, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --hot: #E5484D; --hot-ink: #FFFFFF;
  --hot-bg: linear-gradient(135deg, #D63A40, #A8141A); --hot-bg-hover: linear-gradient(135deg, #E0444A, #B5141A);
  --hot-glow: 0 10px 24px -10px rgba(229, 72, 77, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  --focus: #FF8A8E;
  --panel-bg: rgba(255, 255, 255, 0.055); --panel-line: rgba(255, 255, 255, 0.11);
  --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 20px 40px -24px rgba(0, 0, 0, 0.7);
  --inner-bg: rgba(255, 255, 255, 0.035); --inner-line: rgba(255, 255, 255, 0.11);
  --blur: 18px;
  --popover-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  --chart-1: #E5484D; --chart-2: #F3F1EC; --chart-3: #7D8592; --chart-4: #5B9BFF;
  --chart-muted: rgba(255, 255, 255, 0.18); --chart-track: rgba(255, 255, 255, 0.08); --chart-grid: rgba(255, 255, 255, 0.07); --chart-tick: #AEB5BF;
  --chart-line: #FF5A5F; --chart-area-top: rgba(255, 90, 95, 0.42); --chart-in: rgba(91, 155, 255, 0.88); --chart-out: rgba(125, 133, 146, 0.8);
}
/* glass needs both a blur and the light behind it: without backdrop-filter, or when the user asks for less
   transparency, panels are solid (the text tiers were checked on these solids too) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="dark"] { --panel-bg: #161A20; --shell: #161A20; --blur: 0px; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme="dark"] { --panel-bg: #161A20; --surface-2: #1E232A; --shell: #161A20; --inner-bg: #1B2027; --blur: 0px; }
}

/* ---------- legacy aliases (the old achromatic-ledger names; module CSS still reads them) ---------- */
:root, html[data-theme="light"], html[data-theme="dark"] {
  --ground: var(--canvas); --raised: var(--surface-2); --active: var(--surface-3);
  --border: var(--line); --rule: var(--line-soft);
  --muted: var(--text-2); --faint: var(--text-3); --ink: var(--text);
  --accent: var(--red); --positive: var(--green-ink); --negative: var(--red-ink); --warning: var(--amber-ink);
  --pill-positive-bg: var(--green-tint); --pill-positive-ink: var(--green-ink);
  --pill-negative-bg: var(--red-tint); --pill-negative-ink: var(--red-ink);
  --pill-warning-bg: var(--amber-tint); --pill-warning-ink: var(--amber-ink);
  --pill-neutral-bg: var(--surface-3); --pill-neutral-ink: var(--text-2);
  --pill-info-bg: var(--blue-tint); --pill-info-ink: var(--blue-ink);
  --grid: var(--chart-grid); --axis-ink: var(--chart-tick); --chart-mark: var(--text); --chart-span: 0.06;
}
html[data-theme="dark"] { --chart-span: 0.12; }