/* Danholsen Workspace - design tokens. THE ONLY place colours, radii, spacing and shadows are defined.
   Everything else (app.css and later screens) reads these with var(--name). Do not redeclare them elsewhere.
   Palette: cream paper, warm ink, charcoal dark mode, Danholsen amber (#F2A900) from the logo.
   Theme is set by <html data-t="light|dark"> (index.html + app.js applyTheme). */

:root{
  /* ---- type ---- */
  --font:'Public Sans',Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* ---- brand (same in both themes) ---- */
  --ac:#F2A900;            /* Danholsen amber: primary action, focus, highlights */
  --ac-ink:#16130E;        /* text/icons placed ON amber (and the near-black used for buttons sitting on amber) */
  --charcoal:#1B1B1B;      /* logo charcoal: fixed surface/ink, same in both themes */
  --edit:#1F4FD8;          /* in-document editing: caret, selected cell, focus outline on the sheet */
  --bad-solid:#D64545;     /* solid red fills (dots, bars, delete buttons with white text) */
  --ok-solid:#1E9E5A;      /* solid green fills (progress, done dots) */
  --tx2:var(--mu);         /* legacy alias */

  /* ---- spacing scale (4px base) ---- */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;

  /* ---- radii ---- */
  --rc:22px;               /* cards / panels */
  --rb:15px;               /* buttons / inputs */
  --r:16px;                /* tiles */
  --r-sm:10px;--r-pill:99px;

  /* ---- motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1);--dur:.18s;

  /* ---- no blueprint grid (kept as a token because body references it) ---- */
  --grid:transparent;

  /* ---- chat bubbles (WhatsApp-style) ---- */
  --wa-me:#F8E3A3;--wa-me-tx:#16130E;--wa-ot:#fff;--wa-wall:#efe9dc;--wa-chip:#fff;
}

/* ---------- LIGHT: cream paper ---------- */
:root,:root[data-t=light]{
  --bg:#F5F4EF;            /* app background */
  --sf:#FDFCF9;            /* cards, sheets */
  --sf2:#EDEBE3;           /* inset areas, chips */
  --tx:#1F1E1D;            /* text */
  --mu:#66655F;            /* secondary text (>= 4.5:1 on --bg) */
  --ln:#DEDBD1;            /* hairlines */
  --desk:#E8E6DE;          /* desktop surround of the editor */
  --bl:#1F1E1D;            /* accent text / links: ink in light, amber in dark */
  --sh:0 1px 0 rgba(31,30,29,.04),0 16px 30px -22px rgba(31,30,29,.45);

  /* status (text/icon colour; soft = tinted background) */
  --ok:#1B7F4D;   --ok-soft:color-mix(in srgb,#1B7F4D 12%,var(--sf));
  --warn:#8A5A00; --warn-soft:color-mix(in srgb,#F2A900 18%,var(--sf));
  --bad:#C03A2E;  --bad-soft:color-mix(in srgb,#C03A2E 10%,var(--sf));
  --info:#2B5FB3; --info-soft:color-mix(in srgb,#2B5FB3 10%,var(--sf));

  --focus:0 0 0 3px color-mix(in srgb,var(--ac) 55%,transparent);
  --wa-me:#F8E3A3;--wa-me-tx:#16130E;--wa-ot:#fff;--wa-wall:#efe9dc;--wa-chip:#fff;
}

/* ---------- DARK: warm charcoal ---------- */
:root[data-t=dark]{
  --bg:#1C1B1B;
  --sf:#262525;
  --sf2:#302F2F;
  --tx:#F5F4EF;
  --mu:#A9A8A6;
  --ln:#3F3E3E;
  --desk:#141313;
  --bl:#F2A900;
  --sh:0 1px 0 rgba(255,255,255,.03),0 18px 30px -22px #000;

  --ok:#5FD493;   --ok-soft:color-mix(in srgb,#5FD493 14%,var(--sf));
  --warn:#F2B93B; --warn-soft:color-mix(in srgb,#F2A900 16%,var(--sf));
  --bad:#FF8A80;  --bad-soft:color-mix(in srgb,#FF8A80 14%,var(--sf));
  --info:#8FB4FF; --info-soft:color-mix(in srgb,#8FB4FF 14%,var(--sf));

  --focus:0 0 0 3px color-mix(in srgb,var(--ac) 60%,transparent);
  --wa-me:#4a3a0c;--wa-me-tx:#f6ecd2;--wa-ot:#262626;--wa-wall:#0f0d0a;--wa-chip:#262626;
}