/*
 * OCÉANO CASINOS — Design Tokens
 * Dirección estética: "Papel y esfera".
 *
 * El sitio vive sobre papel hueso. El isotipo es lo único saturado de toda
 * la página: azul, rojo, naranja y amarillo aparecen ahí y en ningún otro
 * lado a tamaño grande. Todo lo demás es tinta azul oscura, un oro apagado
 * y aire. Esa es la sobriedad: no bajarle el color al logo, sino quitárselo
 * a todo lo que lo rodea, para que la esfera funcione como una joya.
 *
 * El azul profundo entra dos veces —la franja de juego responsable y el
 * pie— y en ningún otro lugar. Aparecer poco es lo que le da peso.
 *
 * Importar antes de cualquier otro CSS.
 */

:root {

  /* ─── PAPEL ─────────────────────────────────────────────── */
  --oc-paper:      #F5F3EE;   /* fondo base, hueso cálido */
  --oc-paper-warm: #EDE9E0;   /* franjas alternas */
  --oc-card:       #FFFFFF;   /* tarjetas */

  /* ─── TINTA ─────────────────────────────────────────────── */
  --oc-ink:        #131834;   /* texto principal y titulares */
  --oc-ink-soft:   #4B5170;   /* texto secundario — 6,8:1 sobre papel */
  --oc-ink-faint:  #7C8199;   /* rótulos micro sobre papel */
  --oc-line:       rgba(19, 24, 52, 0.13);
  --oc-line-soft:  rgba(19, 24, 52, 0.07);

  /* ─── AZUL PROFUNDO · las dos franjas oscuras ───────────── */
  --oc-navy:       #171C40;
  --oc-navy-deep:  #0D1130;
  --oc-navy-line:  rgba(245, 243, 238, 0.14);
  --oc-on-navy:    #F2F0EA;
  --oc-on-navy-2:  #A9AEC8;   /* secundario sobre azul — 6,2:1 */

  /* ─── ORO · el único acento ─────────────────────────────── */
  --oc-gold:       #C49A3F;   /* relleno de botones */
  --oc-gold-hi:    #D4AB50;   /* hover */
  --oc-gold-ink:   #7F5C11;   /* oro que lleva texto — 5,1:1 sobre papel cálido */
  --oc-gold-soft:  rgba(196, 154, 63, 0.12);
  --oc-gold-line:  rgba(196, 154, 63, 0.42);

  /* ─── COLORES DEL ISOTIPO · solo filetes y viñetas ──────── */
  --oc-iso-navy:   #1E2158;
  --oc-iso-red:    #A81B26;
  --oc-iso-ember:  #D9531D;
  --oc-iso-sun:    #EFB93A;
  --oc-arc:        linear-gradient(96deg, var(--oc-iso-navy) 0%, var(--oc-iso-red) 42%, var(--oc-iso-ember) 70%, var(--oc-iso-sun) 100%);

  /* ─── TIPOGRAFÍA ────────────────────────────────────────── */
  /* Fraunces con WONK y SOFT en cero: el contraste fino-grueso da la
     elegancia, y apagar los ejes decorativos le quita lo caprichoso. */
  --font-display:  'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:     'Instrument Sans', 'Segoe UI', sans-serif;

  /* Nada por debajo de 14 px. */
  --text-xs:    0.875rem;
  --text-sm:    0.9375rem;
  --text-base:  1rem;
  --text-md:    1.0625rem;
  --text-lg:    1.25rem;
  --text-xl:    1.5rem;
  --text-2xl:   1.9375rem;
  --text-3xl:   2.5rem;
  --text-4xl:   3.125rem;
  --text-5xl:   4rem;
  --text-6xl:   5.25rem;

  --leading-tight:  1.08;
  --leading-snug:   1.28;
  --leading-normal: 1.68;

  --tracking-tight: -0.022em;
  --tracking-flat:  -0.008em;
  --tracking-wide:  0.16em;

  /* ─── ESPACIADO ─────────────────────────────────────────── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;
  --space-12: 8.5rem;

  --section-py: clamp(5rem, 10vw, 9.5rem);

  /* ─── LAYOUT ────────────────────────────────────────────── */
  --container:        1180px;
  --container-narrow: 720px;
  --container-px:     clamp(1.25rem, 5vw, 3rem);

  /* ─── RADIOS · discretos, la esfera ya redondea ─────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ─── SOMBRAS · casi imperceptibles ─────────────────────── */
  --shadow-card: 0 1px 2px rgba(19, 24, 52, 0.04), 0 12px 32px rgba(19, 24, 52, 0.06);
  --shadow-lift: 0 2px 4px rgba(19, 24, 52, 0.05), 0 22px 48px rgba(19, 24, 52, 0.10);

  /* ─── MOTION ────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur:      300ms;
  --dur-slow: 620ms;
}