/* ============================================================
   Front-end design tokens — Obsidian UI kit (T-003)
   Retro 8-bit / GBA-era: navy surfaces, ember-orange action,
   pixel type, hard edges, chunky offset shadows.
   Source of truth: obsidian-ui-kit/STYLE_GUIDE.md
   (Applies to the randomizer app only — NOT the docs template.)
   ============================================================ */
:root {
  /* Obsidian palette */
  --obs-bg:          #0d1b2a;
  --obs-bg-deep:     #081320;
  --obs-surface:     #16293f;
  --obs-surface-2:   #1d3550;
  --obs-well:        #0a1726;
  --obs-line:        #2c4a6a;
  --obs-shadow:      #04080f;

  --obs-orange:      #ff7a18;
  --obs-orange-deep: #b34e00;
  --obs-cyan:        #2fe0d0;
  --obs-cyan-deep:   #138b80;
  --obs-green:       #56d96b;
  --obs-yellow:      #ffce3f;
  --obs-red:         #ff5d5d;

  --obs-text:        #eaf1f8;
  --obs-text-dim:    #8ba2bb;
  --obs-text-mute:   #566f8a;
  --obs-on-orange:   #0d1b2a;
  --obs-on-cyan:     #06231f;

  --obs-font-display: 'Press Start 2P', monospace;
  --obs-font-body:    'VT323', monospace;

  --obs-border:    3px solid var(--obs-shadow);
  --obs-shadow-sm: 3px 3px 0 var(--obs-shadow);
  --obs-shadow-md: 4px 4px 0 var(--obs-shadow);
  --obs-shadow-lg: 6px 6px 0 var(--obs-shadow);
  --obs-shadow-xl: 9px 9px 0 var(--obs-shadow);
  --obs-inset:     inset 3px 3px 0 rgba(0, 0, 0, 0.4);

  --obs-tracking: 1px;
  --obs-ease: 0.08s;

  /* Legacy token aliases — existing rules referenced these; point them at
     Obsidian values so anything not explicitly restyled still reads Obsidian. */
  --bg: var(--obs-bg);
  --card: var(--obs-surface);
  --muted: var(--obs-text-dim);
  --accent: var(--obs-orange);
  --glass: var(--obs-surface);
  --glass-2: var(--obs-well);
  --glass-3: var(--obs-surface-2);
  --radius: 0;
  --text: var(--obs-text);
  color-scheme: dark;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: var(--obs-font-body);
  font-size: 21px;
  background: var(--obs-bg);
  color: var(--obs-text);
  line-height: 1.35;
  -webkit-font-smoothing: none;
  font-smooth: never;
  min-height: 100vh;
}

::selection { background: var(--obs-orange); color: var(--obs-on-orange); }

/* Pixel scrollbar */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--obs-bg-deep); }
::-webkit-scrollbar-thumb { background: var(--obs-orange); border: 3px solid var(--obs-bg-deep); }

h1, h2, h3 {
  font-family: var(--obs-font-display);
  font-weight: 400;
  letter-spacing: var(--obs-tracking);
  margin: 0 0 0.5em;
  line-height: 1.5;
}

p {
  margin: 0 0 1em;
  line-height: 1.4;
}

a {
  color: var(--obs-cyan);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

/* Pixel art stays crisp wherever sprites/screens appear in the app */
img { image-rendering: pixelated; }

/* Pixel icons that replace emojis in the app UI (T-006) */
.px-icon { image-rendering: pixelated; vertical-align: middle; height: 1em; width: auto; }
.px-icon--lg { width: 48px; height: 48px; }