/* ==========================================================================
   VDGuider — Design Tokens
   Dark horror visual language: blood accent, aged gold, Cormorant + Manrope.
   No reset beyond box-sizing; app.css owns layout and components.
   ========================================================================== */

:root {
  /* ---------- Colors — base ---------- */
  --bg: #0c0a09;
  --bg-deep: #070605;
  --surface: #151110;
  --surface-2: #1b1513;
  --surface-3: #221a17;
  --surface-glass: rgba(15, 12, 11, 0.72);
  --border: #2e2320;
  --border-soft: #241b18;
  --border-strong: #3d2d28;

  /* ---------- Colors — text ---------- */
  --text: #e9e2da;
  --text-muted: #a89e93;
  --text-faint: #6f665d;

  /* ---------- Colors — accents ---------- */
  --accent: #c1121f;
  --accent-soft: #e5383b;
  --accent-dim: rgba(193, 18, 31, 0.14);
  --accent-glow: rgba(229, 56, 59, 0.32);

  --gold: #c9a15c;
  --gold-soft: #e3c38f;
  --gold-dim: rgba(201, 161, 92, 0.13);

  /* Role accents */
  --survivor: #3f9d8f;
  --survivor-soft: #6fd0c1;
  --survivor-dim: rgba(63, 157, 143, 0.14);

  --killer: #c1121f;
  --killer-soft: #e5383b;
  --killer-dim: rgba(193, 18, 31, 0.14);

  /* Status */
  --success: #4caf7d;
  --success-soft: #7ed6a6;
  --success-dim: rgba(76, 175, 125, 0.13);
  --danger: #e5383b;
  --danger-dim: rgba(229, 56, 59, 0.13);
  --info: #6c93c9;
  --info-dim: rgba(108, 147, 201, 0.13);

  /* ---------- Fonts ---------- */
  --font-display: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;
  --tracking-widest: 0.2em;

  /* ---------- Fluid type scale ---------- */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-lg: 1.1rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;

  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* ---------- Spacing scale ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  --page-max: 1200px;
  --page-pad: var(--space-6);

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-xl: 0 32px 80px rgba(0, 0, 0, 0.65);
  --shadow-accent: 0 0 0 1px rgba(229, 56, 59, 0.35), 0 14px 36px rgba(193, 18, 31, 0.18);
  --shadow-gold: 0 0 0 1px rgba(201, 161, 92, 0.35), 0 14px 36px rgba(201, 161, 92, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);

  /* ---------- Transitions ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 400ms;
  --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- Layers ---------- */
  --z-header: 50;
  --z-overlay: 80;
  --z-toast: 100;
}

/* ==========================================================================
   Minimal normalization (box-sizing only, per spec)
   ========================================================================== */

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

/* ==========================================================================
   Utilities — badges
   ========================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.25em 0.75em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: rgba(12, 10, 9, 0.78);
  color: var(--text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.5;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}

.badge--survivor {
  color: var(--survivor-soft);
  border-color: rgba(63, 157, 143, 0.5);
  background: var(--survivor-dim);
}

.badge--killer {
  color: var(--killer-soft);
  border-color: rgba(229, 56, 59, 0.5);
  background: var(--killer-dim);
}

/* ==========================================================================
   Utilities — buttons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.62em 1.25em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, var(--accent-soft), var(--accent));
  color: #fff;
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    background var(--transition),
    border-color var(--transition),
    color var(--transition),
    opacity var(--transition);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md), 0 10px 26px var(--accent-glow);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: none;
}

.btn--ghost:hover {
  border-color: rgba(229, 56, 59, 0.5);
  background: var(--accent-dim);
  color: var(--text);
  box-shadow: none;
}

.btn--danger {
  background: transparent;
  color: var(--danger);
  border-color: rgba(229, 56, 59, 0.45);
  box-shadow: none;
}

.btn--danger:hover {
  background: var(--danger-dim);
  border-color: var(--danger);
  box-shadow: 0 8px 22px rgba(193, 18, 31, 0.22);
}

/* ==========================================================================
   Utilities — card, divider, screen reader only
   ========================================================================== */

.card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-inset);
  overflow: hidden;
  transition:
    transform var(--transition),
    border-color var(--transition),
    box-shadow var(--transition);
}

.divider {
  height: 1px;
  border: 0;
  margin: var(--space-6) 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--border) 18%,
    var(--border) 82%,
    transparent
  );
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}