/*
 * Cartel — the one theme (ADR 0010). Dark-only is a decision, not an omission:
 * there is no light equivalent that keeps the tension of a lucha poster, so
 * surfaces may assume a dark ground and no component carries a theme variant.
 *
 * This sheet holds every raw value in the system. Components consume the
 * custom properties below and nothing else. /styleguide renders all of them.
 *
 * One place copies these values instead of consuming them: the five files in
 * public/ (COMBAT-47). They render with the app down, so they can link no
 * digested sheet, and nothing checks them against this one. If the palette
 * ever moves, move them by hand.
 */

:root {
  color-scheme: dark;

  /* ── Palette ─────────────────────────────────────────────────────────── */
  --ink: #17111f;
  --card: #291f3d;
  --line: #3d2e59;
  --amarillo: #ffc93c;
  --rosa: #ff4d6d;
  --menta: #3de8b0;
  --dim: #a99ac6;
  --texto: #f5efff;

  /* Sunken surfaces: HP bar tracks, inputs. */
  --well: #150f1f;

  /* The hard offset shadow under the sticker treatment. */
  --sombra: #0b0710;

  /* Fight-log event colours. The eight above cover the rest of the app. */
  --azul: #7fb8ff;
  --naranja: #ffa94d;
  --lila: #c79bff;

  /*
   * Two radials over the ink give the depth of a printed poster. Their stops
   * are tokens because they are the ground body text lands on: --poster-hi is
   * the lightest surface in the system and sets the AA ceiling for --rosa.
   */
  --poster-hi: #302247;
  --poster-lo: #2c1f42;
  --poster: radial-gradient(circle at 15% -5%, var(--poster-hi) 0%, transparent 52%),
    radial-gradient(circle at 95% 105%, var(--poster-lo) 0%, transparent 45%);

  /*
   * The holographic sweep, reserved for supporter tier 2 and up (ADR 0010).
   * Every stop is a colour the palette already carries: the tier buys the
   * sweep, never a hue of its own, and never a number.
   */
  --holo: linear-gradient(
    135deg,
    var(--amarillo),
    var(--rosa),
    var(--lila),
    var(--menta),
    var(--amarillo)
  );

  /*
   * ── Type ────────────────────────────────────────────────────────────────
   * Self-hosted subset woff2, never a CDN (ADR 0010). Each stack names a real
   * fallback so text paints during `font-display: swap`, and ends in the
   * system emoji families because pet avatars and log markers are content.
   */
  --font-display: "Bungee", "Arial Black", "Impact", system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", "Roboto",
    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-data: "Space Mono", ui-monospace, "SF Mono", "Menlo", "Consolas",
    monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";

  /* Roles, not a scale: hero, display, title, body, data, log line, eyebrow. */
  --text-hero: clamp(1.75rem, 7vw, 2.5rem);
  --text-display: 1.375rem;
  --text-title: 1.0625rem;
  --text-body: 0.875rem;
  --text-data: 0.8125rem;
  --text-log: 0.7813rem;
  --text-micro: 0.6875rem;

  /* Poster type is tracked out; body type never is. */
  --track-wordmark: 0.1em;
  --track-display: 0.06em;
  --track-micro: 0.12em;

  /* Leading */
  --leading-tight: 1.2;
  --leading-body: 1.55;
  --leading-log: 1.45;

  /* ── Space ───────────────────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-pill: 999px;
  --border: 2px;
  --border-hair: 1px;
  --sticker-border: 5px;
  --shadow-sticker: 5px 5px 0 var(--sombra);

  /* Minimum tap target, and the phone canvas every surface composes inside. */
  --tap: 44px;
  --shell: 460px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --motion-fast: 90ms;
  --motion: 150ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}