/* ==========================================================================
   EliteBlocc Design Tokens
   File: assets/css/global/eb-tokens.css
   Version: 3.0 — v2 upgrade

   CHANGELOG v3.0
   - PRESERVED: All v1 tokens (colours, spacing, typography, shadows, z-index,
     transitions, motion system) — no breaking changes.
   - ADDED: --eb-header-height-tablet for 768–1023px range.
   - ADDED: Product family colour tokens for hub and filter UI.
   - ADDED: Sector/audience tokens for sector landing pages.
   - ADDED: Resource type tokens for Download Centre card system.
   - ADDED: Component-level layout tokens (card grid, filter rail).
   - ADDED: Form tokens for contact and gating flows.
   - ADDED: Status/badge tokens for product compliance indicators.
   - REMOVED: Nothing — full backwards compatibility with v1 maintained.

   HEADER HEIGHT REFERENCE (measured from navigation.css)
   .eb-header min-height:
     Desktop (≥1024px):   70px + 2px bot-line = 72px
     Tablet  (768–1023px): 68px + 2px bot-line = 70px
     Mobile  (≤767px):    64px + 2px bot-line = 66px
     Scrolled (desktop):   58px + 2px bot-line = 60px
   ========================================================================== */

:root {

  /* ==========================================================================
     COLOUR SYSTEM
     ========================================================================== */

  /* --- Brand Primaries ------------------------------------------------------- */
  --eb-color-black:          #0B0D0F;
  --eb-color-off-black:      #111827;
  --eb-color-surface:        #1a2e25;
  --eb-color-surface-raised: #1e3a2b;
  --eb-color-surface-mid:    #243830;
  --eb-color-white:          #FFFFFF;
  --eb-color-off-white:      #F5F4F2;
  --eb-color-cream:          #f8fafc;
  --eb-color-charcoal:       #111827;

  /* --- Emerald --------------------------------------------------------------- */
  --eb-color-emerald:           #064e3b;
  --eb-color-emerald-secondary: #065f46;
  --eb-color-emerald-light:     #10b981;
  --eb-color-emerald-mid:       #059669;
  --eb-color-emerald-dim:       #047857;
  --eb-color-emerald-deep:      #022c22;
  --eb-color-emerald-muted:     rgba(6, 78, 59, 0.15);
  --eb-color-emerald-glow:      rgba(16, 185, 129, 0.20);
  --eb-color-emerald-subtle:    rgba(6, 78, 59, 0.08);
  --eb-color-emerald-glass:     rgba(255, 255, 255, 0.10);

  /* --- Amber Accent ---------------------------------------------------------- */
  --eb-color-gold:           #f59e0b;
  --eb-color-gold-light:     #fbbf24;
  --eb-color-gold-dim:       #d97706;
  --eb-color-gold-pale:      #b45309;
  --eb-color-gold-deep:      #92400e;
  --eb-color-gold-muted:     rgba(245, 158, 11, 0.15);
  --eb-color-gold-subtle:    rgba(245, 158, 11, 0.08);
  --eb-color-gold-glow:      rgba(245, 158, 11, 0.30);

  /* --- Text ------------------------------------------------------------------ */
  --eb-text-primary:           #FFFFFF;
  --eb-text-secondary:         rgba(255, 255, 255, 0.80);
  --eb-text-muted:             rgba(255, 255, 255, 0.60);
  --eb-text-inverse:           #111827;
  --eb-text-inverse-secondary: #4b5563;
  --eb-text-inverse-muted:     #6b7280;
  --eb-text-accent:            #f59e0b;
  --eb-text-link:              #f59e0b;
  --eb-text-link-hover:        #fbbf24;

  /* --- Surfaces -------------------------------------------------------------- */
  --eb-surface-page:         #064e3b;
  --eb-surface-raised:       rgba(255, 255, 255, 0.10);
  --eb-surface-overlay:      rgba(6, 78, 59, 0.97);
  --eb-surface-glass:        rgba(255, 255, 255, 0.08);
  --eb-surface-glass-border: rgba(255, 255, 255, 0.18);
  --eb-surface-light:        #FFFFFF;
  --eb-surface-light-alt:    #f8fafc;
  --eb-surface-light-raised: #FFFFFF;

  /* --- Borders --------------------------------------------------------------- */
  --eb-border-subtle:       rgba(255, 255, 255, 0.08);
  --eb-border-default:      rgba(255, 255, 255, 0.18);
  --eb-border-strong:       rgba(255, 255, 255, 0.30);
  --eb-border-gold:         rgba(245, 158, 11, 0.40);
  --eb-border-gold-strong:  rgba(245, 158, 11, 0.70);
  --eb-border-emerald:      rgba(16, 185, 129, 0.30);
  --eb-border-light:        rgba(0, 0, 0, 0.06);
  --eb-border-light-strong: rgba(0, 0, 0, 0.12);
  --eb-border-white:        rgba(255, 255, 255, 0.18);
  --eb-border-white-subtle: rgba(255, 255, 255, 0.10);

  /* --- Gradients ------------------------------------------------------------- */
  --eb-gradient-hero:           linear-gradient(135deg, #064e3b 0%, #065f46 50%, #10b981 100%);
  --eb-gradient-emerald:        linear-gradient(135deg, #064e3b 0%, #065f46 100%);
  --eb-gradient-emerald-bright: linear-gradient(135deg, #064e3b 0%, #10b981 100%);
  --eb-gradient-amber:          linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #92400e 100%);
  --eb-gradient-icon:           linear-gradient(135deg, #064e3b 0%, #10b981 100%);
  --eb-gradient-icon-light:     linear-gradient(135deg, #10b981 0%, #059669 100%);
  --eb-gradient-dark-fade:      linear-gradient(180deg, transparent 0%, #064e3b 100%);
  --eb-gradient-radial-gold:    radial-gradient(ellipse at 50% 0%, rgba(245,158,11,0.08) 0%, transparent 65%);
  --eb-gradient-radial-emerald: radial-gradient(ellipse at 0% 100%, rgba(6,78,59,0.35) 0%, transparent 60%);
  --eb-gradient-heading:        linear-gradient(135deg, #FFFFFF 0%, #f59e0b 100%);
  --eb-gradient-gold:           linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --eb-gradient-emerald-icon:   linear-gradient(135deg, #064e3b 0%, #10b981 100%);

  /* ==========================================================================
     v2 NEW: PRODUCT FAMILY COLOUR TOKENS
     Used in product hub cards, filter chips, comparison tables.
     ========================================================================== */

  /* HDIII Wall System — flagship emerald */
  --eb-family-hdiii-bg:     rgba(6, 78, 59, 0.12);
  --eb-family-hdiii-border: rgba(16, 185, 129, 0.30);
  --eb-family-hdiii-accent: #10b981;
  --eb-family-hdiii-label:  #064e3b;

  /* HB Formwork — slate */
  --eb-family-hb-bg:        rgba(30, 41, 59, 0.12);
  --eb-family-hb-border:    rgba(100, 116, 139, 0.30);
  --eb-family-hb-accent:    #64748b;
  --eb-family-hb-label:     #1e293b;

  /* Floor Systems — warm amber-stone */
  --eb-family-floor-bg:     rgba(120, 83, 28, 0.10);
  --eb-family-floor-border: rgba(180, 130, 50, 0.28);
  --eb-family-floor-accent: #b47c32;
  --eb-family-floor-label:  #78531c;

  /* Partition — cool blue-grey */
  --eb-family-partition-bg:     rgba(30, 58, 90, 0.10);
  --eb-family-partition-border: rgba(59, 130, 180, 0.28);
  --eb-family-partition-accent: #3b82b4;
  --eb-family-partition-label:  #1e3a5a;

  /* ==========================================================================
     v2 NEW: COMPLIANCE / BADGE TOKENS
     Used in product compliance strips and certification badges.
     ========================================================================== */

  --eb-badge-passivhaus:    #064e3b;
  --eb-badge-nzeb:          #065f46;
  --eb-badge-rei120:        #7c2d12;
  --eb-badge-rei240:        #991b1b;
  --eb-badge-ec8:           #1e3a5a;
  --eb-badge-part-l:        #1a3a2a;
  --eb-badge-eta:           #111827;
  --eb-badge-text:          rgba(255, 255, 255, 0.95);
  --eb-badge-bg-default:    rgba(255, 255, 255, 0.10);
  --eb-badge-border-default: rgba(255, 255, 255, 0.20);

  /* ==========================================================================
     v2 NEW: SECTOR / AUDIENCE TOKENS
     Used in /sectors/ landing pages, audience pathway cards.
     ========================================================================== */

  /* Architects */
  --eb-sector-architect-accent: #c084fc;
  --eb-sector-architect-bg:     rgba(192, 132, 252, 0.08);

  /* Developers */
  --eb-sector-developer-accent: #f59e0b;
  --eb-sector-developer-bg:     rgba(245, 158, 11, 0.08);

  /* Builders */
  --eb-sector-builder-accent: #10b981;
  --eb-sector-builder-bg:     rgba(16, 185, 129, 0.08);

  /* Private Clients */
  --eb-sector-private-accent: #e2c27a;
  --eb-sector-private-bg:     rgba(226, 194, 122, 0.08);

  /* ==========================================================================
     v2 NEW: RESOURCE / DOWNLOAD CENTRE TOKENS
     Used in resource cards, download centre filter chips.
     ========================================================================== */

  --eb-resource-datasheet-accent:      #10b981;
  --eb-resource-certification-accent:  #f59e0b;
  --eb-resource-drawing-accent:        #3b82f6;
  --eb-resource-installation-accent:   #8b5cf6;
  --eb-resource-brochure-accent:       #ec4899;
  --eb-resource-specification-accent:  #06b6d4;
  --eb-resource-bim-accent:            #6366f1;
  --eb-resource-testreport-accent:     #ef4444;
  --eb-resource-card-bg:               rgba(255, 255, 255, 0.05);
  --eb-resource-card-border:           rgba(255, 255, 255, 0.12);
  --eb-resource-card-hover-bg:         rgba(255, 255, 255, 0.09);

  /* ==========================================================================
     SPACING (base 4px grid)
     ========================================================================== */

  --eb-space-1:   4px;
  --eb-space-2:   8px;
  --eb-space-3:   12px;
  --eb-space-4:   16px;
  --eb-space-5:   20px;
  --eb-space-6:   24px;
  --eb-space-8:   32px;
  --eb-space-10:  40px;
  --eb-space-12:  48px;
  --eb-space-16:  64px;
  --eb-space-20:  80px;
  --eb-space-24:  96px;
  --eb-space-32:  128px;
  --eb-space-40:  160px;
  --eb-space-48:  192px;

  /* --- Section Spacing ------------------------------------------------------- */
  --eb-section-padding-sm:  clamp(48px, 8vw, 64px);
  --eb-section-padding-md:  clamp(64px, 10vw, 96px);
  --eb-section-padding-lg:  clamp(80px, 12vw, 140px);
  --eb-section-padding-xl:  clamp(100px, 14vw, 180px);

  /* ==========================================================================
     CONTAINERS
     ========================================================================== */

  --eb-container-max:     1400px;
  --eb-container-wide:    1200px;
  --eb-container-default: 1080px;
  --eb-container-narrow:  760px;
  --eb-container-xs:      560px;
  --eb-container-gutter:  clamp(20px, 4vw, 60px);

  /* ==========================================================================
     HEADER HEIGHTS
     Sync with navigation.css min-height values on .eb-header.
     .eb-forge__bot-line adds 2px to all values.
     ========================================================================== */

  --eb-header-height:          72px;   /* desktop ≥1024px: 70px + 2px */
  --eb-header-height-tablet:   70px;   /* tablet 768–1023px: 68px + 2px (v2 NEW) */
  --eb-header-height-mobile:   66px;   /* mobile ≤767px: 64px + 2px (v2 corrected) */
  --eb-header-height-scrolled: 60px;   /* scrolled: 58px + 2px */

  /* Sub-navigation offset (system page anchor nav) */
  --eb-anchor-nav-height: 56px;

  /* ==========================================================================
     TYPOGRAPHY
     ========================================================================== */

  --eb-font-heading: 'Orbitron', monospace;
  --eb-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --eb-font-mono:    monospace;
  --eb-font-label:   monospace;

  /* --- Type scale (fluid) ---------------------------------------------------- */
  --eb-text-xs:   clamp(11px, 1.2vw, 12px);
  --eb-text-sm:   clamp(13px, 1.4vw, 14px);
  --eb-text-base: clamp(15px, 1.6vw, 17px);
  --eb-text-md:   clamp(17px, 1.8vw, 19px);
  --eb-text-lg:   clamp(19px, 2vw, 21px);
  --eb-text-xl:   clamp(22px, 2.5vw, 26px);
  --eb-text-2xl:  clamp(26px, 3vw, 32px);
  --eb-text-3xl:  clamp(32px, 4vw, 42px);
  --eb-text-4xl:  clamp(40px, 5vw, 56px);
  --eb-text-5xl:  clamp(52px, 6.5vw, 76px);
  --eb-text-6xl:  clamp(64px, 8vw, 100px);

  /* --- Font weights ---------------------------------------------------------- */
  --eb-weight-light:     300;
  --eb-weight-regular:   400;
  --eb-weight-medium:    500;
  --eb-weight-semibold:  600;
  --eb-weight-bold:      700;
  --eb-weight-extrabold: 800;
  --eb-weight-black:     900;

  /* --- Line heights ---------------------------------------------------------- */
  --eb-leading-tight:   1.1;
  --eb-leading-snug:    1.25;
  --eb-leading-normal:  1.5;
  --eb-leading-relaxed: 1.65;
  --eb-leading-loose:   1.8;

  /* --- Letter spacing -------------------------------------------------------- */
  --eb-tracking-tight:   -0.03em;
  --eb-tracking-normal:  0;
  --eb-tracking-wide:    0.05em;
  --eb-tracking-widest:  0.12em;

  /* ==========================================================================
     BORDER RADIUS
     ========================================================================== */

  --eb-radius-xs:   2px;
  --eb-radius-sm:   4px;
  --eb-radius-md:   8px;
  --eb-radius-lg:   12px;
  --eb-radius-xl:   20px;
  --eb-radius-2xl:  32px;
  --eb-radius-full: 9999px;

  /* ==========================================================================
     SHADOWS
     ========================================================================== */

  --eb-shadow-xs:       0 1px 3px rgba(0,0,0,0.15);
  --eb-shadow-sm:       0 4px 6px -1px rgba(0,0,0,0.10), 0 2px 4px -1px rgba(0,0,0,0.06);
  --eb-shadow-md:       0 20px 25px -5px rgba(0,0,0,0.10), 0 10px 10px -5px rgba(0,0,0,0.04);
  --eb-shadow-lg:       0 25px 50px -12px rgba(0,0,0,0.25);
  --eb-shadow-xl:       0 30px 60px -16px rgba(0,0,0,0.35);
  --eb-shadow-gold:     0 10px 30px rgba(245, 158, 11, 0.35);
  --eb-shadow-gold-sm:  0 0 20px rgba(245, 158, 11, 0.25);
  --eb-shadow-gold-lg:  0 12px 40px rgba(245, 158, 11, 0.45);
  --eb-shadow-emerald:  0 10px 30px rgba(6, 78, 59, 0.40);
  --eb-shadow-inset:    inset 0 1px 0 rgba(255,255,255,0.06);

  /* ==========================================================================
     Z-INDEX SCALE
     ========================================================================== */

  --eb-z-below:    -1;
  --eb-z-base:     0;
  --eb-z-raised:   10;
  --eb-z-dropdown: 100;
  --eb-z-sticky:   200;
  --eb-z-overlay:  300;
  --eb-z-modal:    400;
  --eb-z-toast:    500;
  --eb-z-supreme:  999;

  /* ==========================================================================
     TRANSITIONS
     ========================================================================== */

  --eb-duration-instant: 80ms;
  --eb-duration-fast:    150ms;
  --eb-duration-normal:  250ms;
  --eb-duration-slow:    400ms;
  --eb-duration-slower:  600ms;
  --eb-duration-reveal:  900ms;
  --eb-duration-hero:    1200ms;

  --eb-ease-out:    cubic-bezier(0.0,  0.0, 0.2, 1);
  --eb-ease-in:     cubic-bezier(0.4,  0.0, 1,   1);
  --eb-ease-in-out: cubic-bezier(0.4,  0.0, 0.2, 1);
  --eb-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --eb-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --eb-ease-power:  cubic-bezier(0.16, 1,    0.3, 1);

  --eb-transition-fast:   var(--eb-duration-fast)   var(--eb-ease-out);
  --eb-transition-normal: var(--eb-duration-normal)  var(--eb-ease-out);
  --eb-transition-slow:   var(--eb-duration-slow)    var(--eb-ease-smooth);

  /* ==========================================================================
     MOTION TOKEN SYSTEM
     All animation values should use these tokens — no hardcoded durations in
     component files.
     ========================================================================== */

  --dh-motion-duration-fast:    0.25s;
  --dh-motion-duration-base:    0.35s;
  --dh-motion-duration-slow:    0.45s;
  --dh-motion-duration-reveal:  0.6s;
  --dh-motion-duration-section: 0.8s;
  --dh-motion-duration-loop:    4.6s;
  --dh-motion-duration-loop-text: 9s;
  --dh-motion-duration-loop-slow: 12s;
  --dh-motion-duration-btn-glow:    3.5s;
  --dh-motion-duration-btn-shimmer: 5.5s;

  --dh-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dh-motion-ease-premium:  cubic-bezier(0.22, 1, 0.36, 1);
  --dh-motion-ease-soft:     ease-out;

  --dh-motion-delay-none: 0s;
  --dh-motion-delay-xs:   0.08s;
  --dh-motion-delay-sm:   0.14s;
  --dh-motion-delay-md:   0.2s;

  --dh-motion-distance-xs: 2px;
  --dh-motion-distance-sm: 4px;
  --dh-motion-distance-md: 8px;
  --dh-motion-distance-lg: 14px;

  --dh-motion-opacity-soft:   0.16;
  --dh-motion-opacity-medium: 0.32;
  --dh-motion-opacity-strong: 0.55;

  --dh-motion-blur-none: 0;
  --dh-motion-blur-soft: 0.5px;
  --dh-motion-blur-sm:   1px;

  --dh-motion-shimmer-width:   30%;
  --dh-motion-shimmer-angle:  -18deg;
  --dh-motion-shimmer-opacity: 0.38;

  --dh-motion-border-sweep-speed:        4.8s;
  --dh-motion-border-sweep-speed-strong: 3.9s;

  --dh-motion-glow-soft:   0 0 0  1px rgba(245,158,11,0.18);
  --dh-motion-glow-medium: 0 0 0  1px rgba(245,158,11,0.28);
  --dh-motion-glow-bloom:  0 0 24px rgba(245,158,11,0.14);

  /* ==========================================================================
     v2 NEW: COMPONENT LAYOUT TOKENS
     Used in product hub, filter systems, download centre.
     ========================================================================== */

  /* Product card grid */
  --eb-product-card-min:    320px;
  --eb-product-card-gap:    var(--eb-space-6);

  /* Filter rail */
  --eb-filter-rail-width:   260px;
  --eb-filter-chip-height:  36px;

  /* Resource card */
  --eb-resource-card-min:   280px;
  --eb-resource-card-gap:   var(--eb-space-5);

  /* Spec table */
  --eb-spec-label-width:    40%;
  --eb-spec-row-height:     48px;

  /* ==========================================================================
     v2 NEW: FORM TOKENS
     Used in contact, gating, and enquiry flows.
     ========================================================================== */

  --eb-form-input-height:     52px;
  --eb-form-input-bg:         rgba(255, 255, 255, 0.07);
  --eb-form-input-border:     rgba(255, 255, 255, 0.20);
  --eb-form-input-border-focus: var(--eb-color-gold);
  --eb-form-input-radius:     var(--eb-radius-md);
  --eb-form-input-padding:    0 var(--eb-space-5);
  --eb-form-label-color:      rgba(255, 255, 255, 0.75);
  --eb-form-placeholder-color: rgba(255, 255, 255, 0.38);
  --eb-form-error-color:      #ef4444;
  --eb-form-success-color:    var(--eb-color-emerald-light);

  /* Light surface form overrides */
  --eb-form-light-input-bg:     rgba(0, 0, 0, 0.04);
  --eb-form-light-input-border: rgba(0, 0, 0, 0.15);
  --eb-form-light-label-color:  #374151;
  --eb-form-light-placeholder:  #9ca3af;

}