/* ===================================================================
  NOIR & BLADE — Design Tokens
  Paleta: carbón cálido + crema roto + dorado apagado.
  =================================================================== */

:root {
  /* --- Color: fondo ------------------------------------------------ */
  --color-bg: #14110f;
  --color-bg-deep: #0a0908;
  --color-panel: #1c1712;
  --color-panel-light: #251f18;
  --color-border: rgba(243, 236, 223, 0.1);
  --color-border-strong: rgba(243, 236, 223, 0.18);

  /* --- Color: texto -------------------------------------------------*/
  --color-cream: #f4ede1;
  --color-cream-dim: rgba(244, 237, 225, 0.68);
  --color-cream-faint: rgba(244, 237, 225, 0.4);
  --color-stone: #a89a86;

  /* --- Color: acento dorado ----------------------------------------*/
  --color-brass: #b6924f;
  --color-brass-light: #dcb872;
  --color-brass-dim: rgba(182, 146, 79, 0.35);
  --color-brass-faint: rgba(182, 146, 79, 0.14);

  /* --- Tipografía -----------------------------------------------------*/
  --font-display: "Bodoni Moda", "Times New Roman", serif;
  --font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --fs-eyebrow: 0.72rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --fs-xl: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);
  --fs-2xl: clamp(2.5rem, 1.6rem + 3.6vw, 4rem);
  --fs-hero: clamp(2.75rem, 1.6rem + 5.2vw, 6rem);

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.55;

  --ls-eyebrow: 0.28em;
  --ls-wide: 0.06em;

  /* --- 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: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 4rem);

  /* --- Bordes / sombras --------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 3px;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.45);

  /* --- Movimiento ------------------------------------------------------*/
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 180ms;
  --duration-base: 340ms;
  --duration-slow: 650ms;

  /* --- Capas ----------------------------------------------------------*/
  --z-header: 100;
  --z-mobile-nav: 110;
  --z-modal: 200;
  --z-lightbox: 210;
}