/*
 * Sistema de diseño Fit Republic.
 *
 * Los valores salen tal cual del design system del Figma
 * (FitRepublicDesignSystem_ac34f8): no se inventó ninguno ni se "ajustó a ojo".
 * Si algo hay que cambiar, se cambia acá y no en las hojas de más abajo.
 */

:root {
  /* --- Marca -------------------------------------------------------------
     El token se llama "magenta" en el Figma pero el valor es rojo. Se
     conserva el nombre original para que el CSS y el archivo de diseño se
     puedan leer en paralelo sin traducir nombres. */
  --republic-black: #000000;
  --republic-magenta: #DD0707;
  --magenta-deep: #B00505;
  --republic-white: #F2F2F2;
  --republic-silver: #CCCCCC;

  /* --- Superficies: negro puro para la página, grises para lo que se eleva */
  --black-soft: #0A0A0A;
  --concrete-grey: #1A1A1A;
  --concrete-raised: #242424;
  --steel: #3A3A3A;
  --ash: #8A8A8A;

  --surface-page: var(--republic-black);
  --surface-card: var(--concrete-grey);
  --surface-raised: var(--concrete-raised);
  --elev-0: var(--republic-black);
  --elev-1: var(--concrete-grey);
  --elev-2: var(--concrete-raised);

  /* --- Semánticos */
  --signal-green: #2ECC71;
  --signal-amber: #F39C12;
  --signal-red: #E74C3C;
  --signal-red-deep: #C0392B;
  --success: var(--signal-green);
  --warning: var(--signal-amber);
  --error: var(--signal-red);
  --error-hover: var(--signal-red-deep);

  /* --- Roles */
  --accent: var(--republic-magenta);
  --accent-hover: var(--magenta-deep);
  /* Hover de los botones rojos: el mismo rojo, más encendido. Oscurecerlo (lo que
     hacía --accent-hover) sobre fondo negro lo apagaba y se veía sucio; el oscuro
     queda para el instante de apretar. */
  --accent-luz: #F51414;
  --text-body: var(--republic-white);
  --text-secondary: var(--ash);
  --text-on-magenta: #FFFFFF;
  --border-default: var(--steel);

  /* --- Tipografía.
     Phonk es la display de la marca (títulos en caja alta); Rock Salt hace de
     firma manuscrita ("18 de julio", "Republic", "Movimiento"); Inter es el
     texto corrido. */
  --font-display: 'Phonk', 'Arial Black', sans-serif;
  --font-hero: var(--font-display);
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-script: 'Rock Salt', cursive;
  --font-graffiti: var(--font-script);
  --font-mono: ui-monospace, monospace;

  /* Escala móvil. Los tamaños de escritorio se redefinen más abajo: el Figma
     los declara como dos valores por token, no como un clamp(). */
  --text-display-xl: 40px;
  --text-display-lg: 32px;
  --text-display-md: 24px;
  --text-heading: 20px;
  --text-body-lg: 16px;
  --text-body-md: 16px;
  --text-body-sm: 14px;
  --text-caption: 12px;
  --text-label: 11px;

  --lh-display-xl: 1.05;
  --lh-display-lg: 1.1;
  --lh-display-md: 1.15;
  --lh-heading: 1.2;
  --lh-body: 1.5;
  --lh-body-sm: 1.45;
  --lh-caption: 1.4;

  --ls-display: 0.02em;
  --ls-button: 0.06em;
  --ls-label: 0.08em;

  /* --- Espaciado, radios y layout */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --radius-0: 0;
  --radius-card: 8px;
  --radius-check: 4px;
  --radius-pill: 999px;

  --container: 1280px;
  --section-y: var(--section-y-mobile);
  --section-y-mobile: 64px;
  --section-y-desktop: 96px;
  /* El piso es 24 y no 16. Con 16, en un teléfono de 390 px el `4vw` no llega nunca a
     despegarse del mínimo —da 15,6—, así que **todas** las secciones quedaban con el
     margen más apretado posible y el texto casi tocando el borde. 24 es el primer
     escalón del sistema que se nota sin comerse ancho de lectura: la columna pasa de 358
     a 342 px, que no cambia dónde corta ninguna línea.

     El tope de 48 y el 4vw del medio no se tocan: en tablet y escritorio el margen ya
     estaba bien. */
  --gutter: clamp(24px, 4vw, 48px);
  --header-h: 72px;

  /* Doble anillo: uno negro que separa del elemento y otro magenta visible
     sobre cualquier superficie de la paleta. */
  --focus-ring: 0 0 0 2px var(--republic-black), 0 0 0 4px var(--republic-magenta);

  /* --- Movimiento --------------------------------------------------------
     Una sola escala de duraciones y curvas para todo el sitio, para que nada se
     mueva a un ritmo distinto del resto.
     La curva de salida arranca rápido y frena largo: es la que da la sensación
     de suavidad en desplazamientos grandes (carruseles). Las respuestas al
     puntero usan la corta, que tiene que sentirse inmediata. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-suave: cubic-bezier(0.33, 0, 0.2, 1);

  --dur-rapida: 220ms;
  --dur-media: 340ms;
  /* La larga es la del carrusel. Un paso recorre el ancho entero de la pantalla:
     por debajo del segundo el cambio se lee como un corte y no como un
     desplazamiento. */
  --dur-larga: 1000ms;
}

@media (min-width: 768px) {
  :root {
    --text-display-xl: 64px;
    --text-display-lg: 48px;
    --text-display-md: 32px;
    --text-heading: 24px;
    --text-body-lg: 18px;
    --section-y: var(--section-y-desktop);
  }
}