/* ============================================================
   CHHAPERIA ERP — THEME / DESIGN TOKENS
   "Operations Console" — precision-engineered, data-dense.
   Brand: #F06820 (orange arcs) • #E84820 (red diamond)
   Dynamic accent system + first-class dark & light modes.
   ============================================================ */

:root{
  /* brand anchors */
  --brand-orange:#F06820;
  --brand-red:#E84820;
  --brand-orange-600:#d9551a;
  --brand-orange-300:#ff8c4d;

  /* accent (overridden by [data-accent]) */
  --accent:#F06820;
  --accent-600:#d9551a;
  --accent-300:#ff8c4d;
  --accent-soft:rgba(240,104,32,.14);
  --accent-line:rgba(240,104,32,.34);
  /* flat by ruling 2026-08-31 — gradient fills read as noise; keep the var so 30+ usages stay valid */
  --accent-grad:linear-gradient(0deg,var(--accent),var(--accent));

  /* status palette */
  --ok:#18b364; --ok-soft:rgba(24,179,100,.15);
  --warn:#eab308; --warn-soft:rgba(234,179,8,.16);
  --danger:#f04438; --danger-soft:rgba(240,68,56,.15);
  --info:#3b82f6; --info-soft:rgba(59,130,246,.15);
  --violet:#8b5cf6; --violet-soft:rgba(139,92,246,.15);

  /* chart series — FOUR hues, not eight (ruled 2026-08-14, applied 09-02):
     the accent, then blue, green and violet, machine-checked for contrast
     and for colour-blind separation. --c5…--c8 stay defined for the code
     that still counts to eight, and repeat the four; a donut with more
     than four slices folds the rest into "Other" (charts.js) rather than
     reaching for a fifth colour. */
  --c1:var(--accent); --c2:#1668a8; --c3:#4a7a1e; --c4:#7a4fa0;
  --c5:var(--c1); --c6:var(--c2); --c7:var(--c3); --c8:var(--c4);

  /* geometry — one radius family: 6 / 10 / 14 */
  --radius:10px; --radius-sm:6px; --radius-lg:14px; --radius-pill:999px;

  /* spacing scale (4/8 rhythm) */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* typography */
  /* the operating system's own faces — no web-font download (the plant PC has
     no internet, and the download shifted every text box as it arrived) */
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;

  /* type scale — golden-ratio ladder on a 13px base:
     13 → 21 → 34 (×φ), half-steps 17/26 (×√φ), data steps 10/11/12/15 */
  --fs-2xs:10px; --fs-xs:11px; --fs-sm:12px; --fs-md:13px;
  --fs-lg:15px; --fs-xl:17px; --fs-2xl:21px; --fs-3xl:26px;
  --fs-4xl:34px; --fs-5xl:42px;
  --lh:1.45;

  /* motion */
  --tr:.17s cubic-bezier(.4,0,.2,1);
  --tr-slow:.28s cubic-bezier(.4,0,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- DARK (default) — Graphite Industrial ---------- */
[data-theme="dark"]{
  --c2:#3e90cc; --c3:#6fa13c; --c4:#9878ce;   /* the dark-ground set of the same four chart hues */
  --bg:#0b0d13;
  --panel:#12151d;
  --panel-2:#171b25;
  --panel-3:#1f2431;
  --elev:#1b202c;
  --line:rgba(255,255,255,.075);
  --line-strong:rgba(255,255,255,.15);
  --sheen:rgba(255,255,255,.055);            /* legacy; inset sheens are off (see --inset-top) */
  --sheen-strong:rgba(255,255,255,.09);
  --text:#eef1f7;
  --text-dim:#a9b2c2;
  --text-mut:#6b7789;
  --sidebar:#070910;
  --sidebar-2:#0b0e16;
  --sidebar-line:rgba(255,255,255,.06);
  --sidebar-text:#aeb8cc;
  --table-stripe:transparent;                 /* zebra off — hover + hairlines carry the rows */
  --table-hover:rgba(255,255,255,.05);
  --glass:rgba(14,17,25,.72);
  --scrim:rgba(3,5,9,.62);

  --shadow-1:0 1px 2px rgba(0,0,0,.35);
  --shadow-2:0 6px 16px rgba(0,0,0,.32), 0 2px 6px rgba(0,0,0,.25);
  --shadow-pop:0 16px 40px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.32);
  --ring:0 0 0 3px var(--accent-soft);
  --inset-top:inset 0 0 0 0 transparent;      /* sheen highlights off */
}

/* ---------- LIGHT — Precision Daylight ---------- */
[data-theme="light"]{
  --bg:#eef1f6;
  --panel:#ffffff;
  --panel-2:#f5f7fb;
  --panel-3:#e9edf4;
  --elev:#ffffff;
  --line:rgba(15,23,42,.10);
  --line-strong:rgba(15,23,42,.17);
  --sheen:rgba(255,255,255,.9);
  --sheen-strong:#ffffff;
  --text:#0d1220;
  --text-dim:#465066;
  --text-mut:#7b8698;
  --sidebar:#0a0d15;
  --sidebar-2:#0e121c;
  --sidebar-line:rgba(255,255,255,.06);
  --sidebar-text:#aeb8cc;
  --table-stripe:transparent;
  --table-hover:rgba(15,23,42,.045);
  --glass:rgba(255,255,255,.8);
  --scrim:rgba(15,23,42,.42);

  --shadow-1:0 1px 2px rgba(15,23,42,.07);
  --shadow-2:0 6px 16px rgba(15,23,42,.10), 0 2px 6px rgba(15,23,42,.06);
  --shadow-pop:0 16px 40px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.10);
  --ring:0 0 0 3px var(--accent-soft);
  --inset-top:inset 0 0 0 0 transparent;
}

