/* tokens.css | DEVLESS World + DNN. Owner: pixel-world. Shared by /world and /news (pixel-news links it, never edits it).
   Source: creative/tokens.md section 9 (Iris) + creative/motion.md section 2 (Flux). Kit tokens (--bg, --sf, --ac ...) come from base.css, unchanged.
   Mirrored as numbers in /assets/js/motion.js. Any change here is a change there. */
:root {
  /* events (aliases, one meaning each) */
  --ev-burn: var(--ac);
  --ev-vote: var(--vote);
  --ev-grant: var(--ok);
  --ev-pause: var(--warn);
  --ev-refuse: var(--bad);
  --ev-trade: var(--mu);

  /* nations: equal lightness, low chroma (OKLCH in comments). Engine Nation.tint is "--nation-<id>", so both names exist. */
  --n-ashmark: #E6A68A;   /* oklch(0.78 0.085 45) */
  --n-velloria: #83D4D8;  /* oklch(0.82 0.08 200) */
  --n-quenridge: #C8D28E; /* oklch(0.84 0.09 115) */
  --n-solvane: #71ADD0;   /* oklch(0.72 0.08 235) */
  --n-duskreach: #C499CE; /* oklch(0.74 0.09 320) */
  --n-commons: #8B939F;   /* oklch(0.66 0.02 260) */
  --nation-ashmark: var(--n-ashmark);
  --nation-velloria: var(--n-velloria);
  --nation-quenridge: var(--n-quenridge);
  --nation-solvane: var(--n-solvane);
  --nation-duskreach: var(--n-duskreach);
  --nation-commons: var(--n-commons);

  /* semantic */
  --c-bg: var(--bg);
  --c-surface: var(--sf);
  --c-surface-2: var(--sf2);
  --c-surface-3: var(--sf3);
  --c-plate: var(--ac);
  --c-text: var(--fg);
  --c-text-read: var(--fgl);
  --c-text-plate: var(--ac-fg);
  --c-text-plate-mu: #5E5640;   /* 6.61 on --ac */
  --c-muted: var(--mu);
  --c-line: var(--ln);
  --c-edge: var(--ln2);
  --c-control: #6577A8;         /* Aegis B1: 4.18 on --sf, 3.87 sf2, 3.47 sf3, 3.35 pause-sf, 3.70 refuse-sf */
  --c-accent: var(--ac);
  --c-focus: var(--ac);
  --c-error: var(--bad);
  --c-success: var(--ok);
  --c-pause-sf: #2A2729;
  --c-refuse-sf: #261C2D;

  /* type */
  --t-cover: clamp(2.75rem, 1.393rem + 6.786vw, 7.5rem);
  --t-plate: clamp(1.875rem, 1.268rem + 3.036vw, 4rem);
  --t-h1: clamp(2rem, 1.643rem + 1.786vw, 3.25rem);
  --t-h2: clamp(1.5rem, 1.321rem + 0.893vw, 2.125rem);
  --t-h3: clamp(1.25rem, 1.161rem + 0.446vw, 1.5625rem);
  --t-h4: clamp(1.125rem, 1.089rem + 0.179vw, 1.25rem);
  --t-read: clamp(1.0625rem, 1.027rem + 0.179vw, 1.1875rem);
  --t-body: 1rem;
  --t-ui: 0.875rem;
  --t-small: 0.8125rem;
  --t-hud: clamp(0.875rem, 0.839rem + 0.179vw, 1rem);
  --t-mono: 0.78125rem;
  --t-chip: 0.6875rem;
  --t-bug: 0.6875rem;
  --min-text-opacity: .92; /* Aegis B2: no text-bearing surface below 92% opacity; canvas chips are 100% */
  --lh-tight: 0.92; --lh-display: 1.0; --lh-head: 1.12; --lh-ui: 1.3; --lh-body: 1.5; --lh-read: 1.6;
  --tr-cover: -0.04em; --tr-display: -0.03em; --tr-head: -0.02em; --tr-bug: 0.12em;
  --measure: 66ch; --measure-dek: 52ch;

  /* spacing */
  --s-1: 2px; --s-2: 4px; --s-3: 8px; --s-4: 12px; --s-5: 16px; --s-6: 20px;
  --s-7: 24px; --s-8: 32px; --s-9: 48px; --s-10: 72px; --s-11: 112px;

  /* radius */
  --step-s: 2px;
  --r-0: 0;
  --r-pill: 999px;
  --r-sheet: 16px;
  --r-disk: 50%;
  /* kit stepped cut as a reusable polygon (same as .btn in base.css), driven by --step on the element */
  --cut: polygon(var(--step) 0, calc(100% - var(--step)) 0, calc(100% - var(--step)) calc(var(--step) / 1.5), calc(100% - var(--step) / 1.5) calc(var(--step) / 1.5), calc(100% - var(--step) / 1.5) var(--step), 100% var(--step), 100% calc(100% - var(--step)), calc(100% - var(--step) / 1.5) calc(100% - var(--step)), calc(100% - var(--step) / 1.5) calc(100% - var(--step) / 1.5), calc(100% - var(--step)) calc(100% - var(--step) / 1.5), calc(100% - var(--step)) 100%, var(--step) 100%, var(--step) calc(100% - var(--step) / 1.5), calc(var(--step) / 1.5) calc(100% - var(--step) / 1.5), calc(var(--step) / 1.5) calc(100% - var(--step)), 0 calc(100% - var(--step)), 0 var(--step), calc(var(--step) / 1.5) var(--step), calc(var(--step) / 1.5) calc(var(--step) / 1.5), var(--step) calc(var(--step) / 1.5));

  /* elevation */
  --el-hud: inset 0 1px 0 rgba(255,255,255,.04);
  --el-float: 0 18px 40px -22px rgba(4,6,14,.92);
  --el-sheet: 0 -14px 36px -18px rgba(4,6,14,.95);
  --el-plate: 0 0 0 1px var(--bg);
  --el-live: 0 0 0 2px var(--glow2);

  /* focus */
  --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--c-focus);
  --focus-ring-plate: 0 0 0 2px var(--ac), 0 0 0 4px var(--ac-fg);

  /* /world layout */
  --hud-inset: clamp(8px, 1.2vw, 16px);
  --hud-gap: 12px;
  --hud-top: 48px;
  --hud-rail: 264px;
  --hud-rail-collapsed: 48px;
  --hud-panel: min(380px, calc(100vw - 32px));
  --hud-ticker: 40px;
  --hud-ticker-strip: 36px;
  --hud-bottombar: 56px;
  --hud-minimap: 152px;
  --hud-third-max: 560px;
  --hud-banner-max: 640px;
  --hit-min: 44px;
  --hit-small: 24px;
  --scrim: rgba(8,11,22,.6);

  /* /news grid */
  --cols: 4; --col-gap: 16px;

  /* z */
  --z-canvas: 0; --z-pins: 10; --z-hud: 20; --z-lowerthird: 25; --z-panel: 30; --z-banner: 40;
  --z-popover: 50; --z-sheet: 60; --z-toast: 70; --z-intro: 80; --z-skip: 90;

  /* motion: durations (motion.md 2.1) */
  --d-tick: 80ms;
  --d-fast: 140ms;
  --d-base: 220ms;
  --d-panel: 280ms;
  --d-panel-out: 180ms;
  --d-sheet: 320ms;
  --d-third: 360ms;
  --d-third-out: 240ms;
  --d-freeze: 450ms;
  --d-slow: 600ms;
  --d-cine: 900ms;
  --d-cine-max: 2200ms;

  /* motion: easings (motion.md 2.2) */
  --e-out: cubic-bezier(.16, 1, .3, 1);
  --e-in: cubic-bezier(.55, 0, 1, .45);
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --e-fall: cubic-bezier(.55, 0, .9, .4);
  --e-rise: cubic-bezier(.05, .7, .1, 1);
  --e-settle: cubic-bezier(.2, .9, .3, 1.04);
  --e-step: steps(4, end);
  --e-linear: linear;
}
@media (min-width: 768px)  { :root { --cols: 8;  --col-gap: 20px; --hud-top: 48px; } }
@media (max-width: 767.98px) { :root { --hud-top: 56px; --hud-minimap: 0px; } }
@media (min-width: 768px) and (max-width: 1023.98px) { :root { --hud-minimap: 120px; } }
@media (min-width: 1024px) { :root { --cols: 12; --col-gap: 24px; } }
@media (pointer: coarse) { :root { --t-chip: 0.75rem; --t-bug: 0.75rem; } }

