/* Copied from BALSAN-BRAND-GUIDE(1).md — change values there first, then here. */
@font-face { font-family: Tajawal; src: url('../../assets/fonts/Tajawal-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: Tajawal; src: url('../../assets/fonts/Tajawal-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: Tajawal; src: url('../../assets/fonts/Tajawal-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

:root {
  --brand: #c32026;
  --brand-dark: #96181d;
  --brand-soft: rgba(195,32,38,0.08);
  --brand-ink: #a8181d;
  /* Chart series, validated as a pair for colour-blind separation (dataviz validator, light surface).
     Not in the brand guide yet: add them there before using them elsewhere. */
  --viz-sent: #c32026;
  --viz-received: #2a78d6;
  --bg: #f6f4f2;
  --surface: #ffffff;
  --surface-2: #f2efec;
  --line: #ddd7d2;
  --line-soft: #ebe6e2;
  --ink: #1c1a1c;
  --ink-2: #5d5760;
  --ink-3: #8b848d;
  --good: #1c7a52;
  --good-ink: #126944;
  --good-soft: rgba(28,122,82,0.10);
  --warn: #9a6a10;
  --warn-ink: #855a08;
  --warn-soft: rgba(154,106,16,0.12);
  --critical: #c2461f;
  --critical-ink: #a83a17;
  --critical-soft: rgba(194,70,31,0.10);
  --critical-line: #e8b4ae;
  --report-paper: #faf8f6;
  --report-ink: #231f20;
  --report-red: #c32026;
  --report-mute: #857e7a;
  --report-hair: #ded9d4;
  --report-hair-2: #ece9e6;
  --gutter: 16px;
  --kpi-gap: 11px;
  --card-pad-y: 16px;
  --card-pad-x: 18px;
  --card-gap: 18px;
  --cell-pad-y: 7px;
  --cell-pad-x: 9px;
  --radius-card: 12px;
  --radius-pill: 999px;
  --font-sans: Tajawal, "Segoe UI", system-ui, sans-serif;
  --touch: 44px;
}
:root[data-theme="dark"] {
  --brand-soft: rgba(195,32,38,0.13);
  --brand-ink: #ff7d80;
  --viz-sent: #e0474c;
  --viz-received: #3987e5;
  --bg: #131015;
  --surface: #1b171d;
  --surface-2: #232028;
  --line: #322c36;
  --line-soft: #272229;
  --ink: #f2ecf0;
  --ink-2: #b3aab3;
  --ink-3: #857c86;
  --good: #2f9c6e;
  --good-ink: #74d8a8;
  --good-soft: rgba(47,156,110,0.13);
  --warn: #c28a24;
  --warn-ink: #f0c56b;
  --warn-soft: rgba(194,138,36,0.13);
  --critical: #e04a3a;
  --critical-ink: #ff9184;
  --critical-soft: rgba(224,74,58,0.13);
  --critical-line: #6d2a2a;
}