/* ============================================================
   ZELICRA — design tokens
   Extracted VERBATIM from SIOS: /opt/sios-app/src/app/globals.css
   Light = default (:root / [data-theme="light"]). Dark = [data-theme="dark"].
   Do NOT drift these hex values — they are the live SIOS brand.
   ============================================================ */

:root, [data-theme="light"] {
  --bg-deep:#F4F7FB;  --bg-panel:#FFFFFF;  --bg-elevated:#F0F4FA;
  --border-subtle:#DCE5F1; --border-bright:#A8C0DE; --border-glow:rgba(0,153,204,.30);
  --cyan:#0099CC; --cyan-bright:#00B8E6; --cyan-dim:#006B8F; --cyan-glow:rgba(0,153,204,.25);
  --gold:#B8881F; --gold-dim:#8A6517;
  --text:#0A1628; --text-muted:#4A5878; --text-dim:#5C6A85;
  --ok:#00A85F; --warn:#D89500; --bad:#D62E4F;
  --grid-line:rgba(0,153,204,.06); --scanline:rgba(0,153,204,.012);
  --vignette-color:rgba(220,230,245,.45);
  --panel-grad-top:#FFFFFF; --panel-grad-bot:#FBFDFE;
  --tile-grad:rgba(0,153,204,.025); --tile-hover-grad:rgba(0,153,204,.06);
  --on-accent:#FFFFFF;
  --hero-scrim:linear-gradient(180deg, rgba(244,247,251,.20) 0%, rgba(244,247,251,.62) 52%, rgba(244,247,251,.95) 100%);
  --shadow-tile:0 6px 22px -12px rgba(0,153,204,.40), 0 0 0 1px var(--border-subtle);
}

[data-theme="dark"] {
  --bg-deep:#050810;  --bg-panel:#0A0F1C;  --bg-elevated:#131B2E;
  --border-subtle:#1A2541; --border-bright:#2A4571; --border-glow:rgba(0,212,255,.35);
  --cyan:#00D4FF; --cyan-bright:#5FE6FF; --cyan-dim:#0099CC; --cyan-glow:rgba(0,212,255,.50);
  --gold:#FFC857; --gold-dim:#C99B3E;
  --text:#E8F0FF; --text-muted:#6B7C9D; --text-dim:#4A5878;
  --ok:#00FF88; --warn:#FFB800; --bad:#FF3366;
  --grid-line:rgba(0,212,255,.025); --scanline:rgba(0,212,255,.018);
  --vignette-color:rgba(0,0,0,.60);
  --panel-grad-top:rgba(13,21,40,.60); --panel-grad-bot:rgba(10,15,28,.40);
  --tile-grad:rgba(0,212,255,.04); --tile-hover-grad:rgba(0,212,255,.10);
  --on-accent:#04121C;
  --hero-scrim:linear-gradient(180deg, rgba(5,8,16,.30) 0%, rgba(5,8,16,.70) 55%, rgba(5,8,16,.96) 100%);
  --shadow-tile:0 6px 22px -10px var(--cyan-glow), 0 0 0 1px var(--border-subtle);
}

:root {
  /* type families — SIOS @theme */
  --font-display:'Chakra Petch', sans-serif;
  --font-body:'DM Sans', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  /* sharp, instrument-grade radii (SIOS uses 2px) */
  --radius:2px; --radius-lg:4px;

  /* layout */
  --maxw:1220px;
  --gutter:clamp(20px, 5vw, 64px);

  /* fluid type scale */
  --step--1:clamp(.78rem, .74rem + .18vw, .88rem);
  --step-0: clamp(1rem, .96rem + .22vw, 1.12rem);
  --step-1: clamp(1.28rem, 1.12rem + .8vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.5vw, 2.3rem);
  --step-3: clamp(2.1rem, 1.55rem + 2.7vw, 3.4rem);
  --step-4: clamp(2.8rem, 1.8rem + 4.8vw, 5.4rem);

  --ease:cubic-bezier(.23, 1, .32, 1);
}