/* =====================================================================
   Sab | Digital Technology Leader: design tokens v2.0
   Adopted from the DX-Intelligence design system (dx-intelligence.com/brand):
   Space Grotesk display, IBM Plex Mono labels and buttons, DM Sans body,
   Midnight #080C14 with cyan #00C8FF to #00E5C8 and gold #F0C040.
   Dark theme on :root (default), light theme on [data-theme="light"].
   Text pairs verified against WCAG 2.1 AA (4.5:1).
   ===================================================================== */

@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("../fonts/space-grotesk-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url("../fonts/dm-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/ibm-plex-mono-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  /* ---- Colour: Midnight (dark, default) ---- */
  --bg:#080C14;  --bg2:#0D1422;  --surface:#151D2E;  --surface-2:#1A2338;
  --border:rgba(0,200,255,.10);  --border-strong:rgba(0,200,255,.28);
  --cyan:#00C8FF;    /* 10.0:1 on bg  primary accent, links, focus      */
  --cyan2:#00E5C8;   /* 12.2:1 on bg  gradient partner, platforms        */
  --gold:#F0C040;    /* 11.5:1 on bg  outcomes, highlights               */
  --text:#E8EDF5;    /* 16.7:1 on bg                                     */
  --muted:#7A8AA0;   /*  5.6:1 on bg, 4.8:1 on surface                   */
  --on-cyan:#080C14; /* button label on cyan, 10.0:1                     */
  --grad:linear-gradient(135deg,#00C8FF 0%,#00E5C8 100%);
  --glow:rgba(0,200,255,.28);
  --nav-bg:rgba(8,12,20,.92);
  color-scheme:dark;

  /* aliases used by components */
  --accent:var(--cyan); --accent-2:var(--gold); --sage:var(--cyan2); --on-accent:var(--on-cyan);

  /* ---- Type ---- */
  --fd:"Space Grotesk",system-ui,sans-serif;   /* display, h1 to h3            */
  --fm:"IBM Plex Mono",ui-monospace,monospace; /* labels, buttons, logo        */
  --fb:"DM Sans",system-ui,sans-serif;         /* body (min 0.98rem)           */
  --step--1:clamp(.78rem,.76rem + .1vw,.84rem);
  --step-0:clamp(.98rem,.95rem + .2vw,1.06rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.45rem);
  --step-2:clamp(1.55rem,1.35rem + 1vw,2.1rem);
  --step-3:clamp(2.1rem,1.7rem + 2vw,3.2rem);
  --step-4:clamp(2.7rem,2.1rem + 3.2vw,4.6rem);

  /* ---- Shape, space, motion ---- */
  --r:10px; --rl:16px; --pill:999px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:88px; --s6:6rem;
  --t:.28s; --ease:cubic-bezier(.4,0,.2,1); --t-slow:.6s;
  --mw:1140px;
}

:root[data-theme="light"]{
  /* ---- Colour: Daylight (light) ---- */
  --bg:#F4F7FB;  --bg2:#E9EFF5;  --surface:#FFFFFF;  --surface-2:#EEF3F8;
  --border:rgba(0,104,143,.16);  --border-strong:rgba(0,104,143,.32);
  --cyan:#00688F;    /* 5.8:1 on bg (darkened for AA)                    */
  --cyan2:#00766A;   /* 5.1:1 on bg                                      */
  --gold:#7A5F0A;    /* 5.6:1 on bg (DX-I light gold #9A7B10 deepened)   */
  --text:#15202E;    /* 15.3:1 on bg                                     */
  --muted:#51637A;   /*  5.7:1 on bg                                     */
  --on-cyan:#FFFFFF; /* 6.2:1 on #00688F                                 */
  --grad:linear-gradient(135deg,#00688F 0%,#00766A 100%);
  --glow:rgba(0,104,143,.16);
  --nav-bg:rgba(244,247,251,.92);
  color-scheme:light;
}

@media (prefers-reduced-motion:reduce){:root{--t:0s;--t-slow:0s}}