/*
 * 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);

  /*
   * ── Cabina ──────────────────────────────────────────────────────────────
   * The fight-first shell (ADR 0015). Cartel decided the palette and the three
   * faces; this layer decides that a panel is a screen-printed slab rather than
   * a rounded card, that the app wears a marquee and a ringside bar, and that
   * the replay is paced like a broadcast instead of a transition.
   */

  /*
   * The second pass of a two-colour screen print: the same hue pulled darker so
   * a diagonal band reads as ink laid twice, not as a gradient. Nothing but the
   * stripes below may spend these.
   */
  --amarillo-print: #f0b62e;
  --rosa-print: #e8425f;
  --menta-print: #33cf9c;

  /* A banner is the poster's own header, so the band geometry is one decision
     spent in three places rather than three that can drift apart. */
  --stripe-band: 10px;
  --stripe-angle: -45deg;
  --stripe-amarillo: repeating-linear-gradient(
    var(--stripe-angle),
    var(--amarillo) 0 var(--stripe-band),
    var(--amarillo-print) var(--stripe-band) calc(var(--stripe-band) * 2)
  );
  --stripe-rosa: repeating-linear-gradient(
    var(--stripe-angle),
    var(--rosa) 0 var(--stripe-band),
    var(--rosa-print) var(--stripe-band) calc(var(--stripe-band) * 2)
  );
  --stripe-menta: repeating-linear-gradient(
    var(--stripe-angle),
    var(--menta) 0 var(--stripe-band),
    var(--menta-print) var(--stripe-band) calc(var(--stripe-band) * 2)
  );

  /*
   * The dot screen a printed poster leaves behind. Mixed from --texto rather
   * than declared as its own faint colour, because the system has no pure white
   * and this has to sit on the card's violet without cooling it.
   *
   * The alpha is inside the token on purpose: a panel paints this as a second
   * background layer, so it never becomes a pseudo-element — and a card is a
   * flex column, where an ::before would take a slot and a gap of its own.
   */
  --halftone: radial-gradient(
    color-mix(in srgb, var(--texto) 6%, transparent) 0.6px,
    transparent 0.7px
  );
  --halftone-grid: 5px 5px;

  /*
   * Hard offset shadows, never blurred: a blur reads as elevation and this
   * system has none. A slab sits *on* the poster, the way a second sheet of
   * paper does.
   */
  --border-poster: 3px;
  --border-mug: 4px;
  --shadow-poster: 6px 6px 0 var(--sombra);
  --shadow-cast: 4px 4px 0 var(--sombra);
  --shadow-cast-pressed: 1px 1px 0 var(--sombra);
  --shadow-slab: 8px 8px 0 var(--sombra);

  /* The fixed chrome, which every scrolling surface has to clear. */
  --marquee: 52px;
  --ringside: 78px;
  --drawer: min(320px, 86vw);

  /* The call a verdict makes, larger than --text-hero because it is the one
     word on its screen and the screen exists to be screenshotted. */
  --text-verdict: clamp(2rem, 12vw, 3rem);

  /* The log line currently landing. The rest of the stack stays --text-log. */
  --text-moment: 0.9375rem;

  /*
   * --motion is the budget for a control answering a thumb; a replay is not
   * that. These are the beats a *moment* is allowed — the slam landing, the
   * screen kicking on a crit, a number counting up — and they are deliberately
   * outside the interaction budget rather than quietly over it.
   */
  --beat-fast: 320ms;
  --beat: 520ms;
  --beat-slow: 900ms;

  /* Overshoot: a stamped thing arrives past its mark and settles back. */
  --ease-slam: cubic-bezier(0.16, 1, 0.3, 1);
}