/**
 * Haalyn Technologies FZE — Luxury Design System Tokens
 * Milestone: M1 Architecture
 * File: assets/css/luxury-tokens.css
 * 
 * Invariant Reference:
 * - Commercial Representative: Thasni Majeed (Sales Manager — EMEA)
 * - Mailbox: sales@haalyn.com
 * - WhatsApp & Phone: +971 52 188 4327
 * - Registered Office: SRTIPark, Sharjah, United Arab Emirates
 * - Zero external CDN dependencies
 */

:root {
  /* ========================================================================
     1. COLOR SYSTEM
     ======================================================================== */

  /* Obsidian & Royal Navy Dark Scale (Hero, Dark Ambiance, AI Personas) */
  --color-navy-950:             #060B18; /* Deep Midnight Scrim */
  --color-navy-900:             #0B132B; /* Obsidian Slate Hero Canvas */
  --color-navy-800:             #0F172A; /* Slate 900 Surface & Header Dark */
  --color-navy-700:             #1E293B; /* Slate 800 Card Fill & Elevated Containers */
  --color-navy-600:             #334155; /* Slate 700 Dark Borders & Tertiary Headers */

  /* Light Canvas & Off-White Luxury Surfaces */
  --color-canvas-white:         #FFFFFF; /* Pure White Card Canvas */
  --color-canvas-offwhite:      #F8FAFC; /* Slate 50 Luxury Off-White Background */
  --color-canvas-subtle:        #F1F5F9; /* Slate 100 Table Headers & Muted Blocks */
  --color-border-light:         #E2E8F0; /* Slate 200 Hairline Borders */
  --color-border-medium:        #CBD5E1; /* Slate 300 Focus & Interactive Borders */

  /* Glassmorphism Translucent Surfaces */
  --color-glass-header-light:   rgba(255, 255, 255, 0.92);
  --color-glass-header-dark:    rgba(11, 19, 43, 0.92);
  --color-glass-card-dark:      rgba(15, 23, 42, 0.85);
  --color-glass-scrim:          rgba(11, 19, 43, 0.78);

  /* Primary Accent: Vivid Emerald & Mint (AI Status, Operational Growth) */
  --color-emerald-500:          #10B981; /* Vivid Emerald (Primary Accent) */
  --color-emerald-600:          #059669; /* Deep Emerald for High-Contrast Text */
  --color-emerald-400:          #34D399; /* Mint Accent for Dark Backgrounds */
  --color-emerald-soft:         #ECFDF5; /* Emerald Tint Background */
  --color-emerald-border:       #A7F3D0; /* Emerald Border */

  /* Commercial Conversion: Authentic WhatsApp Green */
  --color-whatsapp:             #25D366; /* Official WhatsApp Brand Green */
  --color-whatsapp-hover:       #1EBE5D; /* Deepened Green on Hover */
  --color-whatsapp-dark:        #128C7E; /* WhatsApp Business Dark Tone */
  --color-whatsapp-soft:        rgba(37, 211, 102, 0.12);

  /* Haalyn Signature Luxury Accents (Gold & Champagne) */
  --color-gold-metallic:        #D4AF37; /* Metallic Warm Gold (VIP Badges & Accents) */
  --color-gold-dark:            #B8860B; /* Deep Antique Gold for Text Contrast */
  --color-gold-soft:            #FFFBEB; /* Soft Gold Tint Fill */
  --color-gold-border:          #FDE68A; /* Gold Hairline Border */
  --color-champagne-brand:      #D4C1AC; /* Official Haalyn Corporate Badge Tone */
  --color-champagne-soft:       #FAF7F2; /* Luxury Warm Off-White Tint */
  --color-champagne-border:     #E8DDD0; /* Champagne Border */

  /* Enterprise ICT & Smart Infrastructure Cyan / Electric Blue */
  --color-cyan-400:             #38BDF8;
  --color-cyan-500:             #00D2FF;
  --color-cyan-600:             #0284C7;
  --color-cyan-glow:            rgba(0, 210, 255, 0.28);
  --color-cyan-soft:            rgba(0, 210, 255, 0.08);

  /* Ink & Typography Scale (Strict Contrast Compliance) */
  --color-text-primary-dark:    #0F172A; /* Slate 900 High-Contrast Heading Text */
  --color-text-secondary-dark:  #334155; /* Slate 700 Subheadings & Strong Labels */
  --color-text-body:            #475569; /* Slate 600 Body Running Copy */
  --color-text-muted:           #64748B; /* Slate 500 Captions & Spec Labels */
  --color-text-disabled:        #94A3B8; /* Slate 400 Inactive Icons & Borders */
  
  --color-text-primary-light:   #FFFFFF; /* High-Contrast Text on Dark Sections */
  --color-text-secondary-light: #F1F5F9; /* Secondary Text on Dark Surfaces */
  --color-text-muted-light:     #94A3B8; /* Slate 400 Text on Dark Surfaces */

  /* Status & Validation Feedback */
  --color-status-error:         #EF4444; /* Error State Red */
  --color-status-error-soft:    #FEF2F2; /* Error Field Background */
  --color-status-error-border:  #FCA5A5; /* Error Field Border */
  --color-status-info:          #0284C7; /* Informational Sky Blue */
  --color-status-info-soft:     #F0F9FF;

  /* ========================================================================
     2. TYPOGRAPHY SYSTEM (ZERO-CDN SYSTEM FONT STACKS)
     ======================================================================== */

  /* High-End Clean Sans-Serif Stack (Primary UI & Display Fallback) */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Luxury Display Serif Stack (Crest, Quotes, Luxury Section Accents) */
  --font-serif-luxury: "Didot", "Bodoni MT", "Cinzel", "Playfair Display", "Times New Roman", "Baskerville", Georgia, serif;

  /* Monospace Stack (Model Numbers, SIP Specs, TTFT Latency, SLAs) */
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", "Menlo", "Consolas", monospace;

  /* Fluid Typography Scale (clamp equations for seamless responsive scaling) */
  --text-hero:        clamp(2.25rem, 4.5vw + 1rem, 3.85rem); /* 36px - 62px */
  --text-h1:          clamp(2.00rem, 3.5vw + 0.8rem, 3.00rem); /* 32px - 48px */
  --text-h2:          clamp(1.50rem, 2.4vw + 0.6rem, 2.25rem); /* 24px - 36px */
  --text-h3:          clamp(1.20rem, 1.8vw + 0.4rem, 1.65rem); /* 19px - 26px */
  --text-h4:          clamp(1.05rem, 1.2vw + 0.3rem, 1.25rem); /* 17px - 20px */
  --text-body-lg:     clamp(1.05rem, 1.0vw + 0.2rem, 1.15rem); /* 17px - 18px */
  --text-body:        1.00rem;   /* 16px Baseline */
  --text-sm:          0.875rem;  /* 14px */
  --text-xs:          0.75rem;   /* 12px Micro Labels */
  --text-xxs:         0.6875rem; /* 11px Eyebrows & Tags */

  /* Typographic Weights */
  --font-regular:     400;
  --font-medium:      500;
  --font-semibold:    600;
  --font-bold:        700;
  --font-extrabold:   800;

  /* Letter Spacing & Line Heights */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0.00em;
  --tracking-wide:    0.05em;
  --tracking-widest:  0.12em; /* Eyebrows & Pill Badges */

  --leading-tight:    1.20;
  --leading-snug:     1.35;
  --leading-normal:   1.60;
  --leading-relaxed:  1.75;

  /* ========================================================================
     3. MODULAR SPACING SCALE (8pt / 4pt Grid)
     ======================================================================== */
  --space-1:          4px;
  --space-2:          8px;
  --space-3:          12px;
  --space-4:          16px;
  --space-5:          20px;
  --space-6:          24px;
  --space-8:          32px;
  --space-10:         40px;
  --space-12:         48px;
  --space-16:         64px;
  --space-20:         80px;
  --space-24:         96px;

  /* Layout Container Dimensions */
  --container-max-desktop: 1320px;
  --container-max-hero:    1440px;
  --container-pad-desktop: 32px;
  --container-pad-tablet:  24px;
  --container-pad-mobile:  16px;

  /* ========================================================================
     4. BORDER RADII SYSTEM
     ======================================================================== */
  --radius-xs:        4px;
  --radius-sm:        8px;
  --radius-md:        12px;
  --radius-lg:        16px;
  --radius-xl:        22px;
  --radius-2xl:       30px;
  --radius-full:      9999px;

  /* ========================================================================
     5. ELEVATION & MULTI-LAYER SHADOW SYSTEM
     ======================================================================== */
  --shadow-xs:        0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-sm:        0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.05);
  --shadow-md:        0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
  --shadow-card:      0 8px 24px -4px rgba(15, 23, 42, 0.06), 0 4px 8px -2px rgba(15, 23, 42, 0.04);
  --shadow-card-hover:0 20px 38px -10px rgba(11, 19, 43, 0.14), 0 10px 18px -6px rgba(11, 19, 43, 0.08);
  --shadow-gold-glow: 0 0 24px rgba(212, 175, 55, 0.28);
  --shadow-emerald-glow: 0 0 20px rgba(16, 185, 129, 0.25);
  --shadow-whatsapp-glow: 0 6px 20px rgba(37, 211, 102, 0.35);
  --shadow-modal:     0 25px 60px -12px rgba(11, 19, 43, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.10);
  --shadow-sticky-bar:0 -4px 20px rgba(15, 23, 42, 0.12);

  /* ========================================================================
     6. TRANSITIONS & TIMING CURVES
     ======================================================================== */
  --ease-expo:        cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:      cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:  150ms var(--ease-smooth);
  --transition-normal:250ms var(--ease-smooth);
  --transition-slow:  400ms var(--ease-expo);

  /* ========================================================================
     7. Z-INDEX LAYERING SCALE
     ======================================================================== */
  --z-deep:           -1;
  --z-base:           1;
  --z-raised:         10;
  --z-sticky-nav:     100;
  --z-header:         500;
  --z-sticky-mobile:  800;
  --z-modal-backdrop: 1000;
  --z-modal-dialog:   1050;
  --z-toast:          1200;
}