/**
 * Horizon Theme — "Light Editorial" base skin
 *
 * A warm, light, magazine-style variant. Complete token set (fully replaces the
 * base under the 'hp-design-system' handle). Values tuned by a WCAG-contrast +
 * dark↔light-parity audit: the gold family is deepened so it clears AA both as
 * small accent TEXT (eyebrows/prices/links) and as a fill carrying cream
 * on-accent labels; hover/active DEEPEN (on cream, lighter = lower contrast);
 * borders + shadows are strengthened so cards lift off the cream; and the
 * skin-aware overlay/chrome tokens flip light. Reuses Cormorant + Inter.
 */

:root {
  /* ── Surfaces — warm rag-paper ── */
  --hp-bg:           #f8f5ee;
  --hp-bg-surface:   #f3efe7;
  --hp-bg-raised:    #ece4d4;
  --hp-bg-overlay:   rgba(248, 245, 238, 0.92);

  /* ── Accent — deep antique gold (AA as text on cream AND as a fill) ── */
  --hp-gold:         #826124;
  --hp-gold-light:   #6e5320; /* hover — DARKER on a light base (hover = deeper) */
  --hp-gold-dark:    #5a4419; /* active */
  --hp-gold-muted:   rgba(130, 97, 36, 0.14);

  /* ── Text — warm ink ── */
  --hp-text:         #1d1812;
  /* Muted text is DARK-on-light here (~6.85:1 on the cream bg — comfortably AA).
     Deliberately NOT lightened with the dark-skin muted bump: on a light base,
     lighter muted text would REDUCE contrast. Left as-is. */
  --hp-text-muted:   #5c5446;
  --hp-text-disabled:#b0a796;

  /* ── Borders — deep-gold hairline (a light alpha vanishes on cream) ── */
  --hp-border:       rgba(124, 93, 39, 0.30);
  --hp-border-strong:rgba(124, 93, 39, 0.60);

  /* ── Functional ── */
  --hp-locked-overlay: rgba(20, 16, 10, 0.55); /* scrim over a photo — stays dark */
  --hp-success:      #2c734a;
  --hp-success-muted:rgba(44, 115, 74, 0.14);
  --hp-error:        #9e4434;
  --hp-error-muted:  rgba(158, 68, 52, 0.12);

  /* ── Text subtlety (≥4.5:1 on --hp-bg-surface #f3efe7, ~4.7:1 measured) ── */
  --hp-text-subtle:  #635d53;

  /* ── Typography — editorial serif display + sans body (both already loaded) ── */
  --hp-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --hp-font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --hp-text-xs:   0.75rem;
  --hp-text-sm:   0.875rem;
  --hp-text-base: 1rem;
  --hp-text-lg:   1.125rem;
  --hp-text-xl:   1.25rem;
  --hp-text-2xl:  1.5rem;
  --hp-text-3xl:  2rem;
  --hp-text-4xl:  2.75rem;
  --hp-text-5xl:  3.75rem;
  --hp-text-hero: clamp(3rem, 7vw, 5.5rem);

  /* ── Spacing ── */
  --hp-sp-px: 1px;
  --hp-sp-1:  0.25rem;
  --hp-sp-2:  0.5rem;
  --hp-sp-3:  0.75rem;
  --hp-sp-4:  1rem;
  --hp-sp-5:  1.25rem;
  --hp-sp-6:  1.5rem;
  --hp-sp-7:  1.75rem;
  --hp-sp-8:  2rem;
  --hp-sp-10: 2.5rem;
  --hp-sp-12: 3rem;
  --hp-sp-16: 4rem;
  --hp-sp-20: 5rem;
  --hp-sp-24: 6rem;
  --hp-sp-32: 8rem;

  /* ── Radii ── */
  --hp-r-sm:   4px;
  --hp-r-md:   8px;
  --hp-r-lg:   16px;
  --hp-r-xl:   24px;
  --hp-r-full: 9999px;

  /* ── Shadows — multi-layer so cards lift off cream (a single thin shadow
        is invisible on light) ── */
  --hp-shadow-card:   0 1px 2px rgba(60,45,20,0.10), 0 4px 12px rgba(60,45,20,0.08), 0 0 0 1px rgba(124,93,39,0.12);
  --hp-shadow-raised: 0 12px 28px rgba(60,45,20,0.16), 0 4px 10px rgba(60,45,20,0.10), 0 0 0 1px rgba(124,93,39,0.16);
  --hp-shadow-gold:       0 6px 24px rgba(95,70,25,0.18); /* warm directional drop, not a glow */
  --hp-shadow-photo-glow: 0 0 60px rgba(95,70,25,0.14);

  /* ── Overlays & on-accent — flipped light ── */
  --hp-on-accent:          #fbf9f3;
  --hp-hero-overlay:       linear-gradient(to bottom, rgba(248,245,238,0.10) 0%, rgba(248,245,238,0.55) 55%, rgba(248,245,238,0.86) 82%, var(--hp-bg) 100%);
  --hp-card-veil:          linear-gradient(to top, rgba(243,239,231,0.97) 0%, rgba(243,239,231,0.85) 35%, transparent 100%);
  --hp-header-scrolled-bg: rgba(248, 245, 238, 0.92);

  /* ── Skin-aware chrome ── */
  --hp-media-well:         #14110c;                          /* dark video/reel backdrop (stays dark on every skin) */
  --hp-age-gate-img-filter:brightness(0.62) saturate(0.85);  /* soft light photo backdrop behind the gate */
  --hp-nav-photo-shadow:   0 1px 6px rgba(248,245,238,0.7);  /* light halo so DARK nav text reads over a photo */

  /* ── Utility ── */
  --hp-portrait-glow-bleed: -12px;
  --hp-prose-max:            36rem;

  /* ── Layout ── */
  --hp-content-max:  1280px;
  --hp-content-pad:  clamp(16px, 4vw, 24px);
  --hp-header-h:     72px;

  /* ── Motion ── */
  --hp-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hp-dur:  0.25s;
}