/* Gerado a partir de docs/design-system/skins/sport.css (só a pele Pista) — não editar à mão; rode scripts/sync_design.sh */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

/* ── PISTA · cobalto e volt ──────────────────────────────────────────────────
   The performance-running palette: deep cobalt brand, volt yellow as the price
   marker. Barlow Condensed over IBM Plex Sans — technical, not festive.      */
[data-skin="pista"] {
  --color-bg: #f2f4f7;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-text: #0b1020;
  --text-on-accent: #ffffff;

  --color-accent: #0a2ff0;
  --color-accent-2: #00875a;
  --color-hot: #e8006b;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;

  --text-display: 68px;
  --text-h1: 56px;
  --text-h2: 38px;
  --text-h3: 27px;
  --text-h4: 22px;
  --text-body: 14px;
  --text-price-lg: 33px;
  --text-price-md: 22px;
  --tracking-tight: 0em;
  --tracking-eyebrow: 0.13em;

  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  --card-w-deal: 212px;
  --rail-gap: 11px;

  --color-accent-100: #e8ecff; --color-accent-200: #cbd4ff; --color-accent-300: #9fb0ff;
  --color-accent-400: #6a80fb; --color-accent-500: #3a55f5; --color-accent-600: #1a35e2;
  --color-accent-700: #1226b0; --color-accent-800: #0c1a7d; --color-accent-900: #070f4d;

  --color-accent-2-100: #dcf6ec; --color-accent-2-200: #b2e9d5; --color-accent-2-300: #74d3b3;
  --color-accent-2-400: #33b48c; --color-accent-2-500: #0d976e; --color-accent-2-600: #077a58;
  --color-accent-2-700: #055f44; --color-accent-2-800: #044431; --color-accent-2-900: #022a1e;

  --color-neutral-100: #f5f6f9; --color-neutral-200: #e8eaf0; --color-neutral-300: #d2d6e0;
  --color-neutral-400: #acb2c2; --color-neutral-500: #868da1; --color-neutral-600: #666c80;
  --color-neutral-700: #4a5060; --color-neutral-800: #313642; --color-neutral-900: #191c25;

  --color-hot-100: #ffe6f1; --color-hot-200: #ffc2dd; --color-hot-300: #ff8fbf;
  --color-hot-400: #fb5397; --color-hot-500: #ef1f74; --color-hot-600: #cc0058;
  --color-hot-700: #a00045; --color-hot-800: #740032; --color-hot-900: #48001f;

  --deal-record: var(--color-hot-600);
  --deal-drop: var(--color-hot-600);
  --deal-good: var(--color-accent-2-600);
  --deal-watch: var(--color-accent-600);
  --deal-price: var(--color-accent-800);   /* cobalt price, volt reserved below */
  --deal-coupon: var(--color-accent-700);

  --shadow-sm: 0 1px 2px color-mix(in srgb, #0b1020 12%, transparent);
  --shadow-md: 0 4px 12px color-mix(in srgb, #0b1020 14%, transparent);
  --shadow-hover: 0 10px 26px color-mix(in srgb, #0b1020 20%, transparent);
  --shadow-lg: 0 18px 46px color-mix(in srgb, #0b1020 24%, transparent);
}
/* Volt is the one thing that is not a token role: it marks the discount pill and
   nothing else, which is exactly how running brands ration it. */
[data-skin="pista"] { --deal-drop: #c8f000; --deal-drop-ink: #0b1020; }
[data-skin="pista"] h1, [data-skin="pista"] h2, [data-skin="pista"] h3, [data-skin="pista"] h4 {
  text-transform: uppercase;
}