/* =========================================================
   base.css
   Design tokens (color, type, space) + reset.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Shrikhand&family=Bitter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* ---- Color ---- */
  --color-bg:            #0a0806;
  --color-accent:        #e8603c;
  --color-glow:          #ffb257;

  --color-paper:         #f4ede0;
  --color-text:          #f4ede0;
  --color-text-muted:    #cdbba3;

  --color-screen:        #252526;
  --color-screen-idle-icon: #4a4238;
  --color-screen-idle-text: #2c2822;
  --color-screen-idle-sub:  #242019;
  --color-screen-on-icon:   #e0b13a;
  --color-screen-on-text:   #f2ede1;
  --color-screen-on-sub:    #b8ae94;

  /* ---- Type ----
     display: headings. body: paragraphs. mono: everything else
     (nav, tape tags, TV-screen readout, pixel chips) — named
     "mono" for history, Bitter now, not literally monospace. */
  --font-display: 'Shrikhand', cursive;
  --font-body:    'Bitter', serif;
  --font-mono:    'Bitter', serif;

  --text-sm:   clamp(0.8rem, 0.76rem + 0.2vw, 0.9375rem);
  --text-base: 1rem; /* fixed 16px base */

  --tracking-wide: 0.08em;

  /* ---- Space ---- */
  --space-2xs: clamp(0.5rem, 0.44rem + 0.3vw, 0.625rem);
  --space-xs:  clamp(0.75rem, 0.65rem + 0.5vw, 1rem);
  --space-sm:  clamp(1rem, 0.85rem + 0.8vw, 1.5rem);
  --space-md:  clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
  --space-lg:  clamp(2rem, 1.5rem + 2.5vw, 3.75rem);
  --space-xl:  clamp(2.75rem, 2rem + 3.75vw, 5.5rem);
  --space-2xl: clamp(4rem, 2.5rem + 6vw, 9rem);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-med: 400ms;
}

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

html { color-scheme: dark; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
ul { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: -3rem;
  background: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: 4px;
  font-weight: 600;
  z-index: 100;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-sm); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}