/* Komax Tunisia — Contrôle CF / OC : design tokens
 * Brand colours: official values from the Komax brand portal, page "Basics: Colors"
 * https://www.komaxgroup.com/en/brand-portal/komax-brand-portal/basic-elements-komax/basics-colors-komax
 * (Blue 396999, Red f04c54, Light gray c6cacd, Dark gray 4d4e4d.)
 * Secondary palette (same page, read 2026-10-21): blue c5d5eb / 8ba8cb / 396999 / 295077 / 253e5b, red ebd4d1 / ecbcb6 / f04c54 /
 * a93f47 / 613439, gray ededed / c6cacd / 90969a / 767a7c / 4d4e4d. Typography page: Helvetica Neue (45 Light, 75 Bold), Arial as
 * the system fallback for websites. Logo page: two-colour logo on white only, clear zone 1/10 of its width, never modified.
 * Contrast ratios (WCAG, computed): dark gray on white 8.36 · blue on white 5.75 · white on blue 5.75 ·
 * white on brand red only 3.58 (large text only) · light gray on white 1.65 (decoration/borders only).
 */
:root {
  /* brand */
  --komax-blue: #396999;
  --komax-red: #f04c54;          /* brand highlight: thin accents, sub-headings. NOT the error colour (see below) */
  --komax-gray-light: #c6cacd;
  --komax-gray-dark: #4d4e4d;
  /* secondary palette (official values) */
  --komax-blue-mid: #295077;
  --komax-blue-dark: #253e5b;
  --komax-blue-light: #8ba8cb;
  --komax-blue-extralight: #c5d5eb;
  --komax-red-mid: #a93f47;

  /* derived tints (placeholders for the portal's "extra light / light / mid / dark" variations) */
  --komax-blue-xl: color-mix(in srgb, var(--komax-blue) 8%, white);
  --komax-blue-l:  color-mix(in srgb, var(--komax-blue) 20%, white);
  --komax-blue-d:  color-mix(in srgb, var(--komax-blue) 80%, black);
  --komax-gray-xl: #f3f4f5;
  --komax-gray-l:  #e4e6e8;

  /* surfaces and text */
  --bg: #ffffff;
  --bg-app: var(--komax-gray-xl);
  --surface: #ffffff;
  --border: var(--komax-gray-light);
  --text: var(--komax-gray-dark);        /* 8.36:1 on white */
  --text-muted: #6b6c6b;                 /* 5.1:1 on white — secondary text only */
  --primary: var(--komax-blue);          /* buttons, links, selected row */
  --primary-contrast: #ffffff;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--komax-blue) 35%, white);

  /* status — accessible, deliberately not the brand red; every status ALSO has an icon and a word */
  --st-error-fg: #a4262c;      --st-error-bg: #fde8e9;     /* ERREUR      7.26:1 / 6.19:1 */
  --st-confirm-fg: #4a3a7a;    --st-confirm-bg: #ece8f6;   /* À CONFIRMER 8.01:1 */
  --st-warning-fg: #7a4b00;    --st-warning-bg: #fff1d6;   /* ATTENTION   6.64:1 */
  --st-info-fg: #2a4f73;       --st-info-bg: #e3edf6;      /* INFO        7.19:1 */
  --st-ok-fg: #1f5c3d;         --st-ok-bg: #e6f4ec;        /* OK          6.97:1 */

  /* PDF highlight overlays (semi-transparent, drawn over the PDF.js canvas) */
  --hl-error: rgb(164 38 44 / 0.22);
  --hl-confirm: rgb(74 58 122 / 0.22);
  --hl-warning: rgb(240 160 0 / 0.28);
  --hl-info: rgb(57 105 153 / 0.20);
  --hl-border: 2px solid currentColor;

  /* typography: the colour page does not name a typeface. Ask Komax for the official one (brand portal "typography").
     Until then use the system UI font; numbers MUST be tabular so prices align. */
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;      /* charte Komax : Helvetica Neue, Arial en secours */
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --num: tabular-nums;

  /* spacing and shape */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --radius: 6px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 2px 8px rgb(0 0 0 / 0.06);
  --header-h: 64px;
}
html { font-family: var(--font); color: var(--text); background: var(--bg-app); }
.num { font-variant-numeric: tabular-nums; text-align: right; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }