/* Cortex Hub design tokens (docs/cortex/spec/05-web.md section 4.2).
   This file holds every --hub-* token on :root and one accent block per game, and nothing else.
   Colors equal hrai/static/cortex/brand/brand.json; tests/test_cortex_web_css.py compares the two
   files and recomputes the contrast table of section 4.4. The grounds, lines, text colors and type
   are the same in every scope. A game changes four properties: the accent, its ink, the wash and
   the glow. --hub-brand is Cortex's own pink and never changes. Dark theme only. */

:root {
  /* Base theme: the Pocket Labs site's tokens (brand.json base). The same in every scope. */
  --hub-bg: #050506;                         /* page ground, bar */
  --hub-surface: #0b0b0e;                    /* cards, panels, tiles */
  --hub-raise: #141417;                      /* popovers, palette, pills, skeletons; opaque stand-in for the site's glass card */
  /* lines */
  --hub-line: rgba(255,255,255,.08);         /* separators, card borders */
  --hub-line2: rgba(255,255,255,.11);        /* popover and control borders, dashed empty states */
  --hub-line-strong: rgba(255,255,255,.38);  /* borders that are the only cue a control exists (inputs, selects, checkboxes) */
  /* text */
  --hub-hi: #ffffff;                         /* headlines and figures */
  --hub-fg: #efeff2;                         /* body */
  --hub-dim: #b5b5bd;                        /* secondary */
  --hub-faint: #8b8b94;                      /* labels, timestamps */
  /* brand: Cortex's own controls, constant in every world */
  --hub-brand: #ff006b; --hub-brand-ink: #050506;
  --hub-brand-soft: rgba(255,0,107,.09); --hub-brand-glow: rgba(255,0,107,.24);
  /* scope accent: neutral values (chooser, all games, error pages, unknown worlds) are the brand */
  --hub-accent: #ff006b; --hub-accent-ink: #050506;
  --hub-wash: rgba(255,0,107,.09);           /* hover and selected grounds, icon tiles */
  --hub-glow: rgba(255,0,107,.08);           /* page glow tint */
  /* status: the same in every world, never a brand accent, never the pink */
  --hub-ok: #3fcf8e; --hub-warn: #ff8f4d; --hub-down: #ff5247; --hub-info: #62b0ff; --hub-off: #7a798b;
  --hub-on-status: #050506;                  /* ink on a status-colored fill */
  /* overlays */
  --hub-scrim: rgba(5,5,10,.8);
  --hub-shadow-pop: 0 18px 50px rgba(0,0,0,.55);
  --hub-shadow-modal: 0 30px 80px rgba(0,0,0,.6);
  --hub-focus: var(--hub-brand);
  /* families: two, both upright only */
  --hub-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hub-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  /* type scale */
  --hub-text-label: 11px;                    /* uppercase mono labels only */
  --hub-text-xs: 12px; --hub-text-sm: 13px; --hub-text-md: 14px; --hub-text-lg: 15px; --hub-text-xl: 16px;
  --hub-num-sm: 21px; --hub-num-md: 28px; --hub-num-lg: 36px;
  --hub-h1: clamp(30px, 4.2vw, 46px); --hub-h1-chooser: clamp(32px, 5vw, 54px);
  --hub-track-head: -.035em;                 /* headlines and figures */
  --hub-track-label: .1em;                   /* uppercase mono labels */
  /* layout */
  --hub-bar-h: 57px; --hub-max: 1180px; --hub-gutter: 20px;
  --hub-space-1: 4px; --hub-space-2: 8px; --hub-space-3: 12px; --hub-space-4: 16px;
  --hub-space-5: 20px; --hub-space-6: 24px; --hub-space-7: 32px; --hub-space-8: 40px;
  --hub-r-xs: 5px; --hub-r-sm: 8px; --hub-r-control: 10px; --hub-r-pop: 14px; --hub-r-card: 18px; --hub-r-pill: 100px;
  --hub-z-pop: 40; --hub-z-bar: 45; --hub-z-ov: 55; --hub-z-dialog: 57; --hub-z-toast: 60;
  /* motion */
  --hub-dur-fast: 120ms; --hub-dur-theme: 180ms; --hub-dur-sheet: 220ms; --hub-ease: cubic-bezier(.22, 1, .36, 1);
}

/* A world changes the accent, its ink, the wash and the glow. Nothing else. */
[data-hub-game="highrise"]  { --hub-accent: #9374FD; --hub-accent-ink: #020012; --hub-wash: rgba(147,116,253,.14); --hub-glow: rgba(147,116,253,.10); }
[data-hub-game="everskies"] { --hub-accent: #CDBFFF; --hub-accent-ink: #1b1842; --hub-wash: rgba(205,191,255,.11); --hub-glow: rgba(205,191,255,.08); }
[data-hub-game="hideaway"]  { --hub-accent: #FCB749; --hub-accent-ink: #1E202E; --hub-wash: rgba(252,183,73,.11);  --hub-glow: rgba(252,183,73,.08); }

@media (max-width: 760px) { :root { --hub-bar-h: 49px; --hub-gutter: 16px; } }