/* ============================================================
   LODGEPOLE CAPITAL — Design Token System
   Single source of truth for color, type, space, motion, layout.
   All theme CSS, template PHP, and JS MUST reference these tokens.
   No raw values anywhere else.
   ============================================================ */

:root {

  /* ──────────────────────────────────────────────────────────
     1. COLOR — RAW PALETTE
     Brand Identity Guidelines V2.0. Do not consume these
     directly in components — consume the semantic tokens below.
     ────────────────────────────────────────────────────────── */

  --lpc-color-obsidian:       #1B2621;
  --lpc-color-bronze:         #A68966;
  --lpc-color-slate:          #3A3B3C;
  --lpc-color-alabaster:      #F4F1ED;

  --lpc-color-forest:         #2B3E35;
  --lpc-color-gold:           #C4A882;
  --lpc-color-linen:          #E8E3DB;
  --lpc-color-oak:            #6B6358;
  --lpc-color-parchment:      #D4C5A9;

  --lpc-color-hairline:       #D8D3CC;
  --lpc-color-hairline-dark:  #2A3531;
  --lpc-color-lift-dark:      #1E2E28;
  --lpc-color-night:          #0F1612;

  --lpc-color-white:          #FFFFFF;
  --lpc-color-black:          #000000;

  --lpc-color-error:          #C0392B;
  --lpc-color-success:        #27AE60;

  /* Alpha helpers, derived from raw palette */
  --lpc-color-bronze-08:      rgba(166, 137, 102, 0.08);
  --lpc-color-bronze-10:      rgba(166, 137, 102, 0.10);
  --lpc-color-bronze-15:      rgba(166, 137, 102, 0.15);
  --lpc-color-bronze-16:      rgba(166, 137, 102, 0.16);
  --lpc-color-bronze-18:      rgba(166, 137, 102, 0.18);
  --lpc-color-bronze-20:      rgba(166, 137, 102, 0.20);
  --lpc-color-bronze-35:      rgba(166, 137, 102, 0.35);
  --lpc-color-bronze-40:      rgba(166, 137, 102, 0.40);
  --lpc-color-bronze-55:      rgba(166, 137, 102, 0.55);

  --lpc-color-alabaster-12:   rgba(244, 241, 237, 0.12);
  --lpc-color-alabaster-16:   rgba(244, 241, 237, 0.16);
  --lpc-color-alabaster-18:   rgba(244, 241, 237, 0.18);
  --lpc-color-alabaster-45:   rgba(244, 241, 237, 0.45);
  --lpc-color-alabaster-50:   rgba(244, 241, 237, 0.50);
  --lpc-color-alabaster-55:   rgba(244, 241, 237, 0.55);
  --lpc-color-alabaster-65:   rgba(244, 241, 237, 0.65);
  --lpc-color-alabaster-70:   rgba(244, 241, 237, 0.70);
  --lpc-color-alabaster-75:   rgba(244, 241, 237, 0.75);
  --lpc-color-alabaster-78:   rgba(244, 241, 237, 0.78);
  --lpc-color-alabaster-82:   rgba(244, 241, 237, 0.82);

  --lpc-color-obsidian-28:    rgba(15, 22, 18, 0.28);
  --lpc-color-obsidian-45:    rgba(15, 22, 18, 0.45);
  --lpc-color-obsidian-78:    rgba(15, 22, 18, 0.78);
  --lpc-color-obsidian-92:    rgba(15, 22, 18, 0.92);

  /* ──────────────────────────────────────────────────────────
     2. COLOR — SEMANTIC TOKENS
     Components consume these. Re-skinning the theme means
     reassigning these tokens, not editing components.
     ────────────────────────────────────────────────────────── */

  /* Surfaces */
  --lpc-surface-base:           var(--lpc-color-alabaster);
  --lpc-surface-raised:         var(--lpc-color-white);
  --lpc-surface-linen:          var(--lpc-color-linen);
  --lpc-surface-dark:           var(--lpc-color-obsidian);
  --lpc-surface-dark-lift:      var(--lpc-color-lift-dark);
  --lpc-surface-forest:         var(--lpc-color-forest);
  --lpc-surface-night:          var(--lpc-color-night);
  --lpc-surface-nav-scrolled:   var(--lpc-color-obsidian-92);

  /* Text on light backgrounds */
  --lpc-text-primary:           var(--lpc-color-obsidian);
  --lpc-text-body:              var(--lpc-color-slate);
  --lpc-text-muted:             var(--lpc-color-oak);
  --lpc-text-meta:              var(--lpc-color-oak);

  /* Text on dark backgrounds */
  --lpc-text-on-dark-primary:   var(--lpc-color-alabaster);
  --lpc-text-on-dark-body:      var(--lpc-color-alabaster-78);
  --lpc-text-on-dark-muted:     var(--lpc-color-alabaster-65);
  --lpc-text-on-dark-meta:      var(--lpc-color-alabaster-50);
  --lpc-text-on-dark-faint:     var(--lpc-color-alabaster-45);

  /* Accent text — accessibility split
     Functional text (eyebrows, labels, captions, links, meta) on LIGHT
     backgrounds must use OAK for WCAG AA contrast.
     BRONZE is reserved for text on DARK backgrounds (where it passes contrast)
     and for non-text decorative elements regardless of background.
  */
  --lpc-text-accent-on-light:   var(--lpc-color-oak);
  --lpc-text-accent-on-dark:    var(--lpc-color-bronze);

  /* Decorative accent — borders, hairlines, icon strokes, etc. */
  --lpc-decor-accent:           var(--lpc-color-bronze);
  --lpc-decor-accent-soft:      var(--lpc-color-bronze-55);
  --lpc-decor-accent-hover:     var(--lpc-color-gold);

  /* Borders & hairlines */
  --lpc-border-hairline:        var(--lpc-color-hairline);
  --lpc-border-hairline-dark:   var(--lpc-color-hairline-dark);
  --lpc-border-on-dark:         var(--lpc-color-alabaster-16);
  --lpc-border-input:           var(--lpc-color-hairline);
  --lpc-border-input-on-dark:   var(--lpc-color-bronze-35);
  --lpc-border-focus:           var(--lpc-color-bronze);

  /* Buttons — primary */
  --lpc-btn-primary-bg:         var(--lpc-color-obsidian);
  --lpc-btn-primary-bg-hover:   var(--lpc-color-forest);
  --lpc-btn-primary-text:       var(--lpc-color-alabaster);

  /* Buttons — secondary (on light) */
  --lpc-btn-secondary-bg:       transparent;
  --lpc-btn-secondary-bg-hover: var(--lpc-color-bronze-10);
  --lpc-btn-secondary-text:     var(--lpc-color-obsidian);
  --lpc-btn-secondary-border:   var(--lpc-color-bronze);

  /* Buttons — on-dark */
  --lpc-btn-on-dark-bg:         transparent;
  --lpc-btn-on-dark-bg-hover:   var(--lpc-color-bronze-16);
  --lpc-btn-on-dark-text:       var(--lpc-color-alabaster);
  --lpc-btn-on-dark-border:     var(--lpc-color-bronze);

  /* Buttons — bronze emphasis */
  --lpc-btn-bronze-bg:          var(--lpc-color-bronze);
  --lpc-btn-bronze-bg-hover:    var(--lpc-color-gold);
  --lpc-btn-bronze-text:        var(--lpc-color-obsidian);

  /* Form */
  --lpc-input-bg:               var(--lpc-color-white);
  --lpc-input-bg-on-dark:       var(--lpc-color-lift-dark);
  --lpc-input-text:             var(--lpc-color-obsidian);
  --lpc-input-text-on-dark:     var(--lpc-color-alabaster);
  --lpc-input-focus-ring:       var(--lpc-color-bronze-15);
  --lpc-input-focus-ring-on-dark: var(--lpc-color-bronze-20);
  --lpc-input-label:            var(--lpc-color-oak);
  --lpc-input-label-on-dark:    var(--lpc-color-alabaster-55);
  --lpc-input-error:            var(--lpc-color-error);

  /* Cards */
  --lpc-card-bg:                var(--lpc-color-white);
  --lpc-card-bg-dark:           var(--lpc-color-lift-dark);
  --lpc-card-border:            var(--lpc-color-hairline);
  --lpc-card-border-dark:       var(--lpc-color-bronze-20);
  --lpc-card-border-hover:      var(--lpc-color-bronze);

  /* Chips (filter pills) */
  --lpc-chip-text:              var(--lpc-color-slate);
  --lpc-chip-text-active:       var(--lpc-color-alabaster);
  --lpc-chip-border:            var(--lpc-color-hairline);
  --lpc-chip-bg-active:         var(--lpc-color-obsidian);
  --lpc-chip-on-dark-text:      var(--lpc-color-alabaster-75);
  --lpc-chip-on-dark-text-active: var(--lpc-color-obsidian);
  --lpc-chip-on-dark-border:    var(--lpc-color-alabaster-18);
  --lpc-chip-on-dark-bg-active: var(--lpc-color-bronze);

  /* Focus ring — accessibility (all interactive elements) */
  --lpc-focus-ring:             var(--lpc-color-bronze);
  --lpc-focus-ring-shadow:      0 0 0 3px var(--lpc-color-bronze-20);
  --lpc-focus-ring-offset:      2px;

  /* State */
  --lpc-state-error:            var(--lpc-color-error);
  --lpc-state-success:          var(--lpc-color-success);


  /* ──────────────────────────────────────────────────────────
     3. TYPOGRAPHY
     Three pairings selectable via ACF Options. Default = Editorial.
     Per-pairing stacks are reassigned to --lpc-font-{display,sub,body}
     by the theme based on the selected option.
     ────────────────────────────────────────────────────────── */

  /* Per-pairing stacks (raw) */
  --lpc-font-editorial-display:    'Cormorant Garamond', 'Chronicle Display', Georgia, serif;
  --lpc-font-editorial-sub:        'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --lpc-font-editorial-body:       'EB Garamond', Georgia, serif;

  --lpc-font-architectural-display: 'Bodoni Moda', 'Didot', Georgia, serif;
  --lpc-font-architectural-sub:     'Inter Tight', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --lpc-font-architectural-body:    'Lora', Georgia, serif;

  --lpc-font-heritage-display:     'Playfair Display', 'Times New Roman', serif;
  --lpc-font-heritage-sub:         'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --lpc-font-heritage-body:        'EB Garamond', Georgia, serif;

  /* Active stacks — Editorial is the default; overridden by body class
     .lpc-type--architectural or .lpc-type--heritage. */
  --lpc-font-display:           var(--lpc-font-editorial-display);
  --lpc-font-sub:               var(--lpc-font-editorial-sub);
  --lpc-font-body:              var(--lpc-font-editorial-body);

  /* Font sizes — fluid where possible */
  --lpc-font-size-meta:         10px;
  --lpc-font-size-eyebrow:      11px;
  --lpc-font-size-caption:      10px;
  --lpc-font-size-label:        10px;
  --lpc-font-size-btn:          11.5px;
  --lpc-font-size-nav:          12px;
  --lpc-font-size-sub:          13px;
  --lpc-font-size-index:        13px;
  --lpc-font-size-card-body:    15px;
  --lpc-font-size-input:        16px;
  --lpc-font-size-kvp:          16px;
  --lpc-font-size-body:         17px;
  --lpc-font-size-body-lg:      18px;
  --lpc-font-size-body-xl:      19px;
  --lpc-font-size-pullquote:    clamp(20px, 2.2vw, 28px);
  --lpc-font-size-h3:           clamp(18px, 1.8vw, 22px);
  --lpc-font-size-h2:           clamp(26px, 3vw, 40px);
  --lpc-font-size-h1:           clamp(36px, 5vw, 64px);
  /* Display scale — three tokens, no exceptions. */
  --lpc-font-size-display-lg:   clamp(34px, 4.4vw, 60px);   /* home hero only */
  --lpc-font-size-display-md:   clamp(32px, 4.2vw, 60px);   /* archive + page heroes */
  --lpc-font-size-display-sm:   clamp(28px, 3.6vw, 48px);   /* single CPT heroes */

  /* Font weights */
  --lpc-font-weight-light:      300;
  --lpc-font-weight-regular:    400;
  --lpc-font-weight-medium:     500;
  --lpc-font-weight-semibold:   600;
  --lpc-font-weight-bold:       700;

  /* Letter-spacing scale */
  --lpc-tracking-tight:         0.04em;
  --lpc-tracking-normal:        0.13em;
  --lpc-tracking-wide:          0.18em;
  --lpc-tracking-wider:         0.22em;
  --lpc-tracking-widest:        0.28em;
  --lpc-tracking-extra:         0.30em;
  --lpc-tracking-ultra:         0.32em;
  --lpc-tracking-max:           0.34em;

  /* Line heights */
  --lpc-leading-display:        1.04;
  --lpc-leading-tight:          1.1;
  --lpc-leading-snug:           1.25;
  --lpc-leading-normal:         1.45;
  --lpc-leading-relaxed:        1.55;
  --lpc-leading-loose:          1.65;


  /* ──────────────────────────────────────────────────────────
     4. SPACING
     6-step scale + density tokens.
     ────────────────────────────────────────────────────────── */

  --lpc-space-0:                0;
  --lpc-space-1:                4px;
  --lpc-space-2:                6px;
  --lpc-space-3:                8px;
  --lpc-space-4:                10px;
  --lpc-space-5:                12px;
  --lpc-space-6:                14px;
  --lpc-space-7:                16px;
  --lpc-space-8:                18px;
  --lpc-space-9:                20px;
  --lpc-space-10:               22px;
  --lpc-space-11:               24px;
  --lpc-space-12:               28px;
  --lpc-space-13:               32px;
  --lpc-space-14:               36px;
  --lpc-space-15:               40px;
  --lpc-space-16:               48px;
  --lpc-space-17:               56px;
  --lpc-space-18:               64px;
  --lpc-space-19:               72px;
  --lpc-space-20:               80px;
  --lpc-space-21:               96px;
  --lpc-space-22:               112px;
  --lpc-space-23:               128px;
  --lpc-space-24:               144px;

  /* Component-specific spacing */
  --lpc-stack-gap:              var(--lpc-space-7);
  --lpc-section-y:              clamp(72px, 9vw, 144px);
  --lpc-section-y-tight:        clamp(48px, 6vw, 96px);
  --lpc-section-y-wide:         clamp(96px, 12vw, 192px);
  --lpc-rail-x:                 clamp(24px, 5vw, 80px);
  --lpc-card-padding:           var(--lpc-space-13);
  --lpc-card-padding-tight:     var(--lpc-space-11);
  --lpc-btn-padding-y:          var(--lpc-space-6);
  --lpc-btn-padding-x:          var(--lpc-space-14);


  /* ──────────────────────────────────────────────────────────
     5. LAYOUT
     ────────────────────────────────────────────────────────── */

  --lpc-container-max:          1480px;
  --lpc-container-narrow:       960px;
  --lpc-container-reading:      720px;

  --lpc-nav-height:             76px;
  --lpc-nav-height-mobile:      64px;

  --lpc-grid-gap:               var(--lpc-space-11);
  --lpc-grid-gap-wide:          var(--lpc-space-17);

  --lpc-z-base:                 1;
  --lpc-z-raised:               10;
  --lpc-z-sticky:               40;
  --lpc-z-nav:                  50;
  --lpc-z-overlay:              80;
  --lpc-z-modal:                100;
  --lpc-z-toast:                120;


  /* ──────────────────────────────────────────────────────────
     6. RADIUS & BORDERS
     ────────────────────────────────────────────────────────── */

  --lpc-radius-sharp:           2px;     /* default brand radius */
  --lpc-radius-soft:            4px;
  --lpc-radius-pill:            999px;

  --lpc-border-width:           1px;
  --lpc-border-width-strong:    1.5px;
  --lpc-border-width-heavy:     2px;


  /* ──────────────────────────────────────────────────────────
     7. SHADOWS
     ────────────────────────────────────────────────────────── */

  --lpc-shadow-card:            0 4px 12px var(--lpc-color-obsidian-28);
  --lpc-shadow-card-hover:      0 8px 24px var(--lpc-color-obsidian-45);
  --lpc-shadow-back-to-top:     0 12px 28px var(--lpc-color-obsidian-28);
  --lpc-shadow-overlay:         0 24px 48px var(--lpc-color-obsidian-45);
  --lpc-shadow-focus:           var(--lpc-focus-ring-shadow);


  /* ──────────────────────────────────────────────────────────
     8. MOTION
     ────────────────────────────────────────────────────────── */

  --lpc-ease-standard:          cubic-bezier(0.2, 0.7, 0.2, 1);
  --lpc-ease-in:                cubic-bezier(0.4, 0, 1, 1);
  --lpc-ease-out:               cubic-bezier(0, 0, 0.2, 1);
  --lpc-ease-in-out:            cubic-bezier(0.4, 0, 0.2, 1);

  --lpc-duration-fast:          180ms;
  --lpc-duration-base:          220ms;
  --lpc-duration-snap:          280ms;
  --lpc-duration-medium:        320ms;
  --lpc-duration-slow:          480ms;
  --lpc-duration-reveal:        900ms;
  --lpc-duration-cinematic:     1100ms;

  /* Reused transition compositions */
  --lpc-transition-link:        color var(--lpc-duration-fast) var(--lpc-ease-standard),
                                border-color var(--lpc-duration-fast) var(--lpc-ease-standard);
  --lpc-transition-btn:         background var(--lpc-duration-base) var(--lpc-ease-standard),
                                color var(--lpc-duration-base) var(--lpc-ease-standard),
                                border-color var(--lpc-duration-base) var(--lpc-ease-standard),
                                transform var(--lpc-duration-base) var(--lpc-ease-standard);
  --lpc-transition-card:        border-color var(--lpc-duration-snap) var(--lpc-ease-standard),
                                transform var(--lpc-duration-snap) var(--lpc-ease-standard),
                                box-shadow var(--lpc-duration-snap) var(--lpc-ease-standard);
  --lpc-transition-reveal:      opacity var(--lpc-duration-reveal) var(--lpc-ease-standard),
                                transform var(--lpc-duration-reveal) var(--lpc-ease-standard);
  --lpc-transition-fade:        opacity var(--lpc-duration-medium) var(--lpc-ease-standard);

  --lpc-reveal-offset:          20px;


  /* ──────────────────────────────────────────────────────────
     9. ACCESSIBILITY
     ────────────────────────────────────────────────────────── */

  --lpc-touch-min:              44px;     /* WCAG 2.5.5 / Apple HIG */
  --lpc-input-min-height:       48px;     /* Material baseline */
}


