/* ==========================================================================
   HazardIQ website — design tokens (the only place colour values live).
   Checked by `node scripts/website-contrast.js` (WCAG 2.x contrast, light + dark).

   Three layers:
   1. PRIMITIVES  --p-*   raw values. Never used in components.
   2. ROLES       --bg --ink --brand --hold ...  what components use. One job each:
        neutrals ........ page, surfaces, lines, text      (bg, surface, ink ...)
        brand accent .... links, primary buttons, focus    (brand, brand-ink, brand-soft)
        verdicts ........ HOLD / CAUTION / CLEAR only      (hold, caution, clear)
                          never decoration, never a button, never a bar chart.
        band ............ the dark panel (final call to action)
   3. BRAND SWITCH  html[data-brand="standalone" | "hastha"]  (set once, in site.js).
        standalone = HazardIQ on its own (default, live).
        hastha     = adds the quiet "by Hastha Solutions" endorsement. Product colours do not change.
   ========================================================================== */

:root{
  /* ---- 1. primitives ---------------------------------------------------- */
  /* neutrals: cool slate, tuned to the app (app/hazardiq-ui.css --bg #eef2f8, --ink #0b1727) */
  --p-slate-0:#FFFFFF;  --p-slate-50:#F4F7FB;  --p-slate-100:#EBF0F6; --p-slate-200:#DAE2EC; --p-slate-300:#C3CEDC;
  --p-slate-500:#71839B; --p-slate-600:#52647B; --p-slate-700:#34475D; --p-slate-900:#0B1727;
  --p-night-950:#0A121E; --p-night-900:#0F1B2D; --p-night-800:#14243A; --p-night-700:#1F3047; --p-night-600:#2C4160;
  --p-night-500:#6A819F; --p-night-300:#93A3B8; --p-night-200:#B6C3D4; --p-night-50:#E8EEF6;
  /* brand blue: from the shield logo (assets/hazardiq-logo.svg: #0a6ed1 -> #0a4d68) */
  --p-blue-600:#0A6ED1; --p-blue-700:#0859A8; --p-blue-800:#0A4D68; --p-blue-ink:#0A5CB0; --p-blue-100:#E1EDFB;
  --p-blue-dk-fill:#0A6ED1; --p-blue-dk-hover:#0D73DB; --p-blue-dk-ink:#6FB4FF; --p-blue-dk-soft:#10305A;
  /* verdict colours. Each verdict has a fill (+ its on-colour), a text colour and a tint. */
  --p-red-600:#B42318;   --p-red-ink:#A11D13;   --p-red-100:#FBE8E5;
  --p-amber-600:#C07200; --p-amber-ink:#7A4500; --p-amber-100:#FFF0D2; --p-amber-on:#1D1200;
  --p-green-600:#1A7F37; --p-green-ink:#14692C; --p-green-100:#E1F3E6;
  --p-red-dk:#E8604F;    --p-red-dk-ink:#FF9080;   --p-red-dk-100:#34161A;
  --p-amber-dk:#E5A13A;  --p-amber-dk-ink:#F2B861; --p-amber-dk-100:#33260F;
  --p-green-dk:#4DBD78;  --p-green-dk-ink:#74D698; --p-green-dk-100:#10301F;
  /* the Hastha Solutions public palette (hasthasolutions.com, read 2026-10-15): navy, blue, pale blue */
  --p-hastha-navy:#062134; --p-hastha-blue:#1468A8; --p-hastha-pale:#DAEDFF;

  /* ---- 2. roles: light -------------------------------------------------- */
  --bg:var(--p-slate-50); --surface:var(--p-slate-0); --surface-2:var(--p-slate-100);
  --line:var(--p-slate-200); --line-2:var(--p-slate-300); --ctrl:var(--p-slate-500);
  --ink:var(--p-slate-900); --ink-2:var(--p-slate-700); --ink-3:var(--p-slate-600);

  --brand:var(--p-blue-600); --on-brand:#FFFFFF; --brand-hover:var(--p-blue-700);
  --brand-ink:var(--p-blue-ink); --brand-soft:var(--p-blue-100); --brand-deep:var(--p-blue-800);
  --focus:var(--p-blue-600);

  --hold:var(--p-red-600);     --on-hold:#FFFFFF;           --hold-ink:var(--p-red-ink);     --hold-soft:var(--p-red-100);
  --caution:var(--p-amber-600);--on-caution:var(--p-amber-on); --caution-ink:var(--p-amber-ink); --caution-soft:var(--p-amber-100);
  --clear:var(--p-green-600);  --on-clear:#FFFFFF;          --clear-ink:var(--p-green-ink);  --clear-soft:var(--p-green-100);

  --band:var(--p-slate-900); --on-band:#FFFFFF; --on-band-2:var(--p-night-200); --band-line:var(--p-night-600);
  --band-brand:var(--p-blue-dk-ink);

  --sh:0 1px 2px rgba(11,23,39,.05),0 8px 24px -12px rgba(11,23,39,.14);
  --scrim:rgba(244,247,251,.86);
  --img-dim:1;

  /* ---- 3. brand switch: standalone is the default and changes nothing ---- */
  --endorse-ink:var(--ink-3);
}

