/* Rewind Web App — Two-Stripe Bold / Cyberdelia Bold design system */
:root {
  /* Backgrounds */
  --bg: #0E1016;
  --surface: #1A2133;
  --surface-light: #212838;

  /* Accents */
  --blue: #3B8FCA;
  --blue-light: #5BA8DC;
  --blue-dark: #2A6A9A;
  --amber: #D4A040;
  --mint: #40A868;
  --violet: #9878CC;
  --no-red: #D65060;
  --hot-pink: #CC4488;
  --burnt-orange: #D76642;
  --deep-teal: #3A9B8B;

  /* Text */
  --text-primary: #D8D5E0;
  --text-secondary: #908DA9;
  --text-tertiary: #7A7792;

  /* Borders */
  --border: rgba(59, 143, 202, 0.15);
  --border-subtle: rgba(59, 143, 202, 0.08);

  /* Spacing */
  --xs: 4px;
  --sm: 8px;
  --md: 12px;
  --lg: 16px;
  --xl: 24px;
  --xxl: 32px;
  --xxxl: 40px;

  /* Radii */
  --card-radius: 12px;
  --pill-radius: 8px;
  --badge-radius: 6px;
  --capsule: 9999px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text-primary);
  color-scheme: dark;
  font-family: -apple-system, 'SF Pro', 'Segoe UI', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

/* Scanline overlay */
body::after {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0, 0, 0, 0.06) 2px, rgba(0, 0, 0, 0.06) 3px
  );
  pointer-events: none;
  z-index: 9999;
}

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-light); }

::selection {
  background: var(--violet);
  color: var(--text-primary);
}

:focus-visible {
  outline: 2px solid rgba(59, 143, 202, 0.6);
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue); }