/* ════════════════════════════════════════════════════════════════════════
 * PI Base v2.0 — Design Tokens
 * Single source of truth for colors, fonts, spacing, transitions.
 * Every other CSS file references these — no hex codes hardcoded elsewhere.
 * ════════════════════════════════════════════════════════════════════════ */

:root {

  /* ───── COLORS ───── */

  /* Navy spectrum */
  --pi-navy:        #00204c;
  --pi-navy-deep:   #00112e;
  --pi-navy-dark:   #001530;
  --pi-navy-mid:    #002a63;

  /* Gold spectrum */
  --pi-gold:        #e8a020;
  --pi-gold-bright: #f4d160;
  --pi-gold-deep:   #b8860b;
  --pi-gold-light:  #f5b93a;

  /* Gold brushed metallic gradient */
  --pi-gold-gradient: linear-gradient(135deg, var(--pi-gold-bright) 0%, var(--pi-gold-light) 50%, var(--pi-gold-deep) 100%);

  /* Neutrals */
  --pi-white:       #ffffff;
  --pi-cream:       #fafaf7;
  --pi-gray-50:     #f7f7f9;
  --pi-gray-100:    #eaecf0;
  --pi-gray-300:    #d0d5dd;
  --pi-gray-500:    #667085;
  --pi-gray-700:    #344054;
  --pi-gray-900:    #1a2238;

  /* Semantic shortcuts */
  --pi-bg:               var(--pi-white);
  --pi-bg-dark:          var(--pi-navy);
  --pi-text:             var(--pi-gray-900);
  --pi-text-muted:       var(--pi-gray-500);
  --pi-text-light:       rgba(255,255,255,0.88);
  --pi-text-muted-light: rgba(255,255,255,0.6);
  --pi-border:           var(--pi-gray-100);
  --pi-accent:           var(--pi-gold);

  /* ───── TYPOGRAPHY ───── */
  --pi-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --pi-font-sans:  'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pi-font-cond:  'Barlow Condensed', 'Barlow', sans-serif;

  /* Font sizes — preserves your v1.4 scale */
  --pi-text-xs:     12px;
  --pi-text-sm:     14px;
  --pi-text-base:   16px;
  --pi-text-lg:     18px;
  --pi-text-xl:     22px;
  --pi-text-2xl:    28px;
  --pi-text-3xl:    36px;
  --pi-text-4xl:    48px;
  --pi-text-5xl:    64px;
  --pi-text-6xl:    86px;

  /* ───── SPACING ───── */
  --pi-space-1:   4px;
  --pi-space-2:   8px;
  --pi-space-3:   12px;
  --pi-space-4:   16px;
  --pi-space-5:   20px;
  --pi-space-6:   24px;
  --pi-space-8:   32px;
  --pi-space-10:  40px;
  --pi-space-12:  48px;
  --pi-space-16:  64px;
  --pi-space-20:  80px;
  --pi-space-24:  96px;

  /* ───── LAYOUT ───── */
  --pi-content-max:            1500px;
  /* v2.0.81 - ONE prose measure. Before this the theme had four: 760px
     (verdict), 860px (page.php + settlement), 880px (faq/cta) and 900px
     (landing + single-col grid). Change it here, not in a template.

     v2.0.91 - 900px to 1200px, at the client's direction. 900px is the
     textbook measure for an unbroken column of body copy, but these pages
     are not that: they carry card decks, tables and callouts, and at 900px
     inside a 1500px container the practice-area deck could only ever fit two
     columns while the page looked under-filled. 1200px is the widest value
     that still keeps a plain paragraph readable; past roughly 1400px the eye
     loses the start of the next line. Body copy inside this measure now runs
     nearer 120 characters a line, so sections of pure prose want shorter
     paragraphs than they did at 900px. */
  --pi-prose-max:              1200px;
  --pi-content-padding:        clamp(2rem, 3vw, 4rem);
  --pi-content-padding-mobile: 1.5rem;
  /* v2.0.59 — raised alongside the larger logo so the bar keeps its breathing
     room. The logo sits at roughly 61-66% of nav height across the range,
     matching the previous 60%. Every hero and sticky offset derives from this
     token via calc(), so they follow automatically. */
  --pi-nav-height:             clamp(92px, 7vw, 124px);
  --pi-topbar-height:          48px;
  /* v2.0.96 — height of the LATEST UPDATE bar. 0 unless body carries
     .pi-notice-on (set server-side when a notice is configured). Every
     fixed-header offset calc adds this token. */
  --pi-notice-height:          0px;

  /* ───── BORDER RADIUS ───── */
  --pi-radius-sm: 3px;
  --pi-radius-md: 6px;
  --pi-radius-lg: 12px;

  /* ───── LEGACY ALIASES ─────
   * Older PHP templates (blog archive/single, verdicts filter, attorney CPT
   * archive) reference un-prefixed variable names in inline styles. These were
   * never defined, so those elements broke (full-bleed content, white-on-white
   * filter buttons, missing borders). Alias them to the real tokens. */
  --navy:        var(--pi-navy);
  --navy-dark:   var(--pi-navy-dark);
  --navy-deep:   var(--pi-navy-deep, #00112e);
  --gold:        var(--pi-gold);
  --gold-deep:   var(--pi-gold-deep, #b6852b);
  --text-muted:  var(--pi-gray-500);
  --text-dark:   var(--pi-text, #1a1917);
  --gray-50:     var(--pi-gray-50);
  --gray-100:    var(--pi-gray-100);
  --gray-300:    var(--pi-gray-300, #cbd2d9);
  --border:      var(--pi-border, #e8e4dc);
  --max-width:   var(--pi-content-max);
  --radius-md:   var(--pi-radius-md);
  --radius-lg:   var(--pi-radius-lg);

  /* ───── SHADOWS ───── */
  --pi-shadow-sm:   0 1px 3px rgba(0,0,0,0.1);
  --pi-shadow-md:   0 4px 12px rgba(0,0,0,0.1);
  --pi-shadow-lg:   0 12px 32px rgba(0,8,24,0.45);
  --pi-shadow-xl:   0 20px 60px rgba(0,0,0,0.2);
  --pi-shadow-gold: 0 2px 14px rgba(232,160,32,0.35);

  /* ───── TRANSITIONS ───── */
  --pi-trans-fast:  0.15s ease;
  --pi-trans-base:  0.2s ease;
  --pi-trans-slow:  0.3s ease;
  --pi-trans-panel: 0.32s cubic-bezier(0.4, 0, 0.2, 1);  /* mobile menu slider */

  /* ───── Z-INDEX ───── */
  --pi-z-base:     1;
  --pi-z-elevated: 10;
  --pi-z-header:   500;
  --pi-z-nav:      600;
  --pi-z-modal:    900;
  --pi-z-tooltip:  1000;
}