/*
 * SearchAShow Design System v8.0 — "app-matched"
 * --------------------------------------------------------------------------
 * Direct port of the Flutter mobile app palette (lib/theme.dart, class C).
 * The app is the source of truth. The web should feel like the same product.
 *
 * Heritage: Fatsoma-inspired light surface + Apple-system greys + a single
 * signature pink (#FF2D55) used only on the primary CTA, active states, and
 * the price tag. No second accent. No glows.
 *
 * Supersedes v7.0 ("editorial dark") — both v6.0/v7.0 are gone. The website
 * is now a light premium platform that mirrors the iOS-style app exactly.
 *
 * Pages on v8.0:  index.html, sales-tracker.html
 * Still on v5.0:  every other page (rolled out in follow-up passes)
 */

:root {
  /* ── One accent — Fatsoma pink from the app, used sparingly ───────────── */
  --accent:       #FF2D55;   /* C.pink (iOS systemPink) */
  --accent-h:     #E5294C;   /* hover — darker pink */
  --accent-d:     #C6193A;   /* pressed */
  --accent-tint:  #FFEBEE;   /* C.pinkLight — the ONLY tinted bg */
  --accent-ring:  rgba(255,45,85,.22);  /* focus halo */

  /* ── Surfaces (light, app-matched) ────────────────────────────────────── */
  --bg:           #FFFFFF;   /* page = C.white */
  --surf-1:       #F2F2F7;   /* C.grey6 — soft fill / cards */
  --surf-2:       #E5E5EA;   /* C.grey5 — hover / dividers */
  --surf-3:       #F9F9FB;   /* very soft elevated (between bg and surf-1) */
  --surf-nav:     #FFFFFF;   /* nav — solid white, hairline bottom */

  /* ── Lines (visible on white — bumped from RA-style hairlines that were too soft) ── */
  --line:         #D8D8DC;   /* default border — visible on white */
  --line-strong:  #BFBFC5;   /* control borders (inputs, ghost buttons) — clearly visible */
  --line-loud:    #8E8E93;   /* emphatic divider / hover state */

  /* ── Text hierarchy (Apple-system descending greys) ───────────────────── */
  --ink:          #0D0D0D;   /* C.black — primary heading */
  --ink-soft:     #1C1C1E;   /* C.grey1 — body */
  --muted:        #3A3A3C;   /* C.grey2 — secondary */
  --dim:          #8A8A8E;   /* C.grey3 — metadata, captions */
  --faint:        #AEAEB2;   /* C.grey4 — placeholders */

  /* Used inside the pink CTA */
  --ink-on-accent: #FFFFFF;
  --ink-on-light:  #0D0D0D;

  /* ── Status (semantic — from the app's category palette where it overlaps) */
  --ok:           #34C759;   /* C.theatre — iOS systemGreen */
  --warn:         #FF9500;   /* C.comedy — iOS systemOrange */
  --danger:       #FF3B30;   /* iOS systemRed */
  --info:         #007AFF;   /* C.festival — iOS systemBlue */

  /* Category accents (only when explicitly color-coding by genre — sparingly) */
  --cat-comedy:    #FF9500;
  --cat-music:     #5856D6;
  --cat-theatre:   #34C759;
  --cat-dance:     #FF2D55;
  --cat-festival:  #007AFF;

  /* Legacy aliases — keep unmigrated pages compiling.  DO NOT use in new code. */
  --success:      var(--ok);
  --warning:      var(--warn);
  --error:        var(--danger);
  --brand:        var(--accent);
  --brand-h:      var(--accent-h);
  --brand-d:      var(--accent-d);
  --brand-soft:   var(--accent-tint);
  --brand-ring:   var(--accent-ring);
  --accent-soft:  var(--accent-tint);
  --violet:       var(--cat-music);
  --violet-soft:  rgba(88,86,214,.10);
  --blue:         var(--accent);
  --blue-d:       var(--accent-h);
  --blue-dd:      var(--accent-d);
  --blue-vivid:   var(--cat-music);
  --blue-light:   var(--accent-tint);
  --blue-mid:     var(--line-strong);
  --navy:         var(--ink);
  --dark:         var(--ink);
  --grey1:        var(--ink-soft);
  --grey2:        var(--muted);
  --grey3:        var(--dim);
  --grey4:        var(--faint);
  --grey5:        var(--line);
  --grey6:        var(--surf-1);
  --white:        #FFFFFF;

  /* ── Radius scale — app uses 14px on buttons; mirror that ─────────────── */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  14px;   /* app's button radius */
  --r-xl:  20px;
  --r-pill: 999px;
  /* Legacy aliases */
  --r:  var(--r-md);
  --rl: var(--r-lg);
  --rx: var(--r-lg);

  /* ── Shadows (subtle — Apple-style) ─────────────────────────────────────── */
  --shadow-1:  0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
  --shadow-2:  0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-3:  0 12px 32px rgba(0,0,0,.12), 0 6px 14px rgba(0,0,0,.06);
  /* Legacy aliases */
  --shadow-sm: var(--shadow-1);
  --shadow:    var(--shadow-2);
  --shadow-lg: var(--shadow-3);
  --shadow-glow: var(--shadow-2);

  /* ── Motion ─────────────────────────────────────────────────────────────── */
  --ease:       180ms cubic-bezier(.2,.6,.2,1);
  --ease-fast:  120ms cubic-bezier(.2,.6,.2,1);
  --ease-slow:  260ms cubic-bezier(.2,.6,.2,1);

  /* ── Type ───────────────────────────────────────────────────────────────── */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Roboto', sans-serif;
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-48: 48px;

  /* Headings — tight tracking matches the app's -0.3 letter-spacing on titles */
  --tracking-tight:   -0.02em;
  --tracking-tighter: -0.035em;
  --tracking-meta:     0.08em;
}

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

