/* Authenticated Unbroken surfaces share the app's dark visual language.
   This file is deliberately token-first so a future light theme can replace
   values without changing information hierarchy or component behaviour. */
:root {
  color-scheme: dark;
  --bg: #000000;
  --surface: #100624;
  --elevated: #1f0e3f;
  --border: #2d1a4a;
  --border-strong: #4a2e73;
  --text: #f7f2ff;
  --text-bright: #f7f2ff;
  --text-muted: #b8acd0;
  --text-dim: #a99bc6;
  --action: #ffe500;
  --green: #00ff88;
  --violet: #bf5fff;
  --blue: #559cff;
  --cyan: #2edbff;
  --orange: #fc4c02;
  --coral: #ff7a57;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --phase-R: var(--cyan);
  --phase-A: var(--blue);
  --phase-C: var(--action);
  --phase-E: var(--coral);
  --z1: var(--cyan);
  --z2: var(--green);
  --z3: var(--action);
  --z4: var(--orange);
  --z5: #ff2d55;
  --c-fitness: var(--blue);
  --c-fatigue: var(--coral);
  --c-form: var(--action);
  --metric-recovery-rgb: 0, 255, 136;
  --metric-sleep-rgb: 191, 95, 255;
  --metric-load-rgb: 252, 76, 2;
  --metric-protocol-rgb: 255, 229, 0;
  --metric-cyan-rgb: 46, 219, 255;
  --metric-heart-rgb: 255, 122, 87;
  --private-card: linear-gradient(145deg, rgba(31, 14, 63, .96), rgba(16, 6, 36, .98));
  --private-card-elevated: linear-gradient(145deg, rgba(45, 26, 74, .92), rgba(22, 8, 48, .98));
  --private-card-border: rgba(74, 46, 115, .78);
  --private-shadow: 0 22px 60px rgba(0, 0, 0, .44), inset 0 1px rgba(255, 255, 255, .035);
  --private-radius: 24px;
  --private-radius-compact: 18px;
  --private-pill: 999px;
  --private-target: 44px;
}

html, body { background: var(--bg); }
body {
  background-image:
    radial-gradient(900px 520px at 10% -12%, rgba(191, 95, 255, .18), transparent 66%),
    radial-gradient(820px 540px at 92% 2%, rgba(255, 229, 0, .08), transparent 64%),
    linear-gradient(180deg, #080214 0%, #000 66%);
  background-attachment: fixed;
}

.nav {
  background: rgba(7, 2, 16, .84);
  border-bottom-color: rgba(74, 46, 115, .72);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

.nav-link, .tb-btn, .navbtn, button, a { -webkit-tap-highlight-color: transparent; }
.nav-link, .tb-btn, .navbtn { min-height: var(--private-target); }
.nav-link { display: inline-flex; align-items: center; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--action);
  outline-offset: 3px;
}

::selection { color: #08020d; background: var(--action); }

@media (max-width: 760px) {
  body { background-image: radial-gradient(620px 420px at 40% -5%, rgba(191, 95, 255, .16), transparent 68%), linear-gradient(180deg, #080214, #000 64%); }
}

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