/* ==========================================================================
   Inovbi — design tokens (single source of truth)

   One token layer shared by the ERP console (ESM and CSM) and the public
   site. Direction A "Précis" (2026-09-26): the Inovbi teal-green brand on
   green-tinted neutrals, hairlines rather than shadows, Instrument Sans
   for display, IBM Plex Sans for text, IBM Plex Mono for references and
   figures. A gold signal accent is kept for rare emphasis.

   Everything downstream — static/erp/{base,shell,components}.css, the
   per-module stylesheets, and inline styles still left in templates —
   resolves colour, spacing, type and elevation through these variables.
   Never hardcode a hex or a px that has a token.

   Dark mode is defined but dormant: it only activates when
   <html data-theme="dark"> is set. Introduce it later without touching
   components — they already read the tokens.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  /* ---- brand / identity ------------------------------------------------ */
  --spruce:            #0d211d;   /* darkest surface: sidebar, dark bands  */
  --spruce-2:          #12302a;
  --brand:             #0b6b58;   /* primary accent — teal-green           */
  --brand-strong:      #08564a;   /* hover / pressed                       */
  --brand-tint:        #e1efe9;   /* soft wash behind brand content        */
  --brand-tint-strong: #c7e0d8;
  --on-brand:          #ffffff;

  --signal:            #e0a12b;   /* gold — attention, used sparingly      */
  --signal-strong:     #a96f16;   /* text-safe gold on light               */
  --signal-tint:       #f7edd8;

  /* ---- neutrals (slight green-grey bias) ------------------------------ */
  --canvas:            #f4f6f5;   /* page background behind cards           */
  --surface:           #ffffff;   /* cards, panels, menus                   */
  --surface-sunken:    #f0f3f1;   /* insets, table header, quiet fills      */
  --surface-hover:     #e8eeeb;

  --text:              #11201c;   /* primary text                          */
  --text-muted:        #43554f;   /* secondary text, labels                */
  --text-subtle:       #6a7d77;   /* metadata, placeholder                 */
  --text-disabled:     #9aa8a2;

  --line:              #dbe3df;   /* hairline borders                      */
  --line-strong:       #c5d0ca;   /* input borders, stronger dividers      */

  /* on dark surfaces (spruce sidebar / bands) */
  --on-dark:           rgba(255,255,255,0.92);
  --on-dark-muted:     rgba(255,255,255,0.60);
  --on-dark-subtle:    rgba(255,255,255,0.40);
  --on-dark-line:      rgba(255,255,255,0.14);
  --on-dark-fill:      rgba(255,255,255,0.08);
  --on-dark-fill-strong: rgba(255,255,255,0.16);

  /* ---- semantic status (the one status system) ---------------------- */
  --ok:        #2f7d54;  --ok-fg:   #1f6b45;  --ok-bg:   #e3f1e9;
  --warn:      #b7791f;  --warn-fg: #8a5a12;  --warn-bg: #f8ecd7;
  --crit:      #c0392b;  --crit-fg: #a5342a;  --crit-bg: #f7e5e2;
  --info:      #1f6f8b;  --info-fg: #1a5f78;  --info-bg: #e2eef2;
  --neutral-fg: #566;    --neutral-bg: #eef2f0;

  /* ---- chart categorical palette (donut/multi-series identity) -------
     Fixed hue order, validated (dataviz skill: adjacent-pair CVD + normal-
     vision floors pass in both modes) — never reassign a slot per-chart,
     never cycle past 6 without folding extras into "Other". Three of
     these (aqua/yellow/magenta) read under 3:1 against a light surface,
     so anything using this palette must carry a visible label, not color
     alone (every consumer here already does — see _chart_donut.html). */
  --chart-cat-1: #2a78d6;  /* blue    */
  --chart-cat-2: #eb6834;  /* orange  */
  --chart-cat-3: #1baf7a;  /* aqua    */
  --chart-cat-4: #eda100;  /* yellow  */
  --chart-cat-5: #e87ba4;  /* magenta */
  --chart-cat-6: #008300;  /* green   */

  /* ---- type ---------------------------------------------------------- */
  --font-display: 'Instrument Sans', 'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'IBM Plex Sans', 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono:    'IBM Plex Mono', 'IBM Plex Sans Arabic', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base:14px;   /* dense enterprise body / table default */
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;

  --leading-tight: 1.2;
  --leading-normal: 1.55;

  /* ---- spacing scale ----------------------------------------------- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;

  /* ---- radius ----------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-pill: 999px;

  /* ---- elevation ------------------------------------------------- */
  --elev-0: none;
  --elev-1: 0 1px 0 rgba(17,32,28,0.04);
  --elev-2: 0 1px 2px rgba(12,26,23,0.04), 0 12px 28px -14px rgba(12,26,23,0.16);
  --elev-3: 0 24px 60px -20px rgba(12,26,23,0.28);

  /* ---- z-index ------------------------------------------------- */
  --z-header:   100;
  --z-sidebar:  90;
  --z-backdrop: 200;
  --z-drawer:   210;
  --z-popover:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ---- motion ------------------------------------------------ */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 0.12s;
  --dur:      0.2s;

  /* ---- focus ---------------------------------------------- */
  --focus-ring: 0 0 0 3px rgba(11, 107, 88, 0.30);
  --focus-color: var(--brand);

  /* shell (direction A: light sidebar) */
  --shell-sidebar-bg:   #fafbfa;
  --shell-sidebar-ink:  var(--text-muted);
  --shell-sidebar-on:   var(--brand-tint);
  --shell-sidebar-line: var(--line);
  --data-font: var(--font-mono);   /* references, amounts, codes */

  --shell-sidebar-w: 240px;
  --shell-header-h:  56px;
  --content-max:     1560px;
  --measure:         68ch;

  /* ======================================================================
     Legacy aliases — the names the pre-redesign stylesheets and the
     hundreds of inline style="" attributes still use. They now resolve to
     the signal palette, so nothing breaks while the sweep to clean names
     happens module by module. Remove an alias once nothing references it.
     ====================================================================== */
  --navy:          var(--spruce);
  --navy2:         var(--spruce-2);
  --ivory:         var(--surface-sunken);
  --purple:        var(--brand);
  --purple-dark:   var(--brand-strong);
  --purple-darker: var(--spruce);
  --purple-tint:   var(--brand-tint);
  --purple-pale:   #f4f7f5;

  --ink:           var(--text);
  --ink-2:         var(--text-muted);
  --ink-3:         var(--text-subtle);
  --paper:         var(--surface);
  --surface-alt:   var(--surface-sunken);
  --border:        var(--line);
  --border-strong: var(--line-strong);

  --success:       var(--ok);
  --success-tint:  var(--ok-bg);
  --danger:        var(--crit);
  --danger-tint:   var(--crit-bg);

  --footer-bg:     #081512;

  --shadow-sm:     var(--elev-1);
  --shadow-md:     var(--elev-2);

  --font-ui:       var(--font-body);
}