/* reduced motion: every token duration collapses, so components never need their own media query for timing */
@media (prefers-reduced-motion: reduce) {
  :root { --d-tick: 0ms; --d-base: 0ms; --d-panel: 120ms; --d-panel-out: 0ms; --d-sheet: 0ms; --d-third: 120ms; --d-third-out: 0ms; --d-freeze: 0ms; --d-slow: 0ms; --d-cine: 0ms; --d-cine-max: 0ms; }
}
.rm {
  --d-tick: 0ms; --d-base: 0ms; --d-panel: 120ms; --d-panel-out: 0ms; --d-sheet: 0ms; --d-third: 120ms; --d-third-out: 0ms; --d-freeze: 0ms; --d-slow: 0ms; --d-cine: 0ms; --d-cine-max: 0ms;
}

.num, .hud-val, time { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero; }
/* Aegis MUST 1: the stepped cut is a clip-path, which would crop a ring. Focus drops the clip and uses a real outline. */
:focus-visible { clip-path: none !important; outline: 2px solid var(--c-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--bg); }
.btn:focus-visible { clip-path: none; outline: 2px solid var(--c-focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--bg); }
.plate :focus-visible, .btn.pri:focus-visible { outline-color: var(--ac-fg); box-shadow: 0 0 0 2px var(--ac); }
@media (forced-colors: active) { :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } }
h1, h2, h3, h4 { text-wrap: balance; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cut { --step: 3px; clip-path: var(--cut); }
.cut-s { --step: var(--step-s); clip-path: var(--cut); }
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }