/* ============================================================
   Chematek — Colour tokens
   ------------------------------------------------------------
   The blue is the cornerstone and ALWAYS dominates (~70%).
   Warm (Solar) = a warm FOCAL DEVICE, ≤10% max of any composition.
   Placement by context: Hero/marketing — one deliberate Solar focal item
   (a focal icon, key stat or the CTA). UI/data/technical — intent-only:
   the one primary action or a critical/safety flag. Never scattered, never a field.
   No purple, ever.  Three blues, three jobs:
     Denim = field · Azure = action · Maya = glow
   ============================================================ */

:root {
  /* ---- Foundation — Primary blues (the cornerstone) ---- */
  --denim: #052644;   /* Foundation navy — field, dark UI base, hero anchor */
  --azure: #1D5EB3;   /* Active "Chematek blue" — links, buttons, structure */
  --maya:  #7AD4F3;   /* Glow / energy / highlight — molecule glow, data peaks */

  /* Denim tints (UI fills, charts, depth) */
  --denim-1: #1E4064;
  --denim-2: #426186;
  --denim-3: #738BAB;
  --denim-4: #B2BFD3;
  /* Azure tints */
  --azure-1: #4470C0;
  --azure-2: #6E8ACE;
  --azure-3: #9BAADD;
  --azure-4: #CBD1EE;
  /* Maya tints */
  --maya-1: #95DDF5;
  --maya-2: #AFE5F7;
  --maya-3: #CAEEFA;
  --maya-4: #E4F6FC;

  /* Deep-navy hero anchors (deeper than flat Denim) */
  --navy-lift:  #073255;  /* where light hits the hero field */
  --navy-deep:  #00102F;
  --navy-black: #00070F;  /* outer/deep of the hero gradient */

  /* ---- Secondary — Warm (the spark; use sparingly) ---- */
  --solar: #F6894C;   /* Warm focal device — ≤10% max; hero focal OR intent-only by context */
  --flax:  #FCD493;   /* Soft warm — rare, warm gradient pairing */
  --bisque:#EAE1D9;   /* Warm light background — the branded "white" */
  /* Solar tints */
  --solar-1: #F89F68;
  --solar-2: #FAB588;
  --solar-3: #FBCDAB;
  --solar-4: #FDE5D3;

  /* ---- Neutrals — Base ---- */
  --onyx:  #1C2125;   /* Near-black — body text on light, deepest UI base */
  --slate: #5E747F;   /* Blue-grey — secondary text, captions, dividers, rules */
  --white: #FFFFFF;

  /* Slate tints (table rules, faint dividers) */
  --slate-1: #7E909A;
  --slate-2: #A6B3BA;
  --slate-3: #CED5D9;
  --slate-4: #E7EBED;

  /* ============================================================
     Semantic aliases — reach for these in components.
     ============================================================ */

  /* Surfaces */
  --surface-hero:      var(--denim);      /* hero anchor (pair with hero gradient) */
  --surface-dark:      var(--denim);      /* Interface dark theme field */
  --surface-dark-lift: #07203A;           /* lifted dark panel / card on navy */
  --surface-light:     var(--bisque);     /* branded light field */
  --surface-paper:     var(--white);      /* crisp technical / document page */
  --surface-card-dark: #0A2C4D;           /* card on navy */
  --surface-card-light:var(--white);      /* card on light */

  /* Text — on dark */
  --text-on-dark:        var(--white);
  --text-on-dark-muted:  #9FB2C4;         /* secondary text on navy */
  --text-on-dark-faint:  #6E8197;

  /* Text — on light */
  --text-body:           var(--onyx);
  --text-muted:          var(--slate);
  --text-heading:        var(--denim);

  /* Action / interactive */
  --action:        var(--azure);
  --action-hover:  #2A6FC9;               /* azure, lightened */
  --action-active: #164B92;               /* azure, darkened */
  --link:          var(--azure);
  --focus-ring:    var(--maya);

  /* ---- Action hierarchy (the colour budget) ----
     Per composition: navy + white are free; one cool accent carries energy and
     structure; Solar is the warm focal device (≤10%). Hero/marketing: one
     deliberate focal item. UI/data/technical: intent-only — the one primary
     action or a critical flag. Never scattered, never a field. */
  --action-primary:   var(--solar);   /* THE one CTA / call-to-action per view */
  --action-secondary: var(--azure);   /* persistent + secondary buttons, links, structure */
  --action-tertiary:  transparent;    /* outline / ghost — quiet actions */

  /* Accent — the spark */
  --accent:        var(--solar);
  --accent-soft:   var(--flax);

  /* Lines / borders */
  --border-on-dark:   rgba(122, 212, 243, 0.16);  /* faint maya rule on navy */
  --border-on-light:  #D9D2CA;                    /* on bisque/paper */
  --rule-azure:       var(--azure);               /* structural accent rule */
  --divider:          var(--slate);

  /* Glow energy */
  --glow-maya:  var(--maya);
  --glow-azure: var(--azure);

  /* Status (documents/UI — derived from brand, blue-leaning) */
  --status-info:    var(--azure);
  --status-success: #2E9E7B;
  --status-warning: var(--solar);
  --status-danger:  #D5573B;

  /* ---- Hazard — SAFETY SEMANTICS ONLY ----
     A single sanctioned warning red, kept OUTSIDE the brand palette and OFF the
     Solar role (Solar = warm focal/CTA; mixing them would muddy both). Use ONLY
     for genuine safety meaning: pyrophoric/hazard glyphs, a struck "eliminated"
     state, regulatory-adjacent marks. Never decorative, never a field, never a CTA. */
  --hazard:       #D5573B;   /* warning red — safety semantics only */
  --hazard-deep:  #A63C28;   /* darker, for on-light strokes/text */
  --hazard-soft:  #F4D2CA;   /* tint — fills, defused backgrounds */
}