:root[data-theme="dark"] {
  --canvas:            #0a1512;
  --surface:           #111f1a;
  --surface-sunken:    #17251f;
  --surface-hover:     #1c2b24;

  --text:              #eef2f0;
  --text-muted:        #a7b4ae;
  --text-subtle:       #78877f;
  --text-disabled:     #5a6862;

  --line:              #253129;
  --line-strong:       #33443a;

  --brand:             #3fae97;
  --brand-strong:      #57c1ab;
  --brand-tint:        #142b25;
  --brand-tint-strong: #1c3a32;

  --signal:            #e0a12b;
  --signal-strong:     #d99f4e;
  --signal-tint:       #2c2314;

  --ok:   #4fb083;  --ok-fg:   #6cc79c;  --ok-bg:   #15281f;
  --warn: #d2a256;  --warn-fg: #e0b877;  --warn-bg: #2b2214;
  --crit: #d9756a;  --crit-fg: #e79488;  --crit-bg: #2d1a18;
  --info: #5aa9c2;  --info-fg: #7cc0d5;  --info-bg: #14262c;
  --neutral-fg: #9aa8a2; --neutral-bg: #17251f;

  --chart-cat-1: #3987e5;
  --chart-cat-2: #d95926;
  --chart-cat-3: #199e70;
  --chart-cat-4: #c98500;
  --chart-cat-5: #d55181;
  --chart-cat-6: #008300;

  --elev-1: 0 1px 2px rgba(0,0,0,0.35);
  --elev-2: 0 1px 2px rgba(0,0,0,0.3), 0 12px 28px -14px rgba(0,0,0,0.6);
  --elev-3: 0 24px 60px -20px rgba(0,0,0,0.7);

  --focus-ring: 0 0 0 3px rgba(63, 174, 151, 0.4);

  --shell-sidebar-bg:   #0f1a17;
  --shell-sidebar-on:   #1a2d27;
}