/* ==================================================================
   TEDLEY DIGITAL — base.css
   Shared design tokens + reset, used by every page in the universe
   (the main scene and every sub-brand's coming-soon page).
================================================================== */
:root {
  /* color */
  --void: #000000;
  --primary: #8866CD;          /* Tedley's canonical purple */
  --primary-soft: #B7A0E8;     /* intensified on hover/focus */
  --primary-dim: rgba(136, 102, 205, 0.35);

  --yona: #8FD8F0;             /* airy sky blue */
  --yona-hot: #C9EEFB;
  --yona-dim: rgba(143, 216, 240, 0.28);

  --jokey: #B0123F;            /* aggressive cyber crimson */
  --jokey-hot: #E11855;
  --jokey-dim: rgba(225, 24, 85, 0.30);

  --parodise: #0B3B3C;         /* midnight emerald — Parodise's own page identity (unrelated to the orbit now) */
  --parodise-hot: #1E6B66;
  --parodise-dim: rgba(30, 107, 102, 0.35);

  --tshield: #0B3B3C;         /* midnight emerald — T-Shield's planet in the main orbit */
  --tshield-hot: #1E6B66;
  --tshield-dim: rgba(30, 107, 102, 0.35);

  --tavern: #B5651D;           /* amber mead */
  --tavern-hot: #D98A3D;
  --tavern-dim: rgba(217, 138, 61, 0.28);

  --ink: #EDEAF6;
  --ink-dim: rgba(237, 234, 246, 0.55);
  --ink-faint: rgba(237, 234, 246, 0.28);

  /* typography */
  --font-display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-voice: 'Fraunces', Georgia, serif; /* warm serif for the entry headline, contrasting the scripted logo */
  --font-cinematic: 'Cinzel', Georgia, serif; /* monumental capitals for the entry button — Jem's pick */

  /* timing: slow, "breathing" transitions matching the track's mood */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

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

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

body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-body);
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

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

:focus-visible {
  outline: 2px solid var(--primary-soft);
  outline-offset: 4px;
  border-radius: 4px;
}