/* Hallmark · macrostructure: Marquee Hero · nav: N5 Floating pill · footer: Ft5 Statement
 * genre: atmospheric · theme: custom (tuned) — Brasa NOA
 * paper-band: dark (L 14%) · display-style: display-condensed (Bebas Neue, roman) · accent-hue: warm (amber 72°)
 * source: design.md (SIN-35 · Brand Analyst) — implemented 1:1
 */

:root {
  /* === Brasa NOA — Paleta Principal (OKLCH) === */

  /* Fondos */
  --color-paper:        oklch(14% 0.015 40);   /* Negro parrilla — fondo principal */
  --color-paper-2:      oklch(20% 0.020 38);   /* Carbón oscuro — secciones alternas */
  --color-paper-3:      oklch(26% 0.025 42);   /* Ceniza oscura — cards/hover */

  /* Acento principal — oro brasa */
  --color-accent:       oklch(76% 0.18  72);   /* Dorado vivo — CTAs, highlights */
  --color-accent-dim:   oklch(65% 0.14  68);   /* Dorado apagado — hover states */
  --color-accent-glow:  oklch(80% 0.20  78);   /* Dorado brillante — ember glow */

  /* Acento secundario — brasa/ember */
  --color-ember:        oklch(52% 0.20  32);   /* Rojo brasa — cortes, accents */
  --color-ember-dim:    oklch(42% 0.16  30);   /* Rojo oscuro — hover ember */

  /* Texto */
  --color-ink:          oklch(96% 0.005 60);   /* Blanco cálido — texto principal */
  --color-ink-muted:    oklch(72% 0.020 50);   /* Gris cálido — texto secundario */
  --color-ink-faint:    oklch(50% 0.015 45);   /* Gris oscuro — placeholder/disabled */

  /* Madera */
  --color-wood:         oklch(58% 0.09  62);   /* Madera tabla de corte */
  --color-wood-light:   oklch(72% 0.08  65);   /* Madera clara — highlights */

  /* Superficie/overlay */
  --color-surface:      oklch(18% 0.018 38 / 0.85); /* Card con transparencia */
  --color-overlay:      oklch(10% 0.010 35 / 0.70); /* Hero overlay */

  /* Estados */
  --color-focus:        oklch(76% 0.18  72);
  --color-error:        oklch(60% 0.22  20);
  --color-success:      oklch(65% 0.15  140);

  /* === Tipografía === */
  --font-display: 'Bebas Neue', 'Anton', sans-serif;
  --font-body:    'Lato', 'Inter', system-ui, sans-serif;
  --font-accent:  'Playfair Display', 'Merriweather', serif;

  /* Escala tipográfica (clamp) */
  --text-xs:   clamp(0.75rem, 1.5vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 2vw, 1rem);
  --text-base: clamp(1rem, 2.5vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 3vw, 1.375rem);
  --text-xl:   clamp(1.375rem, 4vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 5vw, 2.5rem);
  --text-3xl:  clamp(2.5rem, 7vw, 4rem);
  --text-hero: clamp(4rem, 13vw, 9rem);

  /* === Espaciado (4-pt scale) === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout */
  --maxw: 1280px;
  --gutter: 1.5rem;

  /* === Radios === */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-pill: 999px;

  /* === Sombras === */
  --shadow-glow:  0 0 24px oklch(76% 0.18 72 / 0.25);
  --shadow-ember: 0 0 40px oklch(52% 0.20 32 / 0.20);
  --shadow-card:  0 4px 24px oklch(10% 0.01 35 / 0.60);
  --shadow-deep:  0 8px 48px oklch(8% 0.01 35 / 0.80);

  /* === Bordes === */
  --border-subtle: oklch(30% 0.02 42 / 0.6);
  --border-accent: oklch(76% 0.18 72 / 0.4);

  /* === Motion === */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Derived surfaces & glows (alpha variants of the palette) === */
  --color-paper-deep:    oklch(11% 0.012 38);          /* promo/footer — más oscuro que paper */
  --color-nav-bg:        oklch(20% 0.020 38 / 0.7);    /* nav floating pill */
  --color-nav-bg-scroll: oklch(16% 0.018 38 / 0.85);  /* nav al scrollear */
  --color-scrim:         oklch(8% 0.01 35 / 0.6);      /* drawer scrim */
  --color-ink-line:      oklch(96% 0.005 60 / 0.5);    /* borde claro sutil (ghost btn) */
  --color-accent-line:   oklch(76% 0.18 72 / 0.5);     /* borde dorado (scroll indicator) */

  /* Glows / shadows extra */
  --shadow-glow-strong:  0 6px 28px oklch(76% 0.18 72 / 0.4);
  --glow-pulse-lo:       0 0 16px oklch(76% 0.18 72 / 0.3);
  --glow-pulse-hi:       0 0 32px oklch(76% 0.18 72 / 0.6);
  --text-shadow-hero:    0 4px 40px oklch(8% 0.01 35 / 0.7);
  --text-shadow-gal:     0 2px 12px oklch(8% 0.01 35 / 0.7);

  /* Hero overlay gradients */
  --hero-overlay: radial-gradient(120% 90% at 50% 30%, oklch(10% 0.01 35 / 0.35), oklch(10% 0.01 35 / 0.78)),
                  linear-gradient(to top, var(--color-paper) 2%, oklch(10% 0.01 35 / 0.2) 55%, oklch(10% 0.01 35 / 0.55));

  /* Promo ambient glow */
  --promo-glow: radial-gradient(60% 80% at 80% 50%, oklch(52% 0.20 32 / 0.18), transparent 70%),
                radial-gradient(50% 60% at 10% 20%, oklch(76% 0.18 72 / 0.1), transparent 70%);

  /* Gallery caption gradient */
  --gal-caption-grad: linear-gradient(to top, oklch(8% 0.01 35 / 0.85), transparent);
}