/*
  Femenino Santa Ponsa — Design tokens
  Morado vivo sobre base crema/hueso y negro casi puro. El acento se usa
  con contundencia (botones, líneas, hover-fills, marquee) en vez de
  reservarse solo para detalles. Bordes rectos, tipografía Unbounded en
  mayúsculas para todo lo grande.
*/
:root {
  /* Brand — morado vivo del rediseño */
  --accent: #a855f7;
  --accent-dark: #7e22ce;
  --accent-light: #d8b4fe;
  --accent-soft: rgba(168, 85, 247, 0.10);
  --accent-hot: #e879f9;

  /* Base */
  --cream: #ffffff;
  --cream-deep: #f0f0f0;
  --ink: #0a0a0a;
  --ink-soft: #423e47;
  --dark: #0a0a0a;
  --dark-2: #141414;
  --dark-3: #1c1c1c;
  --paper: #ffffff;

  /* Text */
  --text-on-cream: var(--ink);
  --text-on-cream-muted: #6b6570;
  --text-on-dark: #f4f0e8;
  --text-on-dark-muted: #9a97a0;

  /* Status */
  --win: #22c55e;
  --draw: #eab308;
  --loss: #ef4444;

  /* Type */
  --font-display: "Unbounded", "Familjen Grotesk", sans-serif;
  --font-body: "Familjen Grotesk", "Segoe UI", sans-serif;

  /* Scale — bordes rectos, casi sin redondeo */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 2px;

  --shadow-sm: 0 2px 8px rgba(10, 10, 10, 0.08);
  --shadow-md: 0 16px 32px rgba(10, 10, 10, 0.18);
  --shadow-lg: 0 28px 56px rgba(10, 10, 10, 0.35);
  --shadow-accent: 0 6px 18px rgba(168, 85, 247, 0.35);

  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.77, 0, 0.175, 1);
}