/* =========================================================================
   Sightstone — design tokens
   THE ONLY FILE IN THE CODEBASE ALLOWED TO CONTAIN A HEX VALUE.
   If you find a hex anywhere else, it is a bug. See scripts/check-tokens.sh
   ========================================================================= */

:root{
  /* ---- typography ---- */
  --font-display:'Archivo','Suisse Intl',Helvetica,Arial,sans-serif;
  --font-body:'Inter Tight','Söhne',Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --fs-display:26px;   --lh-display:1.1;   --ls-display:-.035em;
  --fs-h2:13.5px;
  --fs-body:13px;
  --fs-table:12.5px;
  --fs-data:11px;      /* mono: dates, ids, counts */
  --fs-label:9px;      /* mono uppercase: field titles, column heads, eyebrows */
  --ls-label:.15em;
  --fs-kpi:30px;       /* KPI main figure (desktop) */
  --fs-kpi-compact:22px; /* KPI main figure on narrow viewports */

  /* ---- spacing scale — no value outside this list ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:22px; --sp-6:32px; --sp-7:44px; --sp-8:64px;

  /* ---- LargeScreen page inset ----
     Chrome / filters / KPIs / .largescreen-content share --page-inset-x
     so .grid aligns with KPI left/right edges.
     Panels inside content stay full-bleed (no extra pad around tables). */
  --page-inset-x:var(--sp-5);
  --page-inset-bottom:var(--sp-3);
  /* Rail width: fits group titles e.g. « Chaîne d'approvisionnement » */
  --ls-sidebar-width:200px;
  /* Same vertical rhythm: filter-bar → KPI and KPI → content */
  --kpi-to-content-gap:var(--sp-3);

  /* ---- LargeScreen panel gap (CANONICAL) ----
     ONLY value allowed between sibling dashboard panels.
     Always 12px (= --sp-3). Use var(--panel-gap) — never raw 12px,
     16px, 20px, or --sp-4/--sp-5 for panel separation.
     Applies to: .grid, .row-2, .row-12, MiningTitle, Drilling, Permits. */
  --panel-gap:var(--sp-3); /* 12px */

  /* ---- Popup window vs screen (CANONICAL) ----
     Margin from available screen edges when LargeScreenPopupClamp /
     shell fit resize a popup. Never hard-code 10px / 20px in fit JS. */
  --popup-screen-margin:var(--sp-5); /* 22px */

  /* ---- filter-bar empty options (CANONICAL copy) ----
     #topbar-filter-pills / .filter-bar:
     - Pays & Permis empty option: "— Tous —" / "— All —" (sentence case;
       never TOUS/ALL). Labels stay uppercase via .field label.
     - When Période is present: first option must be
       "Sans limite" / "No limit" (value ""). */
  /* ---- filter-bar table search (CANONICAL) ----
     .field.field--table-search in #topbar-filter-pills / .filter-bar
     (and shell .ls-table-search-pill). Outer width from
     --table-search-field-min; the input flex-fills the field.
     --table-search-input-* kept for legacy refs / max cap. */
  --table-search-field-min:473px;     /* was 630px */
  --table-search-input-min:270px;     /* was 360px — unused; input is 100% */
  --table-search-input-width:20.25rem; /* was 27rem — unused; input is 100% */
  --table-search-input-max:47.25rem;  /* was 63rem — field max-width */

  --radius:2px;        /* panels/chrome. Form fields (.input/.select/.textarea) use 0. */
  --radius-pill:50%;   /* status dots and avatars only */
  --border:1px;

  /* ---- severity ramp ---- */
  --sev-negligible:#BFC5C3;
  --sev-low:#7FA898;
  --sev-medium:#C79E4C;
  --sev-high:#A85A47;
  --sev-critical:#C41E3A;  /* scarlet — Critique / Critical only */

  /* ---- status: IDENTICAL IN EVERY THEME ----
     these carry meaning, so they must never be theme-dependent.
     In progress / due soon (.status--due) uses severity medium. */
  --status-ok:#2F7568;      --status-ok-bg:#E4EEEB;
  /* Row highlight — hue aligned with Sightstone-Gov Taxes (#1A73E8 / #0D6EFD).
     Selection is stronger than Gov's 12% wash so the active row stays obvious
     on white and zebra gray. */
  --row-hover:rgba(13,110,253,.08);
  --row-hover-neutral:rgba(22,28,32,.06);
  --row-selected:#A3C7F6;
  --tx-accent:#3B82F6;
  --tx-accent-hover:#2563EB;
  --status-due:var(--sev-medium);     --status-due-bg:#F5EED9;
  --status-bad:#8C4133;     --status-bad-bg:#F3E1DD;
  --status-neutral:#B4BABD;
  --series-secondary:#7C9199;

  /* ---- colour mark + numeric value (CANONICAL) ----
     Table / listing cells that show a status dot (.status i) or severity
     square (.severity i) beside a number. Gap from the right edge of the
     mark to the leftmost digit of the WIDEST value in that column is
     --metric-swatch-gap (6px — same exception family as table cell pad).
     Shorter values right-align in that shared digit width, so mark→digit
     space grows. Markup: .status|.severity.metric-swatch > i +
     .metric-swatch-num + optional .metric-swatch-unit (.metric-unit for
     L/Hours, L/100km, etc.). After paint: SsMetricSwatch.sync(root). */
  --metric-swatch-gap:6px;
  --metric-unit-fs:9px;

  /* ---- risk matrix ramp (sequential, never a rainbow) ---- */
  --risk-1:#E6E6E2; --risk-2:#C8D3CB; --risk-3:#DFCCA2;
  --risk-4:#D2AB8C; --risk-5:#B47B6A;

  --accent:var(--status-ok);

  /* Sidebar logged-in initials (avatar) + brand rule under Sightstone mark */
  --sidebar-avatar:#5f8f8a;

  /* ---- form control row height (input/select outer box) ----
     Combo-adjacent + (.field-with-add > .btn--add) MUST equal this:
     height = width = --control-height (square). Never invent another size. */
  --control-height:32px;

  /* ---- add (+) / edit (✎) controls — compact green squares on panel heads ---- */
  --btn-add:#3A8F80;           /* slightly lighter than --status-ok */
  --btn-add-hover:#348A7B;
  --btn-add-size:20px;         /* green panel/table title + and ✎; .pager buttons (page # / « / »); always square */
  --btn-add-combo-size:var(--control-height); /* combo-adjacent +; = field height */
  --btn-add-fs:14px;
  /* Edit uses the same size/colour tokens as +; exit-edit state uses neutrals */
  --btn-edit:var(--btn-add);
  --btn-edit-hover:var(--btn-add-hover);
  --btn-edit-size:var(--btn-add-size);
  --btn-edit-fs:12px;


  /* ---- categorical palette — calendar events, chart series, tag chips ----
     Muted, print-safe, max 8. Category colours identify, status colours judge:
     never use a status token to identify a category or vice versa. */
  --cat-1:#37776A;  /* teal      · e.g. permitting */
  --cat-2:#8F6520;  /* ochre     · e.g. taxation */
  --cat-3:#5E7A99;  /* blue-grey · e.g. meetings */
  --cat-4:#8C5A74;  /* plum      · e.g. incidents */
  --cat-5:#6E8253;  /* olive     · e.g. audits */
  --cat-6:#A3644A;  /* clay      · e.g. contracts */
  --cat-7:#5F8B85;  /* sea       · e.g. tenders */
  --cat-8:#77706B;  /* stone     · e.g. personal */

  /* ---- chart series (CANONICAL, max 8) — light → dark luminance ----
     Prefer chart-1 for the largest share / dominant series, chart-8 for
     the smallest slices. Mix of Brume lights + Verdigris darks. */
  --chart-1:#B9D0CB;  /* Pale teal 200 · largest */
  --chart-2:#A9BFB8;  /* Verdigris 200 */
  --chart-3:#8FA8BB;  /* Mist blue */
  --chart-4:#8FB6A9;  /* Mist sea */
  --chart-5:#6E9FBF;  /* Steel 400 */
  --chart-6:#7C8B86;  /* Stone 500 */
  --chart-7:#37776A;  /* Teal 600 */
  --chart-8:#1F3F55;  /* Navy 800 · smallest */

  /* ---- statistical marks on a range bar (CANONICAL, max 5) ----
     Saturated on purpose: these are thin ticks read at a glance against each
     other, not fills. Independent from the status system — they identify
     which statistic is plotted, they never judge a value. */
  --mark-day:#0D0D0D;   /* today · black */
  --mark-w7:#2E86DE;    /* 7-day average · light blue */
  --mark-m30:#2FBF71;   /* 30-day average · light green */
  --mark-avg:#E8760C;   /* total average · orange */
  --mark-max:#D62828;   /* period maximum · red */

  /* ---- gap to a reference value (aliases, no new colour) ----
     Reads a signed percentage against an average: far below, below,
     on par, far above. The sign carries the meaning, so the wording
     next to the figure stays mandatory. */
  --delta-below-strong:var(--mark-max);
  --delta-below:var(--mark-avg);
  --delta-on-par:var(--mark-day);
  --delta-above-strong:var(--mark-m30);

  /* meters and rings (replacing radial gauges and donut charts) */
  --meter-track:var(--line-soft);
  --meter-fill:var(--cat-1);

  /* utility values referenced by components.css so the guard passes everywhere */
  --white:#FFFFFF;
  --scrim:rgba(22,28,32,.4);          /* modal overlay */
  --rail-hover-tint:rgba(255,255,255,.05);
  --focus-ring:0 0 0 2px var(--status-ok-bg);

}

