/* =============================================================
   tokens.css — Fire Witch EPK
   Implementación del design system "editorial / scorched" de
   Claude Design (claude.ai/design handoff).

   Estructura:
   1) Tokens crudos de marca (--ink-*, --bone-*, --ember-*, etc.)
      tal como los entregó el design system.
   2) Aliases --pk-* que consume css/styles.css (mapeo semántico).

   Si la marca evoluciona, se reescriben los valores acá: styles.css
   nunca usa literales de color/tipografía/espaciado.
   ============================================================= */

:root {
  /* ===========================================================
     1) TOKENS DE MARCA  (Fire Witch design system)
     =========================================================== */

  /* ---- INK — warm charcoals, the base darkness ---- */
  --ink-1000: #050403;
  --ink-900:  #0B0907;
  --ink-850:  #121009;
  --ink-800:  #18140F;
  --ink-700:  #221C15;
  --ink-600:  #2E261D;
  --ink-500:  #463B2E;

  /* ---- BONE — editorial paper + ash neutrals ---- */
  --bone-100: #ECE4D4;
  --bone-200: #DED3BD;
  --bone-300: #C9BCA1;
  --ash-400:  #A99C84;
  --ash-500:  #877B66;
  --ash-600:  #635747;

  /* ---- EMBER — the fire spectrum ---- */
  --coal-700:  #6E1F08;
  --coal-600:  #8F2A0C;
  --ember-600: #C1400F;
  --ember-500: #E2521A;   /* PRIMARY fire accent */
  --ember-400: #F26C26;
  --spark-300: #F59A3C;
  --spark-200: #F8C06A;

  /* ---- SIGNAL ---- */
  --signal-pos:  #7E8A3C;
  --signal-warn: #D6892A;
  --signal-neg:  #B23120;

  /* ---- gradients ---- */
  --grad-fire:       linear-gradient(135deg, var(--coal-600) 0%, var(--ember-500) 48%, var(--spark-300) 100%);
  --grad-ember-text: linear-gradient(100deg, var(--ember-600) 0%, var(--ember-400) 55%, var(--spark-300) 100%);
  --grad-scorch:     radial-gradient(120% 90% at 50% 120%, rgba(226,82,26,0.30) 0%, rgba(143,42,12,0.16) 28%, rgba(11,9,7,0) 62%);
  --grad-ember-glow: radial-gradient(60% 60% at 50% 50%, rgba(242,108,38,0.45) 0%, rgba(226,82,26,0) 70%);
  /* scorch lateral del hero (foto) + scrim para badges sobre foto */
  --grad-hero-scorch: linear-gradient(90deg, var(--ink-1000) 0%, rgba(5,4,3,0.2) 26%, rgba(5,4,3,0) 55%),
                      linear-gradient(0deg, rgba(5,4,3,0.85) 0%, rgba(110,31,8,0.18) 22%, rgba(5,4,3,0) 50%);
  --scrim: rgba(5, 4, 3, 0.6);

  /* ---- shadows — hard, low, ink-based ---- */
  --shadow-card:       0 2px 0 rgba(5,4,3,0.55), 0 14px 34px -18px rgba(5,4,3,0.8);
  --shadow-hard:       4px 4px 0 var(--ink-1000);
  --shadow-hard-ember: 5px 5px 0 var(--ember-600);

  /* ---- ember glow — active / playing states ---- */
  --glow-ember:      0 0 0 1px rgba(226,82,26,0.5), 0 0 24px -4px rgba(242,108,38,0.55);
  --glow-ember-soft: 0 0 40px -8px rgba(226,82,26,0.45);
  --text-glow-ember: 0 0 18px rgba(242,108,38,0.45);
  --ring-ember:      0 0 0 2px var(--ink-900), 0 0 0 4px var(--ember-500);
  --ring-paper:      0 0 0 2px var(--bone-100), 0 0 0 4px var(--ember-500);

  /* ---- film grain (subtle, on dark surfaces) ---- */
  --grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");

  /* ---- image grades (filtros de fotografía) ---- */
  --img-mono:  grayscale(1) contrast(1.12) brightness(0.86);
  --img-ember: grayscale(0.35) contrast(1.12) sepia(0.28) hue-rotate(-16deg) saturate(1.35) brightness(0.86);
  --img-hover: grayscale(0.2) contrast(1.1) sepia(0.3) hue-rotate(-16deg) saturate(1.4) brightness(0.95);

  /* ---- motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-mono:  cubic-bezier(0.83, 0, 0.17, 1);
  --ease-flame: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-ritual: 720ms;

  /* ---- families (cargadas en index.html vía Google Fonts) ---- */
  --font-display: 'Bodoni Moda', 'Times New Roman', serif;
  --font-poster:  'Archivo Black', 'Archivo', sans-serif;
  --font-body:    'Archivo', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  /* ===========================================================
     2) ALIASES --pk-*  (los consume css/styles.css)
     =========================================================== */

  /* ---- Color ---- */
  --pk-color-bg:            var(--ink-1000);
  --pk-color-bg-alt:        var(--ink-900);
  --pk-color-surface:       var(--ink-800);
  --pk-color-card:          var(--ink-700);
  --pk-color-border:        var(--ink-600);
  --pk-color-border-strong: var(--ink-500);
  --pk-color-fg:            var(--bone-100);
  --pk-color-fg-muted:      var(--ash-400);
  --pk-color-fg-meta:       var(--ash-500);
  --pk-color-accent:        var(--ember-500);
  --pk-color-accent-fg:     var(--ink-1000);
  --pk-color-accent-hover:  var(--ember-400);
  --pk-color-accent-strong: var(--ember-600);
  --pk-color-focus:         var(--ember-500);
  --pk-color-overlay:       rgba(5, 4, 3, 0.94);
  --pk-color-header-bg:     rgba(8, 7, 6, 0.86);
  --pk-color-success:       var(--signal-pos);
  --pk-color-error:         var(--signal-neg);

  /* paper (secciones editoriales claras) */
  --pk-color-paper:         var(--bone-100);
  --pk-color-paper-aged:    var(--bone-200);
  --pk-color-paper-fg:      var(--ink-900);
  --pk-color-paper-fg-muted: var(--ash-600);
  --pk-color-paper-border:  rgba(11, 9, 7, 0.18);

  /* ---- Tipografía ---- */
  --pk-font-display: var(--font-display);
  --pk-font-body:    var(--font-body);
  --pk-font-mono:    var(--font-mono);

  --pk-fs-100: 11px;
  --pk-fs-200: 13px;
  --pk-fs-300: 16px;
  --pk-fs-400: 19px;
  --pk-fs-500: 23px;
  --pk-fs-600: clamp(30px, 3.4vw, 46px);
  --pk-fs-700: clamp(34px, 4vw, 56px);
  --pk-fs-hero: clamp(72px, 12vw, 184px);
  --pk-fs-booking: clamp(48px, 8vw, 132px);

  --pk-lh-tight: 1.04;
  --pk-lh-base:  1.68;

  --pk-fw-regular: 400;
  --pk-fw-medium:  500;
  --pk-fw-bold:    700;
  --pk-fw-black:   900;

  --pk-tracking-wide:   0.16em;
  --pk-tracking-widest: 0.32em;

  /* ---- Espaciado (8px base) ---- */
  --pk-space-3xs: 4px;
  --pk-space-2xs: 8px;
  --pk-space-xs:  12px;
  --pk-space-sm:  16px;
  --pk-space-md:  24px;
  --pk-space-lg:  32px;
  --pk-space-xl:  48px;
  --pk-space-2xl: 96px;
  --pk-space-3xl: 128px;

  /* ---- Layout ---- */
  --pk-maxw:        1280px;
  --pk-maxw-narrow: 62ch;
  --pk-gutter:      clamp(24px, 5vw, 56px);

  /* ---- Bordes / radios (marca SHARP) ---- */
  --pk-radius-sm:   2px;
  --pk-radius-md:   3px;
  --pk-radius-lg:   4px;
  --pk-radius-pill: 999px;
  --pk-border-width: 1px;
  --pk-border-rule:  1.5px;

  /* ---- Sombras / efectos ---- */
  --pk-shadow-sm: var(--shadow-card);
  --pk-shadow-md: var(--shadow-card);
  --pk-shadow-lg: 0 26px 60px -24px rgba(5,4,3,0.85);
  --pk-shadow-hard: var(--shadow-hard-ember);

  --pk-blur:        14px;
  --pk-transition:  var(--dur-base) var(--ease-out);
  --pk-ring:        var(--ring-ember);
  --pk-ring-offset: 2px;
}