/* ==========================================================================
   VARIABLES.CSS – GLOBAL STYLE TOKEN MAP v7.4.8
   ==========================================================================
   SETUP INSTRUCTIONS: See SETUP-GUIDE.md and NEW-PROJECT-CHECKLIST.md
   Last Updated: 2026-03-11

   Table of Contents / Variable Map:
   1. PALETTE — Raw project colors (fill in for every project)
   2. SEMANTIC ROLES — What each color does
   3. LEGACY ALIASES & ELEMENTOR GLOBALS
   4. Fonts & Buttons & Navigation
   5. Typography (Figma-based with clamp)
   6. Layout & Containers
   7. Form Elements
   8. Spacing & Border Radius (Responsive with clamp)
   9. Shadows
   10. Transitions & Utilities
   11. Fluid / Clamp System
   12. Section Heights & Offsets
   13. Button Padding

   Changelog:
   v7.4.8 - VERSION SYNC: Updated via Design Token Manager
          - Synchronized across all theme files via Token Manager
   v7.4.7 - VERSION SYNC: Updated via Design Token Manager
          - Synchronized across all theme files via Token Manager
   v7.4.6 - VERSION SYNC: Updated via Design Token Manager
          - Synchronized across all theme files via Token Manager
   v7.4.5 - VERSION SYNC: Imported via Design Token Manager
          - Synchronized across all theme files via Token Manager
   v7.4.5 - VERSION SYNC: Updated via Design Token Manager
          - Synchronized across all theme files via Token Manager
   v7.4.4 - VERSION SYNC: Updated via Design Token Manager
          - Synchronized across all theme files via Token Manager
   v7.4.3 - VERSION SYNC: Updated via Design Token Manager
          - Synchronized across all theme files via Token Manager
   v7.4.2 - VERSION SYNC: Updated via Design Token Manager
          - Synchronized across all theme files via Token Manager
   v7.4.1 - VERSION SYNC: Updated via Design Token Manager
          - Synchronized across all theme files via Token Manager
   See CHANGELOG.md for detailed version history and migration notes.

   v7.4.0 (2026-03-11)
   - MAJOR: Replaced flat brand color system with two-tier palette/semantic system
   - Section 1: 7 palette slots (--palette-*) — only these take hardcoded hex values
   - Section 2: Semantic roles (--color-*) — reference var(--palette-*) only
   - Section 3: Legacy aliases & Elementor globals — all auto-synced from palette
   - FEATURE: Added --font-family-nav token (separate nav font slot)
   - FIX: --text-nav-family now references var(--font-family-nav)
   - FIX: --input-bg changed from --brand-quaternary to var(--palette-light-2)
   - FIX: --shadow-focus updated to use rgba(var(--palette-brand-rgb), 0.3)
   - CLEANUP: Removed stale Peak Technologies footer comment

   v7.2.1 (2026-02-05)
   - FEATURE: Added navigation token system (6 tokens)
   - Navigation tokens: --nav-color, --nav-hover-color, --nav-active-color
   - Navigation background tokens: --nav-bg, --nav-bg-hover, --nav-bg-active
   - Updated --text-nav-color to reference var(--nav-color)
   - Navigation colors now controllable via Token Manager
   - Matches button token system architecture

   v7.2.0 (2026-02-03)
   - MAJOR UPDATE: Complete button token system with all variants
   - Added Primary, Secondary, and Tertiary button tokens (27 total)
   - All button color tokens now reference brand colors via var()
   - Updated --color-text-inverse to reference var(--brand-quinary)
   - Updated --color-text-link-hover to reference var(--brand-tertiary)
   - All button tokens: base, text, border, hover, active states
   - Enables full button customization via Design Token Manager

   v7.1.0 (2025-01-16)
   - VERSION SYNC: Updated to match style.css and functions.php v7.1.0
   - No token changes in this version (changes in style.css only)
   - Removed aggressive width overrides for starter theme flexibility

   v7.0.4 (2025-01-16)
   - VERSION SYNC: Updated to match style.css and functions.php v7.0.4
   - No token changes in this version (changes in style.css only)
   - Addresses Elementor's --content-width: 1200px constraint

   v7.0.3 (2025-01-16)
   - VERSION SYNC: Updated to match style.css and functions.php v7.0.3
   - No token changes in this version (changes in style.css only)
   - Addresses padding/margin causing left-side whitespace

   v7.0.2 (2025-01-16)
   - VERSION SYNC: Updated to match style.css and functions.php v7.0.2
   - No token changes in this version (changes in style.css only)
   - Addresses Elementor-generated CSS variable overrides

   v7.0.1 (2025-01-16)
   - BUG FIX: Removed width constraints causing content to be centered
   - Changed --container-widget-max-width from 1200px to 100%
   - Changed --e-container-max-width from 1200px to 100%
   - Content now fills full browser width

   v7.0.0 (2025-01-15)
   - VERSION SYNC: Updated to match style.css and functions.php v7.0.0
   - MAJOR ARCHITECTURE REFACTOR: No token changes in this file
   - variables.css remains unchanged as single source of truth
   - All design tokens preserved - both child theme AND Elementor Custom CSS reference these
   ==========================================================================
*/