/* =========================================================================
   THEMES — set data-theme on <html>. Default to "1".
   Only surface neutrals change. Status colour never changes.
   ========================================================================= */

/* 1 · SLATE — cool blue-grey. Crispest; accent pops hardest. */
html[data-theme="1"]{
  --surface-page:#EDEFF1;
  --surface-panel:#FFFFFF;
  --surface-sunken:#F5F7F8;
  --surface-hover:#F8FAFB;

  --text-primary:#161C20;
  --text-secondary:#4B565C;
  --text-tertiary:#6E7A80;

  --line:#DDE2E5;
  --line-soft:#E9EDEF;

  --rail-bg:#202A30;
  --rail-sunken:#182126;
  --rail-line:#333F46;
  --rail-text:#C1CAD0;
  --rail-text-strong:#EDF1F3;
  --rail-text-soft:#7C8991;
  --rail-active-text:#F2F5F7;
  --rail-active-bg:rgba(47,117,104,.24);
  --rail-active-line:#4E9384;
  --rail-hover:#2A363D;

  --map-sea:#DFE5E9; --map-land:#E9ECEE; --map-line:#C4CDD3;
}

/* 2 · GRAPHITE — true neutral. Safest for print/export. */
html[data-theme="2"]{
  --surface-page:#EFEFEE;
  --surface-panel:#FFFFFF;
  --surface-sunken:#F6F6F5;
  --surface-hover:#FAFAF9;

  --text-primary:#191919;
  --text-secondary:#525250;
  --text-tertiary:#797976;

  --line:#E0E0DD;
  --line-soft:#ECECEA;

  --rail-bg:#272726;
  --rail-sunken:#1E1E1D;
  --rail-line:#3C3C3A;
  --rail-text:#C6C6C3;
  --rail-text-strong:#F0F0EE;
  --rail-text-soft:#84847F;
  --rail-active-text:#F4F4F2;
  --rail-active-bg:rgba(47,117,104,.26);
  --rail-active-line:#4E9384;
  --rail-hover:#333332;

  --map-sea:#E3E3E0; --map-land:#EDEDEA; --map-line:#CACAC5;
}

