/* The app's tokens, not a palette of the site's own.
 *
 * Every value below is lifted from `Rank your movies/Views/Shared/Theme.swift`
 * and `Assets.xcassets/Theme/*.colorset` — read from the colorsets, not from the
 * doc table at the top of Theme.swift, which still carries the sibling's near-
 * black values. The app is wine, not black: `tinta` is #241016.
 *
 * Two rules from the app worth keeping here, because they are what make it look
 * like itself rather than like its hex values:
 *
 *   1. ONE dark ground and ONE raised surface. The app is dark-only by decision
 *      — there is no light mode and no appearance picker. No gradients.
 *   2. The accent marks what the USER measured — their position, their pick. It
 *      is not decoration, so it is used sparingly and never as a big fill. Oro is
 *      the DEFAULT of five the user can pick in the app; the other four are rosa
 *      #FF8FA3, menta #7ED9A5, cielo #7FB5FF, lila #C9A6FF.
 */
:root {
  /* Surfaces — tinta / carta. --color-surface-hover has no app token: carta
     lifted a step, derived here and nowhere else. */
  --color-bg: #241016;
  --color-surface: #2E151C;
  --color-surface-hover: #38202A;
  /* crema at .14: the app's `relleno` (fills) and `linea` (the 1px rule) share it */
  --color-fill: rgba(246, 237, 228, 0.14);
  --color-fill-hover: rgba(246, 237, 228, 0.20);
  --color-line: rgba(246, 237, 228, 0.14);

  /* Text — crema, and its two documented alphas */
  --color-text: #F6EDE4;
  --color-text-muted: rgba(246, 237, 228, 0.72);
  --color-text-meta: rgba(246, 237, 228, 0.55);

  /* Accent — acentoVivo-oro. Both variables carry the same value on purpose:
     the sibling split them because its vermilion failed 4.5:1 as text and oro
     clears it at 9.56, but components.css reads both names. */
  --color-accent: #E9B44C;
  --color-accent-text: #E9B44C;
  --color-on-accent: #241016;

  /* The primary button is `crema` filled with `tinta` text — the app's own,
     not an accent fill. See PickActionsView.swift. */
  --color-primary: #F6EDE4;
  --color-primary-hover: #FFFFFF;
  --color-on-primary: #241016;

  /* Radii — the app allows five and no others (3 / 4 / 8 / 14 / 999).
     --radius-phone is the exception on purpose: a device bezel in a mockup. */
  --radius-poster: 3px;
  --radius-card: 8px;
  --radius-btn: 4px;
  --radius-sheet: 14px;
  --radius-pill: 999px;
  --radius-phone: 44px;

  /* Page frame. */
  --page-max: 1280px;
  --page-pad: 40px;
  --section-pad: 88px;
  --section-pad-cta: 120px;
  --color-section-line: rgba(246, 237, 228, 0.08);

  /* Spacing. --spacing-md is the app's one side margin (Theme.margen = 24). */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 48px;
  --spacing-xl: 80px;
  --spacing-xxl: 120px;

  /* Typography — the system face, same as the app. */
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Shadows. The app allows exactly ONE — a poster lifted off its card
     (sombraPortada: y 10, SwiftUI radius 13 ≈ CSS blur 26). */
  --shadow-card: 0 10px 26px rgba(0, 0, 0, 0.6);
  --shadow-phone: 0 24px 64px rgba(0, 0, 0, 0.6);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}