:root {
  /* ==========================================================================
     1. PALETTE — Raw project colors
     ⚠️  FILL THESE IN FOR EVERY NEW PROJECT — these are the ONLY values you hardcode.
     Everything else in this file references these tokens via var(--palette-*).
     See NEW-PROJECT-CHECKLIST.md for setup instructions.
     ========================================================================== */

  /* Brand / Identity Colors */
  --palette-brand:      #427CAF;   /* ← YOUR MAIN BRAND COLOR (primary) */
  --palette-accent:     #C13336;   /* ← SECONDARY BRAND / CTA COLOR */
  --palette-highlight:  #B5D0CE;   /* ← TERTIARY / SOFT ACCENT */

  /* Dark Scale — always your darkest colors, regardless of what they are */
  --palette-dark-1:     #2E292A;   /* ← DARKEST: text, nav bar, footer backgrounds */
  --palette-dark-2:     #3E383A;   /* ← MEDIUM DARK: subtext, borders, dividers */

  /* Light Scale — always your lightest colors */
  --palette-light-1:    #f0f4fd;   /* ← LIGHT: section backgrounds, cards */
  --palette-light-2:    #FFFFFF;   /* ← LIGHTEST/WHITE: page background, text on dark */

  /* For rgba() usage (e.g. focus rings) — set RGB equivalent of --palette-brand */
  --palette-brand-rgb:  66, 124, 175; /* ← UPDATE to match --palette-brand as R, G, B */

  /* ==========================================================================
     2. SEMANTIC ROLES — What each color DOES
     ⚠️  DO NOT hardcode hex values here. Only reference var(--palette-*).
         Updating palette values above will cascade everywhere automatically.
     ========================================================================== */

  /* Text */
  --color-text-default:    var(--palette-dark-1);    /* body text, headings */
  --color-text-secondary:  var(--palette-dark-2);    /* subheadings, meta text */
  --color-text-muted:      var(--palette-dark-2);    /* placeholders, captions */
  --color-text-inverse:    var(--palette-light-2);   /* text on dark backgrounds */
  --color-text-link:       var(--palette-brand);     /* hyperlinks */
  --color-text-link-hover: var(--palette-highlight); /* link hover */

  /* Surfaces */
  --color-surface-page:    var(--palette-light-2);   /* main page background */
  --color-surface-alt:     var(--palette-light-1);   /* cards, alt section backgrounds */
  --color-surface-dark:    var(--palette-dark-1);    /* dark sections, nav bar, footer */

  /* Brand */
  --color-brand:           var(--palette-brand);
  --color-accent:          var(--palette-accent);
  --color-highlight:       var(--palette-highlight);

  /* ==========================================================================
     3. LEGACY ALIASES & ELEMENTOR GLOBALS
     Maps old --brand-* names to palette slots for backwards compatibility.
     ⚠️  Token Manager: update plugin UI to use --palette-* fields going forward.
         Keep these aliases so existing templates don't break during transition.
     ========================================================================== */

  /* Legacy brand aliases → palette */
  --brand-primary:    var(--palette-brand);
  --brand-secondary:  var(--palette-accent);
  --brand-tertiary:   var(--palette-highlight);
  --brand-quaternary: var(--palette-dark-1);
  --brand-quinary:    var(--palette-light-1);
  --brand-senary:     var(--palette-light-2);

  /* Elementor global colors (auto-synced from palette — no manual updates needed) */
  --e-global-color-primary:   var(--palette-brand);
  --e-global-color-secondary: var(--palette-accent);
  --e-global-color-text:      var(--palette-dark-1);
  --e-global-color-accent:    var(--palette-highlight);
  --e-global-color-hover:     var(--palette-dark-1);
  --e-global-color-muted:     var(--palette-dark-2);

  /* Legacy derived tokens */
  --primary-color:    var(--palette-brand);
  --secondary-color:  var(--palette-accent);
  --accent-color:     var(--palette-highlight);
  --text-color:       var(--palette-dark-1);
  --background-color: var(--palette-light-2);

  /* Legacy text color variations */
  --color-text-primary:   var(--palette-dark-1);
  --color-text-tertiary:  var(--palette-light-2);   /* white — for text on dark */

  /* ==========================================================================
     4. Fonts & Buttons
     ========================================================================== */
  /* Primary Button */
  --primary-btn: var(--brand-primary);
  --primary-btn-text: var(--brand-quinary);
  --primary-btn-border: var(--brand-primary);
  --primary-btn-hover: var(--brand-secondary);
  --primary-btn-hover-text: var(--brand-quinary);
  --primary-btn-border-hover: var(--brand-quinary);
  --primary-btn-active: var(--brand-quinary);
  --primary-btn-active-hover-text: var(--brand-quinary);
  --primary-btn-active-border-hover: var(--brand-quinary);

  /* Secondary Button */
  --secondary-btn: var(--brand-secondary);
  --secondary-btn-text: var(--brand-quinary);
  --secondary-btn-border: var(--brand-secondary);
  --secondary-btn-hover: var(--brand-secondary);
  --secondary-btn-hover-text: var(--brand-quinary);
  --secondary-btn-border-hover: var(--brand-quinary);
  --secondary-btn-active: var(--brand-quinary);
  --secondary-btn-active-hover-text: var(--brand-quinary);
  --secondary-btn-active-border-hover: var(--brand-quinary);

  /* Tertiary Button */
  --tertiary-btn: var(--brand-tertiary);
  --tertiary-btn-text: var(--brand-quinary);
  --tertiary-btn-border: var(--brand-tertiary);
  --tertiary-btn-hover: var(--brand-secondary);
  --tertiary-btn-hover-text: var(--brand-quinary);
  --tertiary-btn-border-hover: var(--brand-quinary);
  --tertiary-btn-active: var(--brand-quinary);
  --tertiary-btn-active-hover-text: var(--brand-quinary);
  --tertiary-btn-active-border-hover: var(--brand-quinary);

  /* Button Border Tokens */
  --btn-border-width: 2px;
  --btn-border-style: solid;

  /* Navigation Tokens */
  --nav-color: var(--brand-secondary);
  --nav-hover-color: var(--brand-primary);
  --nav-active-color: var(--brand-tertiary);
  --nav-bg: transparent;
  --nav-bg-hover: transparent;
  --nav-bg-active: transparent;

  /* ==========================================================================
     5. Typography (Responsive with Clamp)
     ==========================================================================

     Example Typography Scale (Adjust for your project):
     - H1: 40-72px, Bold 700, 105% line-height
     - H2: 28-36px, Bold 700, 110% line-height
     - H3: 20-24px, Bold 700, 120% line-height
     - Body Large: 18-24px, Regular 400, 140% line-height
     - Body Standard: 14-16px, Regular 400, 140% line-height
     - Body Small: 11-12px, Regular 400, 140% line-height
     - Navigation: 14px, Bold 700, 110% line-height, UPPERCASE
     - Button: 14px, Bold 700, 110% line-height, UPPERCASE

     If you have Figma designs, update these values accordingly.
     See SETUP-GUIDE.md for instructions.
  */

  /* --------------------------------------------------------------------------
     5.1 Font Families - REPLACE WITH YOUR PROJECT FONTS
     --------------------------------------------------------------------------
     Update these after setting up fonts in functions.php
     See SETUP-GUIDE.md for font setup instructions
     */
  --font-family-heading: "Montserrat", serif;
  --font-family-nav:     "Montserrat", serif;   /* ← can differ from heading; update in functions.php too */
  --font-family-body:    "Inter", sans-serif;
  --font-family-alt:     "Barlow Condensed", sans-serif;
  --font-family-mono:    "Courier New", monospace;

  /* Legacy aliases */
  --font-heading: var(--font-family-heading);
  --font-body: var(--font-family-body);
  --font-family-base: var(--font-family-body);

  /* --------------------------------------------------------------------------
     5.2 Font Weights
     -------------------------------------------------------------------------- */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --------------------------------------------------------------------------
     5.3 Line Heights
     -------------------------------------------------------------------------- */
  --line-height-tight: 1.05;      /* 105% - H1 */
  --line-height-snug: 1.1;        /* 110% - H2, Nav, Button */
  --line-height-normal: 1.2;      /* 120% - H3 */
  --line-height-base: 1.4;        /* 140% - Body, P1, P, Small */
  --line-height-relaxed: 1.5;     /* 150% - P2 Links */
  --line-height-loose: 1.7;

  /* Legacy aliases */
  --line-height-sm: var(--line-height-snug);
  --line-height-lg: var(--line-height-relaxed);

  /* --------------------------------------------------------------------------
     5.4 Letter Spacing
     -------------------------------------------------------------------------- */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.08em;

  /* Figma-specific letter spacing */
  --letter-spacing-h1: 0.36px;    /* H1 */
  --letter-spacing-h2: 0.18px;    /* H2 */
  --letter-spacing-h3: 0.12px;    /* H3 */
  --letter-spacing-p1: 0.12px;    /* P1 Large */
  --letter-spacing-p: 0.08px;     /* P Standard */
  --letter-spacing-small: 0.06px; /* Small/Footer */
  --letter-spacing-nav: 0.7px;    /* Navigation */
  --letter-spacing-button: 0.7px; /* Buttons */

  /* Legacy */
  --letter-spacing-sm: 0.5px;

  /* --------------------------------------------------------------------------
     5.5 Heading Sizes (Figma with Responsive Clamp)
     -------------------------------------------------------------------------- */
  /* H1 - 72px @ desktop, scales down to 40px @ mobile */
  --font-size-h1: clamp(2.5rem, 6vw + 1rem, 4.5rem);

  /* H2 - 36px @ desktop, scales down to 28px @ mobile */
  --font-size-h2: clamp(1.75rem, 3vw + 0.5rem, 2.25rem);

  /* H3 - 24px @ desktop, scales down to 20px @ mobile */
  --font-size-h3: clamp(1.25rem, 2vw + 0.5rem, 1.5rem);

  /* H4-H6 - Reasonable defaults */
  --font-size-h4: clamp(1.125rem, 1.5vw + 0.5rem, 1.25rem);
  --font-size-h5: clamp(1rem, 1vw + 0.25rem, 1.125rem);
  --font-size-h6: clamp(0.875rem, 0.5vw + 0.25rem, 1rem);

  /* Hero/Display sizes */
  --font-size-hero: var(--font-size-h1);
  --font-size-display: clamp(3rem, 8vw + 1rem, 5rem);

  /* Legacy heading sizes */
  --font-size-heading-xxl: var(--font-size-display);
  --font-size-heading-xl: var(--font-size-h1);
  --font-size-heading-lg: var(--font-size-h2);
  --font-size-heading-md: var(--font-size-h3);
  --font-size-heading-sm: var(--font-size-h4);
  --font-size-heading-xs: var(--font-size-h5);

  /* --------------------------------------------------------------------------
     5.6 Body Text Sizes (Figma with Responsive Clamp)
     -------------------------------------------------------------------------- */
  /* P1 - Large body text: 24px @ desktop, scales down to 18px @ mobile */
  --font-size-body-lg: clamp(1.125rem, 2vw, 1.5rem);

  /* P - Standard body text: 16px @ desktop, scales down to 14px @ mobile */
  --font-size-body-md: clamp(0.875rem, 1.5vw, 1rem);

  /* Small - Footer text: 12px @ desktop, scales down to 11px @ mobile */
  --font-size-body-sm: clamp(0.6875rem, 1vw, 0.75rem);

  /* Legacy aliases */
  --font-size-base: var(--font-size-body-md);
  --font-size-lg: var(--font-size-body-lg);
  --font-size-sm: var(--font-size-body-sm);
  --font-size-xs: clamp(0.625rem, 0.75vw, 0.6875rem);
  --font-size-xl: clamp(1.25rem, 2vw, 1.5rem);

  /* --------------------------------------------------------------------------
     5.7 Utility Text Sizes
     -------------------------------------------------------------------------- */
  /* Quote: 32px @ desktop */
  --font-size-quote: clamp(1.5rem, 3vw, 2rem);

  /* Navigation: 14px fixed (Figma spec) */
  --font-size-nav: 14px;

  /* Button: 14px fixed (Figma spec) */
  --font-size-button: 14px;

  /* Caption, Label, Overline */
  --font-size-caption: var(--font-size-body-sm);
  --font-size-label: 0.75rem;
  --font-size-overline: 0.6875rem;
  --font-size-callout: clamp(1.125rem, 2vw, 1.25rem);
  --font-size-emphasis: clamp(1rem, 1.5vw, 1.125rem);
  --font-size-ui-sm: 0.875rem;

  /* --------------------------------------------------------------------------
     5.8 Composite Typography Tokens (Figma Specs)
     -------------------------------------------------------------------------- */
  /* H1 Typography */
  --text-h1-size: var(--font-size-h1);
  --text-h1-weight: var(--font-weight-bold);
  --text-h1-line-height: var(--line-height-tight);
  --text-h1-letter-spacing: var(--letter-spacing-h1);
  --text-h1-family: var(--font-family-heading);

  /* H2 Typography */
  --text-h2-size: var(--font-size-h2);
  --text-h2-weight: var(--font-weight-bold);
  --text-h2-line-height: var(--line-height-snug);
  --text-h2-letter-spacing: var(--letter-spacing-h2);
  --text-h2-family: var(--font-family-heading);

  /* H3 Typography (UPPERCASE) */
  --text-h3-size: var(--font-size-h3);
  --text-h3-weight: var(--font-weight-bold);
  --text-h3-line-height: var(--line-height-normal);
  --text-h3-letter-spacing: var(--letter-spacing-h3);
  --text-h3-family: var(--font-family-heading);
  --text-h3-transform: uppercase;

  /* H4-H6 Typography */
  --text-h4-size: var(--font-size-h4);
  --text-h4-weight: var(--font-weight-bold);
  --text-h4-line-height: var(--line-height-normal);
  --text-h4-letter-spacing: var(--letter-spacing-normal);
  --text-h4-family: var(--font-family-heading);

  --text-h5-size: var(--font-size-h5);
  --text-h5-weight: var(--font-weight-bold);
  --text-h5-line-height: var(--line-height-normal);
  --text-h5-letter-spacing: var(--letter-spacing-normal);
  --text-h5-family: var(--font-family-heading);

  --text-h6-size: var(--font-size-h6);
  --text-h6-weight: var(--font-weight-bold);
  --text-h6-line-height: var(--line-height-normal);
  --text-h6-letter-spacing: var(--letter-spacing-normal);
  --text-h6-family: var(--font-family-heading);

  /* Hero/Display Typography */
  --text-hero-size: var(--font-size-hero);
  --text-hero-weight: var(--font-weight-bold);
  --text-hero-line-height: var(--line-height-tight);
  --text-hero-letter-spacing: var(--letter-spacing-h1);
  --text-hero-family: var(--font-family-heading);

  /* P1 - Large Body Typography */
  --text-body-lg-size: var(--font-size-body-lg);
  --text-body-lg-weight: var(--font-weight-regular);
  --text-body-lg-line-height: var(--line-height-base);
  --text-body-lg-letter-spacing: var(--letter-spacing-p1);
  --text-body-lg-family: var(--font-family-body);

  /* P - Standard Body Typography */
  --text-body-size: var(--font-size-body-md);
  --text-body-weight: var(--font-weight-regular);
  --text-body-line-height: var(--line-height-base);
  --text-body-letter-spacing: var(--letter-spacing-p);
  --text-body-family: var(--font-family-body);

  /* Small Body Typography */
  --text-body-sm-size: var(--font-size-body-sm);
  --text-body-sm-weight: var(--font-weight-regular);
  --text-body-sm-line-height: var(--line-height-base);
  --text-body-sm-letter-spacing: var(--letter-spacing-small);
  --text-body-sm-family: var(--font-family-body);

  /* P2 - Link Typography */
  --text-link-size: var(--font-size-body-md);
  --text-link-weight: var(--font-weight-regular);
  --text-link-line-height: var(--line-height-relaxed);
  --text-link-letter-spacing: var(--letter-spacing-p);
  --text-link-family: var(--font-family-body);

  /* Quote Typography */
  --text-quote-size: var(--font-size-quote);
  --text-quote-weight: var(--font-weight-bold);
  --text-quote-line-height: normal;
  --text-quote-letter-spacing: var(--letter-spacing-normal);
  --text-quote-family: var(--font-family-heading);

  /* Navigation Typography */
  --text-nav-size: var(--font-size-nav);
  --text-nav-weight: var(--font-weight-bold);
  --text-nav-line-height: var(--line-height-snug);
  --text-nav-letter-spacing: var(--letter-spacing-nav);
  --text-nav-family: var(--font-family-nav);
  --text-nav-color: var(--nav-color);
  --text-nav-transform: uppercase;

  /* Button Typography */
  --text-button-size: var(--font-size-button);
  --text-button-weight: var(--font-weight-bold);
  --text-button-line-height: var(--line-height-snug);
  --text-button-letter-spacing: var(--letter-spacing-button);
  --text-button-family: var(--font-family-heading);
  --text-button-transform: uppercase;

  /* Label Typography */
  --text-label-size: var(--font-size-label);
  --text-label-weight: var(--font-weight-semibold);
  --text-label-line-height: var(--line-height-base);
  --text-label-letter-spacing: var(--letter-spacing-wide);
  --text-label-family: var(--font-family-body);
  --text-label-transform: uppercase;

  /* Caption Typography */
  --text-caption-size: var(--font-size-caption);
  --text-caption-weight: var(--font-weight-regular);
  --text-caption-line-height: var(--line-height-base);
  --text-caption-letter-spacing: var(--letter-spacing-small);
  --text-caption-family: var(--font-family-body);

  /* --------------------------------------------------------------------------
     5.9 Bundled Type Styles (CSS Shorthand)
     -------------------------------------------------------------------------- */
  --type-hero: var(--text-hero-weight) var(--text-hero-size) / var(--text-hero-line-height) var(--text-hero-family);
  --type-heading-xxl: var(--font-weight-bold) var(--font-size-display) / var(--line-height-tight) var(--font-family-heading);
  --type-heading-xl: var(--text-h1-weight) var(--text-h1-size) / var(--text-h1-line-height) var(--text-h1-family);
  --type-heading-lg: var(--text-h2-weight) var(--text-h2-size) / var(--text-h2-line-height) var(--text-h2-family);
  --type-heading-md: var(--text-h3-weight) var(--text-h3-size) / var(--text-h3-line-height) var(--text-h3-family);
  --type-heading-sm: var(--text-h4-weight) var(--text-h4-size) / var(--text-h4-line-height) var(--text-h4-family);

  --type-body-lg: var(--text-body-lg-weight) var(--text-body-lg-size) / var(--text-body-lg-line-height) var(--text-body-lg-family);
  --type-body-md: var(--text-body-weight) var(--text-body-size) / var(--text-body-line-height) var(--text-body-family);
  --type-body-sm: var(--text-body-sm-weight) var(--text-body-sm-size) / var(--text-body-sm-line-height) var(--text-body-sm-family);

  --type-callout: var(--font-weight-medium) var(--font-size-callout) / var(--line-height-snug) var(--font-family-heading);
  --type-overline: var(--font-weight-semibold) var(--font-size-overline) / var(--line-height-base) var(--font-family-body);
  --type-caption: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-line-height) var(--text-caption-family);
  --type-nav: var(--text-nav-weight) var(--text-nav-size) / var(--text-nav-line-height) var(--text-nav-family);

  /* --------------------------------------------------------------------------
     5.10 Typography Spacing
     -------------------------------------------------------------------------- */
  --space-paragraph: 1rem;
  --space-heading-top: 2rem;
  --space-heading-bottom: 0.75rem;

  /* ==========================================================================
     6. Layout & Containers
     ========================================================================== */
  --e-container-max-width: 100%;
  --e-container-default-padding: 20px;

  --container-widget-width: 100%;
  --container-widget-max-width: 100%;  /* Changed from 1200px to 100% for full-width */
  --container-padding-inline: 20px;
  --container-padding-block: 20px;

  /* Breakpoints */
  --e-breakpoint-laptop: 1024px;
  --e-breakpoint-tablet: 768px;
  --e-breakpoint-mobile: 480px;

  /* ==========================================================================
     7. Form Elements
     ========================================================================== */
  /* Background & Text */
  --input-bg: var(--palette-light-2);
  --input-text: var(--text-color);
  --input-placeholder: var(--e-global-color-muted);

  /* Border Tokens */
  --input-border-color: var(--brand-secondary);
  --input-border-width: 1px;
  --input-border-style: solid;
  --input-border: var(--input-border-width) var(--input-border-style) var(--input-border-color);
  --input-border-full: var(--input-border);
  --input-focus-border: var(--primary-color);
  --input-focus-border-color: var(--primary-color);

  /* Spacing */
  --input-padding-vertical: 0.5rem;
  --input-padding-horizontal: 0.75rem;

  /* Radius */
  --input-radius: var(--radius-sm);

  /* Focus Ring */
  --focus-ring-color: color-mix(in srgb, var(--input-focus-border-color), transparent 70%);
  --focus-ring-width: 2px;

  /* Form Typography */
  --input-font-size: var(--font-size-body-md);
  --input-font-weight: var(--font-weight-regular);
  --input-font-family: var(--font-family-body);
  --input-line-height: var(--line-height-base);

  --label-font-size: var(--text-label-size);
  --label-font-weight: var(--text-label-weight);
  --label-font-family: var(--text-label-family);
  --label-letter-spacing: var(--text-label-letter-spacing);

  /* ==========================================================================
     8. Spacing & Border Radius
     ========================================================================== */
  /* Responsive spacing with clamp() - scales with viewport */
  --spacing-xs: clamp(0.1875rem, 0.5vw, 0.25rem);      /* 3px → 4px */
  --spacing-sm: clamp(0.375rem, 1vw, 0.5rem);          /* 6px → 8px */
  --spacing-md: clamp(0.75rem, 2vw, 1rem);             /* 12px → 16px */
  --spacing-lg: clamp(1.5rem, 3vw, 2rem);              /* 24px → 32px */
  --spacing-xl: clamp(2.25rem, 4vw, 3rem);             /* 36px → 48px */
  --spacing-xxl: clamp(3rem, 5vw, 4rem);               /* 48px → 64px */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ==========================================================================
     9. Shadows
     ========================================================================== */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.15);
  --shadow-hover: 0 6px 12px rgba(0,0,0,0.12);
  --shadow-focus: 0 0 0 3px rgba(var(--palette-brand-rgb), 0.3);
  --shadow-vertical-bar: 4px 0 4px 0 rgba(35, 31, 32, 0.05);

  /* ==========================================================================
     10. Transitions & Utilities
     ========================================================================== */
  --transition-base: all 0.3s ease;
  --transition-fast: all 0.15s ease;
  --transition-slow: all 0.5s ease;
  --e-global-spacing-unit: 20px;
  --border-radius: 8px;
  --box-shadow: 0 4px 8px rgba(0,0,0,0.1);

  /* ==========================================================================
     11. Fluid / Clamp Container System
     ========================================================================== */
  --fluid-side-padding-min: 1.25rem;
  --fluid-side-padding-max: 5rem;

  --section-xxl-padding-min: 9.375rem;
  --section-xxl-padding-max: 10rem;

  --section-xl-padding-min: 6.875rem;
  --section-xl-padding-max: 7.5rem;

  --section-l-padding-min: 5.625rem;
  --section-l-padding-max: 6.25rem;

  --section-m-padding-min: 5rem;
  --section-m-padding-max: 5rem;

  --section-s-padding-min: 3.75rem;
  --section-s-padding-max: 3.75rem;

  --section-xs-padding-min: 2.5rem;
  --section-xs-padding-max: 2.5rem;

  --section-xxs-padding-min: 1.5rem;
  --section-xxs-padding-max: 1.5rem;

  /* ==========================================================================
     12. Section Heights & Offsets
     ========================================================================== */
  --section-hero-height: 100vh;
  --section-offset-header: 80px;

  --section-narrow: 62.5rem;
  --section-narrow-xs: 45rem;

  /* ==========================================================================
     13. Button Padding (Figma Specs)
     ========================================================================== */
  --btn-padding-vertical: 15px;
  --btn-padding-horizontal: 25px;
  --btn-gap: 10px;
}

