/* =====================================================================
   RipTogether — Design Tokens
   Fuente única de verdad para color, tipo, radios, sombras y motion.
   Todos los componentes consumen estas variables; nunca hex sueltos.
   ===================================================================== */

:root {
  /* ---------- Superficies (blanco cálido, neutro muy claro) ---------- */
  --bg:            #FBF9F4;   /* página */
  --bg-tint:       #F5F2EA;   /* bandas / secciones alternas */
  --surface:       #FFFFFF;   /* tarjetas */
  --surface-2:     #F7F5EF;   /* inputs, tracks, filas */
  --surface-3:     #EFECE3;
  --line:          #ECE7DC;   /* bordes suaves */
  --line-strong:   #DCD5C6;

  /* ---------- Tinta ---------- */
  --ink:           #131833;   /* títulos y números */
  --ink-2:         #474E6E;   /* cuerpo */
  --ink-3:         #8389A3;   /* secundario / captions */
  --ink-4:         #B5B9CB;   /* deshabilitado */

  /* ---------- Azul eléctrico — ACCIÓN PRIMARIA ---------- */
  --blue-50:       #EEF4FF;
  --blue-100:      #DCE8FF;
  --blue-200:      #B7CEFF;
  --blue-400:      #4D8BFF;
  --blue-500:      #1F6BFF;   /* core */
  --blue-600:      #1557EA;
  --blue-700:      #0F42C2;
  --navy-800:      #10237A;   /* contorno del logo */
  --navy-900:      #0A1547;   /* escenarios cinemáticos */
  --navy-950:      #060C2C;

  /* ---------- Amarillo dorado — RECOMPENSA ---------- */
  --gold-50:       #FFF8E1;
  --gold-100:      #FFEDB3;
  --gold-300:      #FFDB5C;
  --gold-400:      #FFCD2E;
  --gold-500:      #FFB80F;   /* core */
  --gold-600:      #F29A00;
  --gold-700:      #C27200;
  --gold-ink:      #5A3300;   /* texto sobre dorado */

  /* ---------- Verde brillante — ÉXITO ---------- */
  --green-50:      #E8FBEF;
  --green-100:     #C8F5D7;
  --green-500:     #1FCB5C;
  --green-600:     #12A84A;
  --green-700:     #0B7F37;

  /* ---------- Violeta — ÉPICO ---------- */
  --violet-50:     #F3EEFF;
  --violet-100:    #E5DAFF;
  --violet-500:    #8B5CF6;
  --violet-600:    #7340EA;
  --violet-700:    #5A2BC4;

  /* ---------- Coral — PELIGRO / URGENCIA (usar muy poco) ---------- */
  --coral-50:      #FFEFEC;
  --coral-500:     #FF5A4A;
  --coral-600:     #E9402F;

  /* ---------- Mundos (tinte de arte, NO de UI) ---------- */
  --world-pokemon-a:  #FFB547;
  --world-pokemon-b:  #FF7A3D;
  --world-onepiece-a: #36C2E8;
  --world-onepiece-b: #E8453C;
  --world-sports-a:   #4D7CFF;
  --world-sports-b:   #1B2A6B;
  --world-more-a:     #A57BFF;
  --world-more-b:     #4B2A9E;

  /* ---------- Rareza ---------- */
  --rar-common:    #9AA0B8;
  --rar-uncommon:  var(--green-500);
  --rar-rare:      var(--blue-500);
  --rar-epic:      var(--violet-500);
  --rar-legendary: var(--gold-500);

  /* ---------- Tipografía ---------- */
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;  /* títulos, redondeada y pesada */
  --font-body:    "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-num:     "Nunito", system-ui, sans-serif;            /* números: 800–900 + tabular */

  --fs-hero:   64px;  --lh-hero:  1.02;
  --fs-h1:     44px;  --lh-h1:    1.06;
  --fs-h2:     32px;  --lh-h2:    1.12;
  --fs-h3:     22px;  --lh-h3:    1.2;
  --fs-h4:     18px;  --lh-h4:    1.25;
  --fs-body:   16px;  --lh-body:  1.5;
  --fs-sm:     14px;
  --fs-xs:     12px;
  --fs-num-xl: 56px;
  --fs-num-l:  36px;
  --fs-num-m:  24px;

  /* ---------- Espaciado (base 4) ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* ---------- Layout ---------- */
  --container: 1240px;
  --gutter: 32px;
  --header-h: 76px;

  /* ---------- Radios (suaves, redondeados) ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;

  /* ---------- Sombras premium (cálidas, en capas) ---------- */
  --sh-1: 0 1px 2px rgba(19, 24, 51, .06), 0 1px 1px rgba(19, 24, 51, .04);
  --sh-2: 0 2px 4px rgba(19, 24, 51, .05), 0 8px 20px -6px rgba(19, 24, 51, .10);
  --sh-3: 0 4px 8px rgba(19, 24, 51, .05), 0 18px 40px -12px rgba(19, 24, 51, .18);
  --sh-4: 0 10px 20px rgba(19, 24, 51, .06), 0 36px 80px -20px rgba(19, 24, 51, .28);
  --sh-blue: 0 14px 34px -10px rgba(31, 107, 255, .55);
  --sh-gold: 0 14px 34px -10px rgba(242, 154, 0, .55);
  --sh-inset: inset 0 2px 3px rgba(19, 24, 51, .08);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
  --t-slow: 480ms;
}