/**
 * PURIVOM — DESIGN TOKENS
 * Centralized custom properties. Every future component/section must
 * consume these variables rather than introducing new raw values.
 */

:root {

  /* ---------------------------------------------------------------------
     COLOR — Core palette
     --------------------------------------------------------------------- */
  --pv-color-obsidian:      #0A0A0A; /* primary background */
  --pv-color-deep-black:    #111111; /* secondary background */
  --pv-color-surface:       #161616; /* raised surface / cards */
  --pv-color-border:        #1F1F1F; /* hairline borders on dark surfaces */

  --pv-color-gold:          #C5A059; /* champagne gold — accent only */
  --pv-color-gold-light:    #E0C78C; /* light gold — highlights, hover */
  --pv-color-gold-contrast: #05070a; /* text placed on top of solid gold */

  --pv-color-white:         #FFFFFF;
  --pv-color-warm-white:    #FBF9F5;
  --pv-color-soft-gray:     #888888;

  /* Subtle water / glass translucency — layer over obsidian/deep-black */
  --pv-color-water-100: rgba(197, 160, 89, 0.06);
  --pv-color-water-200: rgba(197, 160, 89, 0.10);
  --pv-color-glass-100: rgba(255, 255, 255, 0.04);
  --pv-color-glass-200: rgba(255, 255, 255, 0.08);
  --pv-color-glass-border: rgba(255, 255, 255, 0.10);

  /* ---------------------------------------------------------------------
     COLOR — Semantic roles
     Map raw palette to roles so components never reference raw hex.
     --------------------------------------------------------------------- */
  --pv-bg-page:        var(--pv-color-obsidian);
  --pv-bg-alt:         var(--pv-color-deep-black);
  --pv-bg-surface:      var(--pv-color-surface);
  --pv-bg-inverse:      var(--pv-color-warm-white);

  --pv-text-primary:    var(--pv-color-warm-white);
  --pv-text-secondary:  var(--pv-color-soft-gray);
  --pv-text-inverse:    var(--pv-color-obsidian);
  --pv-text-accent:     var(--pv-color-gold-light);

  --pv-border-default:  var(--pv-color-border);
  --pv-border-accent:   var(--pv-color-gold);

  --pv-accent:          var(--pv-color-gold);
  --pv-accent-hover:    var(--pv-color-gold-light);

  --pv-focus-ring:      var(--pv-color-gold-light);

  /* ---------------------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------------------- */
  --pv-font-display: "Cormorant Garamond", "Cinzel", Georgia, "Times New Roman", serif;
  --pv-font-body:    "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pv-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --pv-text-h1:       clamp(2.75rem, 2rem + 3.2vw, 5.5rem);
  --pv-text-h2:       clamp(2.1rem, 1.6rem + 2vw, 3.5rem);
  --pv-text-h3:       clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
  --pv-text-h4:       clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --pv-text-body:     clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --pv-text-small:    clamp(0.875rem, 0.83rem + 0.15vw, 0.9375rem);
  --pv-text-label:    0.8125rem;
  --pv-text-button:   0.9375rem;
  --pv-text-nav:      0.9375rem;
  --pv-text-caption:  0.8125rem;

  --pv-leading-tight:  1.1;
  --pv-leading-snug:   1.3;
  --pv-leading-normal: 1.6;
  --pv-leading-relaxed:1.75;

  --pv-tracking-tight: -0.02em;
  --pv-tracking-normal: 0;
  --pv-tracking-wide:  0.04em;
  --pv-tracking-wider: 0.12em;

  --pv-weight-regular: 400;
  --pv-weight-medium:  500;
  --pv-weight-semibold:600;
  --pv-weight-bold:    700;

  /* ---------------------------------------------------------------------
     SPACING SCALE
     --------------------------------------------------------------------- */
  --pv-space-xs:  0.5rem;   /*  8px */
  --pv-space-sm:  0.75rem;  /* 12px */
  --pv-space-md:  1.25rem;  /* 20px */
  --pv-space-lg:  2rem;     /* 32px */
  --pv-space-xl:  3.25rem;  /* 52px */
  --pv-space-2xl: 5.25rem;  /* 84px */
  --pv-space-3xl: 8.5rem;   /* 136px */
  --pv-space-4xl: 13rem;    /* 208px */

  /* ---------------------------------------------------------------------
     CONTAINERS
     --------------------------------------------------------------------- */
  --pv-container-editorial: 780px;
  --pv-container-standard:  1240px;
  --pv-container-wide:      1440px;
  --pv-container-gutter:    clamp(1.25rem, 4vw, 3rem);

  /* ---------------------------------------------------------------------
     RADIUS / BORDERS / SHADOW
     --------------------------------------------------------------------- */
  --pv-radius-sm: 2px;
  --pv-radius-md: 4px;
  --pv-radius-lg: 8px;
  --pv-radius-pill: 999px;

  --pv-border-width: 1px;

  --pv-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --pv-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --pv-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
  --pv-shadow-gold-glow: 0 0 0 1px rgba(197, 160, 89, 0.35), 0 8px 32px rgba(197, 160, 89, 0.12);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --pv-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --pv-ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --pv-ease-out:      cubic-bezier(0, 0, 0.2, 1);

  --pv-duration-fast:   150ms;
  --pv-duration-base:   300ms;
  --pv-duration-slow:   600ms;
  --pv-duration-reveal: 900ms;

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --pv-header-height: 84px;
  --pv-header-height-scrolled: 64px;
  --pv-z-header: 100;
  --pv-z-overlay: 200;
  --pv-z-modal: 300;
  --pv-z-toast: 400;
}

/* Reduced motion: neutralize durations globally, components should also
   check the media query directly for anything transform/scroll driven. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --pv-duration-fast: 0ms;
    --pv-duration-base: 0ms;
    --pv-duration-slow: 0ms;
    --pv-duration-reveal: 0ms;
  }
}