/* ==========================================================================
   14. Applied Typography Styles
   ========================================================================== */

/* Base Element Styles */
h1 {
  font-size: var(--text-h1-size);
  font-weight: var(--text-h1-weight);
  line-height: var(--text-h1-line-height);
  letter-spacing: var(--text-h1-letter-spacing);
  font-family: var(--text-h1-family);
  color: inherit;
  margin-top: var(--space-heading-top);
  margin-bottom: var(--space-heading-bottom);
}

h2 {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-line-height);
  letter-spacing: var(--text-h2-letter-spacing);
  font-family: var(--text-h2-family);
  color: inherit;
  margin-top: var(--space-heading-top);
  margin-bottom: var(--space-heading-bottom);
}

h3 {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-line-height);
  letter-spacing: var(--text-h3-letter-spacing);
  font-family: var(--text-h3-family);
  text-transform: var(--text-h3-transform);
  color: inherit;
  margin-top: var(--space-heading-top);
  margin-bottom: var(--space-heading-bottom);
}

h4 {
  font-size: var(--text-h4-size);
  font-weight: var(--text-h4-weight);
  line-height: var(--text-h4-line-height);
  letter-spacing: var(--text-h4-letter-spacing);
  font-family: var(--text-h4-family);
  color: inherit;
  margin-top: var(--space-heading-top);
  margin-bottom: var(--space-heading-bottom);
}

