/* ==========================================================================
   CÓDIGO BUSHIDO — DESIGN TOKENS
   Dirección creativa: "Templo Nocturno"
   Un solo idioma visual para todo el sitio. Nada se define fuera de aquí.
   ========================================================================== */

:root{
  /* ---- Color / Base ------------------------------------------------- */
  --color-bg:              #060404;
  --color-bg-elevated:     #0b0707;
  --color-surface:         #110a0a;
  --color-surface-2:       #180d0d;
  --color-border:          #2a1717;
  --color-border-soft:     #1c1010;
  --color-divider:         #201313;

  /* ---- Color / Marca -------------------------------------------------
     Rojo tomado directamente del círculo del emblema. Único acento de
     color de todo el sitio: cuando aparece, siempre significa algo
     (jerarquía, acción, victoria, alerta editorial). */
  --color-red-900:  #3a0a0a;
  --color-red-800:  #5c0f0f;
  --color-red-700:  #8a1414;
  --color-red-600:  #b71414;
  --color-red-500:  #d31f1f;
  --color-red-400:  #e8302f;
  --color-red-300:  #f15a52;
  --color-red-glow: rgba(199, 30, 30, .45);
  --color-red-glow-soft: rgba(199, 30, 30, .18);

  /* ---- Color / Texto --------------------------------------------------*/
  --color-text-primary:   #f3ece5;
  --color-text-secondary: #c9b9b2;
  --color-text-muted:     #7d6b66;
  --color-text-faint:     #4d403c;
  --color-text-on-red:    #fdf3f0;

  /* ---- Color / Estado ---------------------------------------------- */
  --color-success: #4f9d6e;
  --color-warning: #d3941f;
  --color-danger:  #e8302f;
  --color-info:    #6d8ba8;
  --color-focus:   #e8302f;

  /* ---- Color / Superficies interactivas ------------------------------ */
  --color-hover:    rgba(199, 30, 30, .10);
  --color-active:   rgba(199, 30, 30, .18);
  --color-selection:rgba(199, 30, 30, .30);
  --color-overlay:  rgba(4, 2, 2, .82);
  --color-backdrop: rgba(4, 2, 2, .60);
  --color-disabled: #3a2f2c;
  --color-skeleton: #1a1010;

  /* ---- Tipografía ----------------------------------------------------
     Display  → Cinzel   (imperial, tallada, para titulares grandes)
     Heading  → Oswald   (condensada, técnica, para etiquetas y H2-H4)
     Body     → Inter    (lectura larga, párrafos, formularios)
     Accent/UI→ Space Mono (fechas, marcadores, datos, "scoreboard") */
  --font-display: 'Cinzel', 'Iowan Old Style', Georgia, serif;
  --font-heading: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'Space Mono', 'SFMono-Regular', Consolas, monospace;

  /* ---- Escala tipográfica fluida (clamp) ----------------------------- */
  --fs-hero:     clamp(2.75rem, 5vw + 1.3rem, 6.5rem);
  --fs-display:  clamp(2.2rem, 3.4vw + 1rem, 4.2rem);
  --fs-h1:       clamp(1.9rem, 2.4vw + 1rem, 3.2rem);
  --fs-h2:       clamp(1.5rem, 1.6vw + 0.9rem, 2.35rem);
  --fs-h3:       clamp(1.2rem, 1vw + 0.8rem, 1.6rem);
  --fs-h4:       clamp(1.05rem, .5vw + .85rem, 1.25rem);
  --fs-lead:     clamp(1.05rem, .6vw + .85rem, 1.35rem);
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;
  --fs-small:    .875rem;
  --fs-caption:  .75rem;
  --fs-legal:    .8125rem;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.45;
  --lh-relaxed:1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: .06em;
  --tracking-wider: .14em;
  --tracking-widest: .28em;

  /* ---- Espaciado (escala base 4) ------------------------------------ */
  --space-1:  .25rem;
  --space-2:  .5rem;
  --space-3:  .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: 6rem;
  --space-12: 7.5rem;
  --space-13: 9rem;

  /* ---- Grid / Contenedores ------------------------------------------ */
  --container-max: 1280px;
  --container-narrow: 860px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radios --------------------------------------------------------*/
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---- Bordes ----------------------------------------------------------*/
  --border-hair: 1px solid var(--color-border);
  --border-soft: 1px solid var(--color-border-soft);
  --border-red:  1px solid var(--color-red-600);

  /* ---- Sombras -------------------------------------------------------*/
  --shadow-xs:  0 1px 2px rgba(0,0,0,.4);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.45);
  --shadow-md:  0 8px 24px rgba(0,0,0,.5);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.55);
  --shadow-xl:  0 24px 64px rgba(0,0,0,.6);
  --shadow-glow:0 0 60px var(--color-red-glow-soft);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,.03);

  /* ---- Blur ----------------------------------------------------------*/
  --blur-glass: blur(14px);
  --blur-overlay: blur(6px);
  --blur-hero: blur(40px);

  /* ---- Motion ----------------------------------------------------------
     Ritmo lento y ceremonial. Nada rebota, nada se acelera de golpe. */
  --dur-instant: 100ms;
  --dur-fast:    180ms;
  --dur-medium:  360ms;
  --dur-slow:    620ms;
  --dur-cinematic: 1100ms;

  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --ease-out:      cubic-bezier(.16, 1, .3, 1);
  --ease-in:       cubic-bezier(.7, 0, 1, 1);
  --ease-katana:   cubic-bezier(.22, .61, .18, .98);

  /* ---- Z-index ---------------------------------------------------------*/
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 900;
  --z-toast: 1000;

  /* ---- Iconografía ------------------------------------------------------
     Trazo lineal 1.5px, esquinas rectas (no redondeadas), sin relleno
     salvo estado activo. Coherente con el grabado del emblema. */
  --icon-stroke: 1.5px;
}

@media (prefers-reduced-motion: reduce){
  :root{
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-medium: 0ms;
    --dur-slow: 0ms;
    --dur-cinematic: 0ms;
  }
}