/* ──────────────────────────────────────────────────────────────────────────
 * Base
 * ────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent-tint); color: var(--ink); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Surfaces & text utilities
 * ────────────────────────────────────────────────────────────────────────── */
.surface-1 { background: var(--surf-1); border: 1px solid var(--line); border-radius: var(--r-lg); }
.surface-2 { background: var(--surf-2); border: 1px solid var(--line); border-radius: var(--r-lg); }
.surface-3 { background: var(--bg);     border: 1px solid var(--line-strong); border-radius: var(--r-lg); }
.text-ink   { color: var(--ink); }
.text-soft  { color: var(--ink-soft); }
.text-muted { color: var(--muted); }
.text-dim   { color: var(--dim); }
.text-accent { color: var(--accent); }

.eyebrow {
  font-size: var(--fs-11);
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: var(--tracking-meta);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Button system — flat, premium, Apple-flavoured
 * Matches the Flutter app's ElevatedButton:
 *   bg = C.pink, fg = white, radius 14, weight 700, letter-spacing 0.2
 * ────────────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 44px;
  padding: 0 22px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  font: 700 var(--fs-14)/1 var(--font-sans);
  letter-spacing: 0.2px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast), box-shadow var(--ease-fast);
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.btn-sm { height: 36px; padding: 0 14px; font-size: var(--fs-13); border-radius: var(--r-md); }
.btn-lg { height: 52px; padding: 0 26px; font-size: var(--fs-15); }

.btn-primary {
  background: var(--accent);
  color: var(--ink-on-accent);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-h); border-color: var(--accent-h); }
.btn-primary:active { background: var(--accent-d); }

.btn-secondary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn-secondary:hover { background: var(--ink-soft); border-color: var(--ink-soft); }

.btn-ghost {
  background: var(--bg);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--surf-1); border-color: var(--line-loud); }

.btn-link {
  background: transparent; border: none; padding: 0; height: auto;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-weight: 600;
}
.btn-link:hover { color: var(--accent-h); }

/* ──────────────────────────────────────────────────────────────────────────
 * Form controls
 * ────────────────────────────────────────────────────────────────────────── */
.input, .select, .textarea {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font: 500 var(--fs-14)/1.4 var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  outline: none;
  transition: border-color var(--ease-fast), background var(--ease-fast), box-shadow var(--ease-fast);
}
.textarea { height: auto; padding: 12px 14px; min-height: 88px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--faint); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--line-loud); }
.input:focus, .select:focus, .textarea:focus {
  background: var(--bg);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Chips
 * ────────────────────────────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font: 700 var(--fs-11)/1 var(--font-sans);
  letter-spacing: 0.04em;
  border: 1px solid var(--line);
  background: var(--surf-1);
  color: var(--ink-soft);
}
.chip-accent  { background: var(--accent-tint); color: var(--accent); border-color: rgba(255,45,85,.32); }
.chip-ok      { background: rgba(52,199,89,.10);  color: #1F8B3F; border-color: rgba(52,199,89,.32); }
.chip-warn    { background: rgba(255,149,0,.10);  color: #B96A00; border-color: rgba(255,149,0,.32); }
.chip-danger  { background: rgba(255,59,48,.10);  color: #C0271D; border-color: rgba(255,59,48,.32); }
.chip-neutral { background: var(--surf-1); color: var(--muted); border-color: var(--line); }

/* ──────────────────────────────────────────────────────────────────────────
 * Skeleton
 * ────────────────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surf-1) 0%, var(--surf-2) 50%, var(--surf-1) 100%);
  background-size: 200% 100%;
  animation: sas-shimmer 1.4s linear infinite;
  border-radius: var(--r-sm);
}
@keyframes sas-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Container
 * ────────────────────────────────────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 768px) { .container { padding: 0 16px; } }