/* ============================================================================
   theme.css — design tokens for the whole game.  ROOT-OWNED (app_shell).
   Every UI feature reads these custom properties and never hard-codes a colour
   that belongs here.  Add nothing to this file: it is owned by the shell.
   ========================================================================= */

/* --- self-hosted type ---------------------------------------------------- */
/* Rajdhani  -> HUD labels, headers, every numeral (squarish, technical)      */
/* Barlow SC -> running prose in panels, event bodies, tooltips               */

@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/rajdhani-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/rajdhani-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/rajdhani-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow SC';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/barlow-sc-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow SC';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/barlow-sc-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow SC';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-sc-600.woff2') format('woff2');
}

:root {
  /* --- the field ------------------------------------------------------- */
  --void:            #03050a;
  --deep:            #06080f;
  --deep-2:          #080c18;
  --nebula-indigo:   rgba( 44,  62, 148, 0.32);
  --nebula-teal:     rgba( 18,  92, 112, 0.26);
  --nebula-violet:   rgba( 84,  44, 132, 0.24);
  --core-glow:       rgba(126, 156, 214, 0.11);

  /* --- glass chrome ---------------------------------------------------- */
  --glass:           rgba(11, 17, 28, 0.78);
  --glass-strong:    rgba( 9, 14, 24, 0.90);
  --glass-raised:    rgba(19, 28, 43, 0.72);
  --glass-sunken:    rgba( 4,  7, 13, 0.55);
  --rim:             rgba(139, 172, 209, 0.22);
  --rim-strong:      rgba(160, 196, 236, 0.38);
  --rim-inner:       rgba(190, 220, 255, 0.07);
  --shadow-panel:    0 14px 34px rgba(0, 0, 0, 0.55), 0 2px 0 rgba(0, 0, 0, 0.35);
  --shadow-soft:     0 6px 18px rgba(0, 0, 0, 0.45);
  --blur:            14px;

  /* --- ink -------------------------------------------------------------- */
  --ink:             #e6eefb;
  --ink-1:           #b9c8dd;
  --ink-2:           #8496ae;
  --ink-3:           #5d6d85;
  --ink-dim:         #414f63;

  /* --- accents ---------------------------------------------------------- */
  --accent:          #4fd6ff;   /* cool cyan: the player, every affordance   */
  --accent-2:        #7ae6ff;
  --accent-dim:      #2a7d99;
  --accent-glow:     rgba( 79, 214, 255, 0.30);
  --accent-wash:     rgba( 79, 214, 255, 0.10);
  --warn:            #ffb648;
  --warn-wash:       rgba(255, 182,  72, 0.12);
  --danger:          #ff5b62;
  --danger-wash:     rgba(255,  91,  98, 0.12);
  --good:            #3fdca6;
  --good-wash:       rgba( 63, 220, 166, 0.12);

  /* --- resources (shared by every panel that prints one) ---------------- */
  --res-energy:      #f5c451;
  --res-minerals:    #e0865a;
  --res-food:        #74c96f;
  --res-alloys:      #9db6cf;
  --res-research:    #6f9dff;
  --res-influence:   #c08cf2;

  /* --- severity (G.log) ------------------------------------------------- */
  --sev-info:        #7f93ab;
  --sev-good:        var(--good);
  --sev-warn:        var(--warn);
  --sev-alert:       var(--danger);

  /* --- type ------------------------------------------------------------- */
  --font-hud:        'Rajdhani', 'Roboto Condensed', 'Segoe UI', system-ui, sans-serif;
  --font-body:       'Barlow SC', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:       'Rajdhani', ui-monospace, 'SF Mono', Menlo, monospace;

  --fs-micro:        10px;
  --fs-xs:           11px;
  --fs-sm:           12px;
  --fs-md:           13px;
  --fs-lg:           15px;
  --fs-xl:           18px;
  --fs-2xl:          23px;
  --fs-3xl:          32px;

  --ls-label:        0.16em;   /* uppercase micro-labels                     */
  --ls-title:        0.07em;
  --ls-num:          0.01em;

  /* --- metrics ---------------------------------------------------------- */
  --sp-1: 4px;  --sp-2: 6px;  --sp-3: 8px;  --sp-4: 12px;
  --sp-5: 16px; --sp-6: 22px; --sp-7: 30px;

  --r-sm: 2px; --r-md: 4px; --r-lg: 6px; --r-xl: 10px;

  --topbar-h:        48px;
  --dock-gap:        10px;
  --dock-pad:        10px;
  --col-left:        332px;
  --col-right:       270px;

  /* --- motion ----------------------------------------------------------- */
  --dur-fast:        120ms;
  --dur:             200ms;
  --dur-slow:        340ms;
  --ease:            cubic-bezier(0.22, 0.72, 0.24, 1);
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);

  /* --- stacking --------------------------------------------------------- */
  --z-canvas:   0;
  --z-dock:    20;
  --z-topbar:  40;
  --z-overlay: 80;
  --z-modal:  120;
  --z-tooltip: 900;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
}