/* hastha: product colours stay HazardIQ's. Only the endorsement line and the dark band take the parent's navy. */
html[data-brand="hastha"]{ --band:var(--p-hastha-navy); --endorse-ink:var(--ink-2); }

/* ---- 2. roles: dark. Same names, new values. Two selectors carry the SAME block
        (explicit toggle, and the OS preference when the visitor has not chosen). ---- */
[data-theme="dark"]{
  --bg:var(--p-night-950); --surface:var(--p-night-900); --surface-2:var(--p-night-800);
  --line:var(--p-night-700); --line-2:var(--p-night-600); --ctrl:var(--p-night-500);
  --ink:var(--p-night-50); --ink-2:var(--p-night-200); --ink-3:var(--p-night-300);
  --brand:var(--p-blue-dk-fill); --on-brand:#FFFFFF; --brand-hover:var(--p-blue-dk-hover);
  --brand-ink:var(--p-blue-dk-ink); --brand-soft:var(--p-blue-dk-soft); --brand-deep:var(--p-blue-dk-ink);
  --focus:var(--p-blue-dk-ink);
  --hold:var(--p-red-dk); --on-hold:var(--p-night-950); --hold-ink:var(--p-red-dk-ink); --hold-soft:var(--p-red-dk-100);
  --caution:var(--p-amber-dk); --on-caution:var(--p-night-950); --caution-ink:var(--p-amber-dk-ink); --caution-soft:var(--p-amber-dk-100);
  --clear:var(--p-green-dk); --on-clear:var(--p-night-950); --clear-ink:var(--p-green-dk-ink); --clear-soft:var(--p-green-dk-100);
  --band:var(--p-night-800); --on-band:#FFFFFF; --on-band-2:var(--p-night-200); --band-line:var(--p-night-600);
  --sh:0 1px 2px rgba(0,0,0,.3),0 12px 32px -14px rgba(0,0,0,.6);
  --scrim:rgba(10,18,30,.86);
  --img-dim:.92;
}
html[data-brand="hastha"][data-theme="dark"]{ --band:var(--p-hastha-navy); --endorse-ink:var(--ink-2); }
@media(prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:var(--p-night-950); --surface:var(--p-night-900); --surface-2:var(--p-night-800);
  --line:var(--p-night-700); --line-2:var(--p-night-600); --ctrl:var(--p-night-500);
  --ink:var(--p-night-50); --ink-2:var(--p-night-200); --ink-3:var(--p-night-300);
  --brand:var(--p-blue-dk-fill); --on-brand:#FFFFFF; --brand-hover:var(--p-blue-dk-hover);
  --brand-ink:var(--p-blue-dk-ink); --brand-soft:var(--p-blue-dk-soft); --brand-deep:var(--p-blue-dk-ink);
  --focus:var(--p-blue-dk-ink);
  --hold:var(--p-red-dk); --on-hold:var(--p-night-950); --hold-ink:var(--p-red-dk-ink); --hold-soft:var(--p-red-dk-100);
  --caution:var(--p-amber-dk); --on-caution:var(--p-night-950); --caution-ink:var(--p-amber-dk-ink); --caution-soft:var(--p-amber-dk-100);
  --clear:var(--p-green-dk); --on-clear:var(--p-night-950); --clear-ink:var(--p-green-dk-ink); --clear-soft:var(--p-green-dk-100);
  --band:var(--p-night-800); --on-band:#FFFFFF; --on-band-2:var(--p-night-200); --band-line:var(--p-night-600);
  --sh:0 1px 2px rgba(0,0,0,.3),0 12px 32px -14px rgba(0,0,0,.6);
  --scrim:rgba(10,18,30,.86);
  --img-dim:.92;
}
html[data-brand="hastha"]:not([data-theme]){ --band:var(--p-hastha-navy); }
}