/* ionized-tokens.css — THE single source of the Ionized design tokens (docs/DESIGN_SYSTEM.md).
   One :root block, --ion-* names only, px only. Solid colours come as --ion-x (hex) AND
   --ion-x-rgb ("R G B" for rgb(var(--ion-x-rgb) / a)). Embedded verbatim in IONIZED_UI_CSS
   between the ION-TOKENS sentinels; mirrors (HUD skins, live-fx.css, JS palettes, theme/tokens.py)
   are value-checked by tests. Edit HERE, never in a mirror. */
:root{
  color-scheme:dark;
  /* surfaces, darkest → lightest */
  --ion-bg:#040506;          --ion-bg-rgb:4 5 6;            /* page ground */
  --ion-ground:#05070b;      --ion-ground-rgb:5 7 11;       /* broadcast opaque mask ONLY */
  --ion-panel:#0a0c0f;       --ion-panel-rgb:10 12 15;      /* panels, cards, sidebar, dialogs */
  --ion-panel-2:#0e1115;     --ion-panel-2-rgb:14 17 21;    /* recessed: inputs, rows, chip fill */
  --ion-raised:#151a20;      --ion-raised-rgb:21 26 32;     /* on panel-2: chip fill, menus, row hover */
  /* lines */
  --ion-line:#1c2127;        --ion-line-rgb:28 33 39;       /* the hairline */
  --ion-line-strong:#272d34; --ion-line-strong-rgb:39 45 52;/* frames, badges, input hover */
  /* ink */
  --ion-ink:#ffffff;         --ion-ink-rgb:255 255 255;
  --ion-ink-soft:#b9c0c7;    --ion-ink-soft-rgb:185 192 199;
  --ion-ink-faint:#6a727b;   --ion-ink-faint-rgb:106 114 123;
  --ion-ink-ghost:#3f464e;   --ion-ink-ghost-rgb:63 70 78;  /* decoration only: separators, disabled */
  /* brand */
  --ion-accent:#46e0ff;      --ion-accent-rgb:70 224 255;
  --ion-accent-dim:#1d6f80;  --ion-accent-dim-rgb:29 111 128;
  --ion-accent-tint:rgb(70 224 255 / .16);   /* selected / primary fill */
  --ion-accent-tint-2:rgb(70 224 255 / .26); /* hover on a selected / primary */
  --ion-accent-wash:rgb(70 224 255 / .06);   /* hover wash, active tab ground */
  /* status: text colour, border, tint */
  --ion-win:#bff7d2;         --ion-win-rgb:191 247 210;
  --ion-win-border:#1f5a39;  --ion-win-border-rgb:31 90 57;  --ion-win-tint:rgb(191 247 210 / .10);
  --ion-down:#ffb3b3;        --ion-down-rgb:255 179 179;
  --ion-down-border:#5a2424; --ion-down-border-rgb:90 36 36; --ion-down-tint:rgb(255 179 179 / .10);
  --ion-red:#ff6a6a;         --ion-red-rgb:255 106 106;
  --ion-red-border:rgb(255 106 106 / .35);                  --ion-red-tint:rgb(255 106 106 / .10);
  --ion-gold:#ffd84a;        --ion-gold-rgb:255 216 74;
  --ion-gold-border:rgb(255 216 74 / .35);                  --ion-gold-tint:rgb(255 216 74 / .10);
  --ion-run:#3ad17a;         --ion-run-rgb:58 209 122;      --ion-run-border:rgb(58 209 122 / .35);
  --ion-human:#c2b0ff;       --ion-human-rgb:194 176 255;   --ion-human-border:rgb(194 176 255 / .35);
  /* families */
  --ion-head:"Chakra Petch",sans-serif;
  --ion-body:"Rajdhani",sans-serif;
  --ion-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* type ladder (web + app) — px; Tailwind carries the rem twins (§2.4) */
  --ion-fs-micro:11px; --ion-fs-cap:12px; --ion-fs-small:13px; --ion-fs-dense:14px; --ion-fs-body:16px;
  --ion-fs-lg:18px; --ion-fs-xl:20px; --ion-fs-2xl:24px; --ion-fs-3xl:30px; --ion-fs-4xl:40px;
  --ion-fs-display:64px;
  --ion-tr-head:.03em; --ion-tr-ui:.08em; --ion-tr-label:.16em; --ion-tr-eyebrow:.42em;
  --ion-lh-tight:1.1; --ion-lh-snug:1.25; --ion-lh-dense:1.45; --ion-lh-body:1.5;
  /* spacing (4px grid) */
  --ion-sp-1:4px; --ion-sp-2:8px; --ion-sp-3:12px; --ion-sp-4:16px; --ion-sp-5:24px; --ion-sp-6:32px;
  --ion-sp-7:48px; --ion-sp-8:64px; --ion-sp-9:128px;
  --ion-pad-panel:28px; --ion-pad-panel-app:16px;
  /* shapes */
  --ion-cut:22px; --ion-cut-sm:10px; --ion-slant:min(8%,10px);
  --ion-clip-panel:polygon(0 0,100% 0,100% 100%,22px 100%,0 calc(100% - 22px));
  --ion-clip-panel-sm:polygon(0 0,100% 0,100% 100%,10px 100%,0 calc(100% - 10px));
  --ion-clip-panel-mirror:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
  --ion-clip-slant:polygon(min(8%,10px) 0,100% 0,calc(100% - min(8%,10px)) 100%,0 100%);
  --ion-clip-diamond:polygon(50% 0,100% 50%,50% 100%,0 50%);
  --ion-clip-plate:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px));
  /* depth */
  --ion-ring:inset 0 0 0 1.5px #46e0ff;             /* selected, survives any clip */
  --ion-ring-focus:inset 0 0 0 1.5px #46e0ff,inset 0 0 0 3px #ffffff; /* keyboard focus: the ring + a white inner line */
  --ion-edge-top:inset 0 2px 0 #46e0ff;             /* emphasised panel */
  --ion-edge-left:inset 3px 0 0 #46e0ff;            /* active nav row, "us" table row */
  --ion-glow-inset:inset 0 0 14px rgb(70 224 255 / .18);  /* hover on a CLIPPED element */
  --ion-glow-soft:0 0 18px rgb(70 224 255 / .18);   /* accented UNCLIPPED edge */
  --ion-glow:0 0 14px rgb(70 224 255 / .5);         /* unclipped marks: bars, dots */
  --ion-glow-dot:0 0 8px rgb(70 224 255 / .8);
  --ion-glow-text:0 0 8px rgb(70 224 255 / .6);     /* DISPLAY h1 + hero numbers only */
  --ion-shadow-float:0 18px 60px rgb(0 0 0 / .6);   /* menus, dialogs, drawers, sticky bars */
  --ion-scrim:rgb(4 5 6 / .86);                     /* broadcast minimum ground under glyphs */
  --ion-armour:0 2px 6px rgb(0 0 0 / .95),0 0 2px rgb(0 0 0 / .9);
  --ion-armour-icon:drop-shadow(0 1px 3px rgb(0 0 0 / .9));
  --ion-ground-glow:radial-gradient(120% 60% at 50% -10%,rgb(70 224 255 / .07),transparent 60%);
  /* motion */
  --ion-dur-fast:120ms; --ion-dur-base:200ms; --ion-dur-slow:450ms; --ion-dur-reveal:900ms;
  --ion-ease:cubic-bezier(.2,.7,.2,1); --ion-ease-out:cubic-bezier(.16,.84,.34,1);
  /* layers */
  --ion-z-raised:1; --ion-z-sticky:30; --ion-z-chrome:40; --ion-z-drawer:50; --ion-z-scrim:60;
  --ion-z-dialog:70; --ion-z-toast:80; --ion-z-skip:100;
}