h5 {
  font-size: var(--text-h5-size);
  font-weight: var(--text-h5-weight);
  line-height: var(--text-h5-line-height);
  letter-spacing: var(--text-h5-letter-spacing);
  font-family: var(--text-h5-family);
  color: inherit;
  margin-top: var(--space-heading-top);
  margin-bottom: var(--space-heading-bottom);
}

h6 {
  font-size: var(--text-h6-size);
  font-weight: var(--text-h6-weight);
  line-height: var(--text-h6-line-height);
  letter-spacing: var(--text-h6-letter-spacing);
  font-family: var(--text-h6-family);
  color: inherit;
  margin-top: var(--space-heading-top);
  margin-bottom: var(--space-heading-bottom);
}

p {
  font: var(--type-body-md);
  margin-bottom: var(--space-paragraph);
  letter-spacing: var(--text-body-letter-spacing);
}

a {
  color: var(--color-text-link);
  font-weight: var(--text-link-weight);
  text-decoration: underline;
  transition: var(--transition-fast);
}

a:hover {
  color: var(--color-text-link-hover);
}

/* Navigation Styles */
nav a,
.nav-link,
.menu-item a {
  font-size: var(--text-nav-size);
  font-weight: var(--text-nav-weight);
  line-height: var(--text-nav-line-height);
  letter-spacing: var(--text-nav-letter-spacing);
  font-family: var(--text-nav-family);
  color: var(--text-nav-color);
  text-transform: var(--text-nav-transform);
  text-decoration: none;
}

nav a:hover,
.nav-link:hover,
.menu-item a:hover {
  color: var(--brand-primary);
}

/* Utility Classes */
.hero {
  font: var(--type-hero);
  letter-spacing: var(--text-hero-letter-spacing);
}

.text-display {
  font: var(--type-heading-xxl);
}

.lead,
.text-body-lg {
  font: var(--type-body-lg);
  letter-spacing: var(--text-body-lg-letter-spacing);
}

.caption,
.text-caption {
  font: var(--type-caption);
  letter-spacing: var(--text-caption-letter-spacing);
}

.label,
.text-label {
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-letter-spacing);
  text-transform: var(--text-label-transform);
}

.callout {
  font: var(--type-callout);
  color: var(--accent-color);
}

.overline {
  font: var(--type-overline);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

.quote,
blockquote {
  font-size: var(--text-quote-size);
  font-weight: var(--text-quote-weight);
  line-height: var(--text-quote-line-height);
  font-family: var(--text-quote-family);
}

/* ==========================================================================
   END OF VARIABLES.CSS
   ========================================================================== */