/* theme.css — Muyassir console design tokens.
   Two modes on one contract: set data-theme="dark" | "light" on <html>.
   Nothing in ui.css or the screens uses a raw hex. Change a value here only.

   Dark mode is a NEUTRAL charcoal ground, not a green one. Forest and brass
   are accents that sit ON it. Light mode is high-contrast ink on warm paper.

   Imported from Claude Design project 019dcb0d ("Muyassir Leader Console —
   Overhaul"). Keep this file in step with the design source: app-specific
   adjustments belong in the shell <style> block in index.html, not here. */

:root{
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-ui:'DM Sans',system-ui,-apple-system,sans-serif;

  --r-sm:8px; --r-md:11px; --r-lg:14px; --r-pill:999px;
  --row-h:44px;
  --gap:14px;

  /* brand constants (identical in both modes) */
  --forest:#0F3D2E;
  --brass:#C9A961;

  /* categorical hues — data series, module identity, section tints */
  --c-teal:#3E8E7E;
  --c-sky:#6699C4;
  --c-clay:#CE8446;
  --c-plum:#9B6688;
  --c-sage:#87A473;
  --c-brass:#C9A961;

  /* partner brand dots — fixed, never themed */
  --stripe:#8B85FF;
  --supabase:#3ECF8E;
}

/* ─────────────────────────── DARK ───────────────────────────
   Neutral warm charcoal. Only --sunken carries a faint green cast. */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#040907;                /* near-black ground */
  --chrome:#000000;            /* topbar, sidebar, tab bar */
  --panel:#0C1D16;             /* forest cards */
  --panel-2:#143026;           /* raised forest */
  --sunken:#020504;

  --ink:#EFE8DA;
  --ink-2:rgba(239,232,218,.78);
  --ink-3:rgba(239,232,218,.60);

  --hair:rgba(201,169,97,.20);
  --hair-2:rgba(201,169,97,.36);
  --focus:#E3C888;

  --primary:#C9A961;
  --primary-ink:#06110D;
  --primary-soft:rgba(201,169,97,.13);

  --good:#74C99B; --warn:#E3B45F; --bad:#E68A7C; --info:#8FB6DC;
  --good-soft:rgba(116,201,155,.15); --warn-soft:rgba(227,180,95,.15);
  --bad-soft:rgba(230,138,124,.15);  --info-soft:rgba(143,182,220,.15);

  --tint-teal:rgba(62,142,126,.16);
  --tint-sky:rgba(102,153,196,.16);
  --tint-clay:rgba(206,132,70,.16);
  --tint-plum:rgba(155,102,136,.16);
  --tint-sage:rgba(135,164,115,.16);

  --shadow:none;
  --hero:linear-gradient(118deg,#143026 0%,#0C1D16 62%);
  --brass-text:#C9A961;
}

/* ─────────────────────────── LIGHT ──────────────────────────
   Near-black ink on warm paper; cards lift white off the ground. */
html[data-theme="light"]{
  color-scheme:light;
  --bg:#EDE8DD;
  --chrome:#FFFFFF;
  --panel:#FFFFFF;
  --panel-2:#EFEADF;
  --sunken:#E7E1D3;

  --ink:#0D1210;
  --ink-2:#333B36;
  --ink-3:#5A625C;

  --hair:#D2C9B5;
  --hair-2:#AFA48A;
  --focus:#0F3D2E;

  --primary:#0E3A2B;
  --primary-ink:#FFFDF7;
  --primary-soft:rgba(14,58,43,.09);

  --good:#1F6B45; --warn:#8A5A0C; --bad:#A93B2C; --info:#2F5D86;
  --good-soft:rgba(31,107,69,.11); --warn-soft:rgba(138,90,12,.11);
  --bad-soft:rgba(169,59,44,.1);   --info-soft:rgba(47,93,134,.11);

  --tint-teal:rgba(31,107,90,.09);
  --tint-sky:rgba(47,93,134,.09);
  --tint-clay:rgba(160,94,32,.09);
  --tint-plum:rgba(122,70,104,.09);
  --tint-sage:rgba(92,124,72,.09);

  --shadow:0 1px 2px rgba(13,18,16,.06),0 10px 26px rgba(13,18,16,.07);
  --hero:linear-gradient(118deg,#FFFFFF 0%,#F4EFE4 100%);
  --brass-text:#7A5C15;

  /* categorical hues are re-cut for a white ground — the dark-mode values
     land at 2–3:1 here, which is why light mode read washed out. */
  --c-teal:#1C6353;
  --c-sky:#2B5578;
  --c-clay:#95541B;
  --c-plum:#71405F;
  --c-sage:#4C6A39;
  --c-brass:#7A5C15;
}
