/* ============================================================
   The Elements — design tokens (v0.1 DRAFT)
   One source of truth for the website AND the future ODS app.
   Domain and stage colors match the ODS Periodic Table.
   ============================================================ */
:root{
  /* Brand neutrals */
  --ie-ink:        #0f1a33;   /* primary text, dark surfaces, primary buttons */
  --ie-ink-2:      #3a4660;   /* secondary text */
  --ie-muted:      #6b7589;   /* captions, helper text */
  --ie-line:       #e3e7f0;   /* borders, dividers */
  --ie-surface:    #ffffff;   /* cards */
  --ie-canvas:     #f4f6fc;   /* page tint */
  --ie-canvas-2:   #eceffa;   /* deeper tint, hero wash */

  /* Brand accent (Governance indigo) */
  --ie-brand:      #3d4db7;
  --ie-brand-soft: #e7eaf9;

  /* Highlight (Service Delivery amber) — use sparingly */
  --ie-highlight:      #d99311;
  --ie-highlight-soft: #fdf0d3;

  /* Domain colors (keyed by domain code) */
  --ie-op: #2e86de;  --ie-op-soft: #e3effb;   /* Operations & Process   */
  --ie-sd: #d99311;  --ie-sd-soft: #fbf0db;   /* Service Delivery       */
  --ie-pp: #2e9e63;  --ie-pp-soft: #e1f3e9;   /* People & Performance   */
  --ie-sp: #14a098;  --ie-sp-soft: #dcf2f0;   /* Systems & Platforms    */
  --ie-gr: #3d4db7;  --ie-gr-soft: #e7eaf9;   /* Governance & Rhythm    */

  /* Stage colors (keyed by stage code). Option B, chosen 24 Sep 2026:
     stages are neutral gray everywhere; only the five domains carry color. */
  --ie-s1: #6b7589;  /* Stabilize   */
  --ie-s2: #6b7589;  /* Standardize */
  --ie-s3: #6b7589;  /* Sustain     */
  --ie-s4: #6b7589;  /* Innovate    */
  --ie-stage-soft: #e3e7f0;  --ie-stage-ink: #3a4660;

  /* Status */
  --ie-good: #2e9e63;  --ie-warn: #d99311;  --ie-bad: #d0453a;

  /* Type */
  --ie-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ie-font-display: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Radius, shadow, spacing */
  --ie-r-sm: 8px;  --ie-r-md: 14px;  --ie-r-lg: 22px;  --ie-r-pill: 999px;
  --ie-shadow-1: 0 1px 2px rgba(15,26,51,.05), 0 2px 8px rgba(15,26,51,.05);
  --ie-shadow-2: 0 2px 6px rgba(15,26,51,.06), 0 18px 40px rgba(15,26,51,.10);
  --ie-space: 8px;
}