/* 3 · MINERAL — cool green-grey. Most branded. */
html[data-theme="3"]{
  --surface-page:#E9EDEB;
  --surface-panel:#FFFFFF;
  --surface-sunken:#F2F6F4;
  --surface-hover:#F7FAF9;

  --text-primary:#141D1A;
  --text-secondary:#485450;
  --text-tertiary:#6C7A75;

  --line:#D8DFDC;
  --line-soft:#E6ECE9;

  --rail-bg:#1D2724;
  --rail-sunken:#16201D;
  --rail-line:#2F3B37;
  --rail-text:#BECAC5;
  --rail-text-strong:#ECF2EF;
  --rail-text-soft:#7A8983;
  --rail-active-text:#F1F6F4;
  --rail-active-bg:rgba(47,117,104,.30);
  --rail-active-line:#579C8C;
  --rail-hover:#28332F;

  --map-sea:#DCE4E1; --map-land:#E8EDEA; --map-line:#C2CDC8;
}

/* fallback so nothing renders unstyled if data-theme is missing */
html:not([data-theme]){ --surface-page:#EDEFF1; --surface-panel:#FFFFFF;
  --surface-sunken:#F5F7F8; --surface-hover:#F8FAFB; --text-primary:#161C20;
  --text-secondary:#4B565C; --text-tertiary:#6E7A80; --line:#DDE2E5;
  --line-soft:#E9EDEF; --rail-bg:#202A30; --rail-sunken:#182126;
  --rail-line:#333F46; --rail-text:#C1CAD0; --rail-text-strong:#EDF1F3;
  --rail-text-soft:#7C8991; --rail-active-text:#F2F5F7;
  --rail-active-bg:rgba(47,117,104,.24); --rail-active-line:#4E9384;
  --rail-hover:#2A363D; --map-sea:#DFE5E9; --map-land:#E9ECEE; --map-line:#C4CDD3; }