/* =========================================================
   Dani Cards & Collectibles — Design Tokens
   Dark-luxury / glassmorphism collectible-marketplace theme.
   Source of truth: docs/architecture/futuristic-redesign.md §2.1-2.3

   Load order (see index.html/404.html/politicas/*.html/worker/index.js):
     tokens.css -> base.css -> components.css -> animations.css -> styles.css
   This file must load FIRST — every other new file and the legacy
   styles.css both consume these custom properties.
   ========================================================= */

:root {
  /* ---------- Color palette (§2.1) ---------- */
  --surface-0: #0a0e14;
  --surface-1: #12161f;
  --surface-2: #1a2030;
  --surface-glass: rgba(22, 28, 40, 0.62);
  --border-glass: rgba(255, 255, 255, 0.09);
  --border-glass-strong: rgba(255, 255, 255, 0.16);

  --ink-0: #f7f4ee;
  --ink-muted: #a6a3ab;
  --ink-faint: #6b6976;

  --accent-pitch: #2fe6a6;
  --accent-pitch-dark: #1fb886;

  --accent-gold: #d9b45c;
  --accent-gold-deep: #a9853a;

  --accent-holo-a: #7c5cff;
  --accent-holo-b: #33c7ff;
  --accent-holo-c: #ff5cb8;

  --accent-trust: #3fa9f5;

  --danger: #ef5b5b;

  --whatsapp: #25d366;
  --whatsapp-dark: #1ebe57;

  /* ---------- Typography (§2.2) ---------- */
  --font-display: "Fraunces Variable", Georgia, "Iowan Old Style", serif;
  --font-body: "Inter Variable", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---------- Spacing — 8pt base (§2.3) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 96px;

  /* ---------- Radius (§2.3) ---------- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Shadows & glows (§2.3) ---------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --glow-pitch: 0 0 0 1px rgba(47, 230, 166, 0.25), 0 0 24px rgba(47, 230, 166, 0.18);
  --glow-gold: 0 0 0 1px rgba(217, 180, 92, 0.3), 0 0 24px rgba(217, 180, 92, 0.16);
  --glow-trust: 0 0 0 1px rgba(63, 169, 245, 0.3), 0 0 20px rgba(63, 169, 245, 0.14);

  /* =========================================================
     LEGACY (Pass 1-5 compatibility bridge) — DO NOT use in new code.

     Pass 1 only lays down the new token architecture above; it does not
     yet restyle any component (per architecture doc §6, Pass 1 scope is
     "tokens/globals/typography only, no visible component-styling change").
     Most of css/styles.css still references the OLD Costa-Rica-flag
     variable names below (--ink, --gold, --bg, --border, --shadow, etc.),
     which used to live in styles.css's own :root block. That block was
     cut out of styles.css as part of the Pass 1 file-split (per the
     confirmed CSS-split decision) and its values are reproduced here
     verbatim so every not-yet-migrated component rule in styles.css keeps
     resolving exactly as before -- i.e. zero visual regression this pass.

     Each later pass (2-6), as it restyles a component onto the new
     --surface-*/--ink-*/--accent-*/--radius-*/--shadow-* tokens above,
     should stop referencing the corresponding legacy variable(s) below.
     Once no component rule references a legacy name anymore (expected by
     end of Pass 6), delete that name from this block. This whole legacy
     section should be empty (and removable) by the end of Pass 6.
     ========================================================= */
  --cr-blue: #14335c;
  --cr-blue-dark: #0a1f3d;
  --cr-red: #7a1128;
  --cr-red-dark: #56101f;
  --ink: #1c1a17;
  --ink-soft: #2a2723;
  --gold: #a9853a;
  --gold-bright: #cba653;
  --gold-deep: #7c611f;
  --bg: #f7f4ee;
  --surface: #ffffff;
  --text: #26221d;
  --text-muted: #756c5f;
  --border: #e5ddcd;
  --radius: 12px;
  --shadow: 0 4px 16px rgba(30, 24, 10, 0.06);
  --shadow-strong: 0 10px 28px rgba(30, 24, 10, 0.12);
  --font-serif: "Georgia", "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --font-sans: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Self-hosted variable fonts (§2.2) ----------
   Self-hosted from /fonts/ — same-origin, requires zero CSP changes
   (font-src 'self' already present in _headers and PRODUCT_PAGE_CSP).
   Never add a <link> to fonts.googleapis.com/fonts.gstatic.com here —
   that would violate style-src/font-src 'self' immediately. See
   docs/architecture/futuristic-redesign.md §1/§2.2. */
@font-face {
  font-family: "Fraunces Variable";
  src: url("/fonts/fraunces-variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Variable";
  src: url("/fonts/inter-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- prefers-reduced-motion — Layer 1 (§4.4) ----------
   Foundational blanket rule, shipped in Pass 1 before any
   component-specific animation exists, so every later pass's new
   animation is neutralized by default even if a coder forgets to gate it
   individually in CSS. JS-driven animations (scroll listeners, IO
   reveals) still need their own Layer-2 JS-side check (§4.4) — this
   layer only guarantees the CSS side. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .foil-sheen,
  .hero-holo-layer {
    display: none;
  }
  .skeleton-shimmer {
    animation: none;
    opacity: 0.6;
  }
}