/* Rail.fm theme — built from design/tokens.json. Do not hand-edit colors
   elsewhere; every page styles through these variables.
   Dark is the default theme (:root). Light is the override, applied either
   by explicit [data-theme="light"] or by OS preference when no explicit
   choice is stamped. Contrast ratios noted are measured, not estimated. */

:root {
  /* -- surfaces (dark default) -- */
  --surface-page:    #130e10;
  --surface-card:    #1f191c;
  --surface-raised:  #322c2f;
  --surface-inverse: #f8f6f7;

  /* -- text -- */
  --text-display:    #ffffff;  /* 19.1:1 on page */
  --text-primary:    #edeaeb;  /* 16.0:1 on page */
  --text-secondary:  #a19d9f;  /*  7.1:1 on page */
  --text-tertiary:   #837f81;  /*  4.8:1 on page */
  --text-accent:     #ff61b7;  /*  7.0:1 on page, 6.3:1 on card */
  --text-on-accent:  #0a0608;  /*  5.7:1 on accent fill */

  /* -- actions -- */
  --action-primary:       #f438a6;  /* fill: 5.4:1 vs page (UI needs 3:1) */
  --action-primary-hover: #ff61b7;
  --action-destructive:   #ff8a80;  /* 8.4:1 on page */

  /* -- borders -- */
  --border-default: #322c2f;   /* decorative: cards, dividers */
  --border-strong:  #837f81;   /* control borders: 4.8:1 */

  /* -- feedback -- */
  --feedback-success: #4ade80;
  --feedback-error:   #ff8a80;
  --feedback-warning: #fbbf24;
  --feedback-info:    #7dd3fc;

  /* -- focus -- */
  --focus-ring: #ff61b7;       /* 7.0:1 vs page */

  /* -- typography -- */
  --font-display: "Anton", "Arial Narrow", "Helvetica Neue", Impact, sans-serif;
  --font-ui: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-xs: 12px;  --text-sm: 14px;  --text-base: 16px; --text-lg: 18px;
  --text-xl: 20px;  --text-2xl: 24px; --text-3xl: 30px;  --text-4xl: 36px;
  --text-5xl: 48px; --text-6xl: 60px; --text-7xl: 72px;  --text-8xl: 96px;
  --leading-tight: 1.1; --leading-heading: 1.25; --leading-body: 1.5;
  --tracking-display: 0.01em; --tracking-label: 0.06em;

  /* -- spacing (4px base) -- */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;

  /* -- radii -- */
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px;

  /* -- elevation (restrained; glow is for the accent, used once per view) -- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.45);
  --glow-accent: 0 0 24px rgba(244, 56, 166, 0.25);

  /* -- motion -- */
  --duration-fast: 120ms; --duration-base: 180ms; --duration-slow: 280ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(1, 0, 0.8, 1);
  --ease-inout: cubic-bezier(0.6, 0, 0.4, 1);

  color-scheme: dark;
}

/* Dark is the default for everyone regardless of OS preference —
   founder decision 2026-08-21. Light exists only as an explicit
   opt-in via data-theme="light" (no UI toggle yet). */
/* Explicit user choice always wins, both directions */
:root[data-theme="light"] {
  --surface-page:    #f8f6f7;
  --surface-card:    #ffffff;
  --surface-raised:  #edeaeb;
  --surface-inverse: #130e10;
  --text-display:    #0a0608;
  --text-primary:    #130e10;
  --text-secondary:  #4b4649;
  --text-tertiary:   #676164;
  --text-accent:     #b10074;
  --text-on-accent:  #0a0608;
  --action-primary:  #f438a6;
  --action-primary-hover: #d7068e;
  --action-destructive: #b91c1c;
  --border-default: #d9d6d8;
  --border-strong:  #837f81;
  --feedback-success: #15803d;
  --feedback-error:   #b91c1c;
  --feedback-warning: #92400e;
  --feedback-info:    #075985;
  --focus-ring: #d7068e;
  --shadow-card: 0 1px 2px rgba(19, 14, 16, 0.08);
  --shadow-raised: 0 4px 16px rgba(19, 14, 16, 0.12);
  --glow-accent: 0 0 24px rgba(244, 56, 166, 0.18);
  color-scheme: light;
}

/* -- base element layer ----------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: var(--leading-heading); margin: 0; }

a { color: var(--text-accent); text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

/* -- shared components -------------------------------------------------- */

.display {
  font-family: var(--font-display);
  font-weight: 400; /* Anton has one weight; scale carries the boldness */
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--text-display);
}

.label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.wordmark { display: inline-flex; align-items: baseline; gap: 2px; text-decoration: none; }
.wordmark .rail {
  font-family: var(--font-display);
  text-transform: uppercase;
  color: var(--text-display);
  letter-spacing: 0.02em;
}
.wordmark .fm {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--text-accent);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: var(--text-base); font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }
.btn[aria-busy="true"] { pointer-events: none; }

.btn-primary { background: var(--action-primary); color: var(--text-on-accent); }
.btn-primary:hover { background: var(--action-primary-hover); }

.btn-secondary {
  background: transparent; color: var(--text-primary);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-raised); }

.btn-danger { background: transparent; color: var(--action-destructive); border-color: var(--action-destructive); }
.btn-danger:hover { background: color-mix(in srgb, var(--action-destructive) 12%, transparent); }

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
}

.match-score {
  font-family: var(--font-ui);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text-accent);
}

.input {
  width: 100%;
  min-height: 44px; padding: 0 var(--space-3);
  background: var(--surface-card);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-ui); font-size: var(--text-base);
}
.input::placeholder { color: var(--text-tertiary); }
.input[aria-invalid="true"] { border-color: var(--feedback-error); }

.num { font-variant-numeric: tabular-nums; }

/* --- Media: event/card imagery (added with B9a) ------------------------- */
/* Images never sit under text; they blend downward into the page/card so
   type always rests on token surfaces (contrast stays gate-verified). */
.event-hero {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.event-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.event-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--surface-page) 2%, transparent 55%);
}
.card-media {
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-3);
}
.card-media img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.card-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--surface-card) 0%, transparent 40%);
}