/* ──────────────────────────────────────────────────────────
   BREAKPOINTS (reference — used in media queries throughout the theme)
   ────────────────────────────────────────────────────────── */
/*
  --lpc-bp-xs:   480px;
  --lpc-bp-sm:   768px;
  --lpc-bp-md:   880px;   (mobile nav cutover)
  --lpc-bp-lg:   1024px;
  --lpc-bp-xl:   1280px;
*/


/* ──────────────────────────────────────────────────────────
   TYPOGRAPHY PAIRING SWITCHERS
   Applied by adding one of these classes to <body>.
   Default (no class) = Editorial.
   ────────────────────────────────────────────────────────── */

.lpc-type--editorial {
  --lpc-font-display: var(--lpc-font-editorial-display);
  --lpc-font-sub:     var(--lpc-font-editorial-sub);
  --lpc-font-body:    var(--lpc-font-editorial-body);
}

.lpc-type--architectural {
  --lpc-font-display: var(--lpc-font-architectural-display);
  --lpc-font-sub:     var(--lpc-font-architectural-sub);
  --lpc-font-body:    var(--lpc-font-architectural-body);
}

.lpc-type--heritage {
  --lpc-font-display: var(--lpc-font-heritage-display);
  --lpc-font-sub:     var(--lpc-font-heritage-sub);
  --lpc-font-body:    var(--lpc-font-heritage-body);
}


/* ──────────────────────────────────────────────────────────
   PREFERS-REDUCED-MOTION
   Zero out animation durations & reveal offsets globally.
   Components that read these tokens automatically respect the
   user preference without bespoke media queries.
   ────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  :root {
    --lpc-duration-fast:        1ms;
    --lpc-duration-base:        1ms;
    --lpc-duration-snap:        1ms;
    --lpc-duration-medium:      1ms;
    --lpc-duration-slow:        1ms;
    --lpc-duration-reveal:      1ms;
    --lpc-duration-cinematic:   1ms;
    --lpc-reveal-offset:        0px;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}