/* Design tokens. Every hex traces to brand/demirkaan-dna.json (measured, see tools/measure-colors.mjs). */
:root {
  /* room */
  --night: #0C162C;
  --night-2: #182746;
  --night-3: #0F1A2E;
  --ink: #05050A;
  --charcoal: #252226;
  /* light */
  --cream: #F2E8E2;
  --silver: #DCDCDC;
  --silver-mid: #8F908F;
  --silver-dark: #484847;
  /* accent: the one main action and the active channel */
  --amber: #F1BD78;
  --amber-deep: #B67443;
  /* portraits only */
  --skin: #E4915F;

  /* channel tint: set per channel by the zap (see DNA channel_tints); washes over night */
  --tint: var(--night-2);
  --tint-glow: var(--silver-mid);
  --room: var(--night);

  --title: "Anton", Impact, sans-serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
  --osd: "VT323", "Geist Mono", ui-monospace, monospace;

  --m: clamp(16px, 3vw, 48px);
  --line: 2.5px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px;
  --shadow-1: 0 2px 0 var(--ink);
  --shadow-2: 0 4px 0 var(--ink);
  --shadow-3: 0 8px 0 var(--ink);

  --step-4: steps(4, end);
  --step-6: steps(6, end);
  --glide: cubic-bezier(.16, 1, .3, 1);
  --pop: cubic-bezier(.34, 1.4, .64, 1);
  --t-micro: 160ms; --t-normal: 420ms; --t-large: 1100ms;
}

/* The room is always dark; text follows the surface it sits on. */
[data-tone="dark"]  { --fg: var(--cream); --soft: var(--silver-mid); --panel: var(--night-2); }
[data-tone="screen"] { --fg: var(--cream); --soft: var(--silver); --panel: var(--ink); }

html { background: var(--room); color: var(--cream); }
body { margin: 0; font: 400 1.0625rem/1.55 var(--sans); background: var(--room); }

/* Title style: uppercase condensed, ink stroke under fill, hard offset shadow, one accent line. */
.title {
  font-family: var(--title); font-weight: 400; text-transform: uppercase; line-height: .9;
  -webkit-text-stroke: .09em var(--ink); paint-order: stroke fill;
  text-shadow: .045em .06em 0 var(--ink);
}
.title .ln { display: block; }
.title .ln.accent { color: var(--amber); }
.title-xl { font-size: clamp(3.4rem, 8.6vw, 9.4rem); }
.title-lg { font-size: clamp(2.8rem, 6.4vw, 6.6rem); }
.title-md { font-size: clamp(2.2rem, 3.8vw, 3.8rem); }

/* Button: presses like a hard-shadow key. */
.btn {
  display: inline-flex; align-items: center; gap: .5em; min-height: 44px; padding: .7em 1.2em;
  font: 600 1rem/1 var(--sans); color: var(--ink); background: var(--amber);
  border: var(--line) solid var(--ink); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  transition: transform var(--t-micro) var(--pop), box-shadow var(--t-micro) var(--pop);
  text-decoration: none; cursor: pointer;
}
.btn:hover { transform: translateY(-2px) rotate(-.6deg); box-shadow: 0 6px 0 var(--ink); }
.btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.btn.ghost { color: var(--cream); background: var(--night-2); }

/* Panel: ink outline, hard shadow, no blur, no glass. */
.panel { background: var(--panel, var(--night-2)); color: var(--fg, var(--cream)); border: var(--line) solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--shadow-3); }

/* On-screen display text (TV only). */
.osd { font-family: var(--osd); letter-spacing: .04em; text-transform: uppercase; color: var(--amber); }

/* Pixel art stays crisp. */
.pixel { image-rendering: pixelated; image-rendering: crisp-edges; }

a { color: inherit; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: var(--m); top: 8px; z-index: 100; background: var(--amber); color: var(--ink); padding: .6em 1em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}