/* ============ DYNAMIC ACCENTS ============ */
[data-accent="orange"]{ --accent:#F06820; --accent-600:#d9551a; --accent-300:#ff8c4d; --accent-soft:rgba(240,104,32,.14); --accent-line:rgba(240,104,32,.34);}
[data-accent="red"]   { --accent:#E84820; --accent-600:#c63818; --accent-300:#ff7a55; --accent-soft:rgba(232,72,32,.14); --accent-line:rgba(232,72,32,.34);}
[data-accent="blue"]  { --accent:#3b82f6; --accent-600:#2266c2; --accent-300:#7cb0fb; --accent-soft:rgba(59,130,246,.15); --accent-line:rgba(59,130,246,.36);}
[data-accent="teal"]  { --accent:#0fb5ae; --accent-600:#0a948e; --accent-300:#54d6d0; --accent-soft:rgba(15,181,174,.15); --accent-line:rgba(15,181,174,.34);}
[data-accent="violet"]{ --accent:#8b5cf6; --accent-600:#6442e6; --accent-300:#b49bff; --accent-soft:rgba(139,92,246,.15); --accent-line:rgba(139,92,246,.34);}
[data-accent="green"] { --accent:#18b364; --accent-600:#11823b; --accent-300:#4fd18c; --accent-soft:rgba(24,179,100,.15); --accent-line:rgba(24,179,100,.34);}
[data-accent="pink"]  { --accent:#ec4899; --accent-600:#cf2f80; --accent-300:#f57ab8; --accent-soft:rgba(236,72,153,.15); --accent-line:rgba(236,72,153,.34);}
[data-accent="amber"] { --accent:#eab308; --accent-600:#bd8600; --accent-300:#f3c43e; --accent-soft:rgba(234,179,8,.16); --accent-line:rgba(234,179,8,.34);}

*{box-sizing:border-box;margin:0;padding:0}
/* The HTML `hidden` attribute must always win over component display rules. */
[hidden]{display:none !important}
html,body{height:100%}
body{
  font-family:var(--font);
  font-size:var(--fs-md);
  line-height:var(--lh);
  background:var(--bg);
  color:var(--text);
  font-feature-settings:" cv11","ss01";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color var(--tr), color var(--tr);
  overflow:hidden;
}
::selection{background:var(--accent-soft);color:var(--text)}
a{color:inherit;text-decoration:none}
button{font-family:inherit}

/* tabular figures for all data surfaces — engineered precision */
.mono,.tbl .num,.tbl .mono,.kpi-val,.crm-card-val,.crm-col-val,.crm-card-due,
.barlist .row .val,.legend .li .v,.chart-tooltip .tt-r b,.sup-card-meta,kbd{
  font-variant-numeric:tabular-nums;
}

/* accessible focus ring (keyboard only) — engine priority #1 */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.icon-btn:focus-visible,.nav-item:focus-visible,.input:focus-visible,
.select:focus-visible,.chip:focus-visible{outline:none;box-shadow:var(--ring);border-color:var(--accent)}

/* scrollbars */
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:20px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:var(--accent-line);background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

kbd{
  font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:6px;
  background:var(--panel-3);border:1px solid var(--line);box-shadow:var(--inset-top);color:var(--text-dim);
}

/* respect reduced-motion — engine a11y requirement */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}