/*
 * Elite Dash design tokens.
 * Everything visual comes from here. No widget or chrome file declares a raw colour.
 * Font sizes are rem/em only (CLAUDE.md rule); the root font-size is scaled at runtime
 * by layout/surface.js as `userFontSize / 0.75`, identical to the legacy page.
 */

:root {
  /* ---- Palette (D3: in-game orange primary, legacy amber secondary) ---- */
  --orange:          #ff7100;
  --orange-dim:      #b34f00;
  --orange-bright:   #ff9440;
  --amber:           #ffa500;   /* legacy accent, kept for values and badges */

  --bg-0:            #000000;   /* page ground */
  --bg-1:            #0a0c0f;   /* surface behind widgets */
  --bg-2:            #12161b;   /* widget body */
  --bg-3:            #1b2027;   /* widget header, raised rows */
  --bg-hover:        #232a33;

  --text:            #d8dde3;
  --text-dim:        #999999;
  --text-faint:      #666666;

  --ok:              #00ff00;
  --bad:             #ff0000;
  --warn:            #ffcc00;
  --info:            #77ddff;
  --gold:            #ffd700;

  --line:            #2a323c;
  --line-strong:     #3d4854;

  /* ---- Type scale (eight steps, rem only) ---- */
  --fs-xxs:  0.60rem;
  --fs-xs:   0.65rem;
  --fs-sm:   0.70rem;
  --fs-base: 0.75rem;   /* the step the root font-size formula targets */
  --fs-md:   0.85rem;
  --fs-lg:   1.00rem;
  --fs-xl:   1.25rem;
  --fs-xxl:  1.60rem;

  /* Display for chrome that names things — titles, tabs, headings; UI for prose and
     tables; mono for figures that have to line up. Every stack keeps a real fallback:
     a font that fails to load costs the look and nothing else. */
  --ff-display: 'Rajdhani', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ff-ui:   'Exo 2', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --ff-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

  --fw-normal: 400;
  --fw-bold:   600;

  /* ---- Spacing ---- */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* ---- Chrome geometry ---- */
  --chamfer:      0.6rem;   /* corner cut on widgets and panels */
  --tab-slant:    0.55rem;  /* angle cut off the trailing edge of a tab */
  --hairline:     1px;
  --radius-sm:    2px;
  --gutter:       8px;      /* gutter track width, I7; see engine.js GUTTER_PX */
  --header-h:     1.9rem;   /* widget header height */
  --touch-min:    2.75rem;  /* minimum hit target on coarse pointers */

  /* ---- Glow and depth ---- */
  --glow:        0 0 0.4rem rgba(255, 113, 0, 0.35);
  --glow-strong: 0 0 0.8rem rgba(255, 113, 0, 0.6);
  --shadow:      0 2px 6px rgba(0, 0, 0, 0.6);

  /* ---- Motion ---- */
  --t-fast: 90ms;
  --t-slow: 220ms;
  --t-pulse: 700ms;   /* an event landing; 220ms read as a flicker */
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-slow: 0ms; --t-pulse: 0ms; }
}

@media (pointer: coarse) {
  :root { --header-h: 2.4rem; }
}