/**
 * SKYPURE — High-Access & Façade Services
 * Design Tokens & Variables (Regulated Architectural Corporate Direction)
 * 
 * Palette:
 * - Deep Navy: #0B1A2A
 * - Dark Navy: #07111C
 * - Black: #050607
 * - Concrete: #B8B7B2
 * - Light Concrete: #E5E3DE
 * - White: #F5F5F2
 */

:root {
  /* ==========================================================================
     Color Palette
     ========================================================================== */
  --color-black: #050607;
  --color-dark-navy: #07111C;
  --color-deep-navy: #0B1A2A;
  --color-navy-surface: #0E1F33;
  --color-navy-elevated: #13273F;
  --color-steel: #243B53;
  --color-steel-light: #486581;
  
  --color-concrete: #B8B7B2;
  --color-light-concrete: #E5E3DE;
  --color-white: #F5F5F2;
  
  /* Semantic Text Colors */
  --text-primary: #F5F5F2;
  --text-secondary: #D8D6D0;
  --text-muted: #9E9D97;
  --text-dim: #6B7280;
  --text-dark: #050607;
  
  /* Semantic Backgrounds */
  --bg-primary: #050607;
  --bg-secondary: #07111C;
  --bg-surface: #0B1A2A;
  --bg-surface-elevated: #0E1F33;
  --bg-concrete: #B8B7B2;
  --bg-light-concrete: #E5E3DE;
  
  /* Architectural Borders — Quiet & Restrained */
  --border-subtle: rgba(184, 183, 178, 0.12);
  --border-medium: rgba(184, 183, 178, 0.22);
  --border-grid: rgba(229, 227, 222, 0.32);
  --border-strong: rgba(229, 227, 222, 0.45);
  --border-active: #F5F5F2;
  
  /* Overlay & Shadows */
  --overlay-hero: linear-gradient(180deg, rgba(5, 6, 7, 0.35) 0%, rgba(7, 17, 28, 0.7) 65%, #050607 100%);
  --shadow-architectural: 0 24px 48px -12px rgba(5, 6, 7, 0.7);
  --shadow-elevated: 0 16px 32px -8px rgba(5, 6, 7, 0.5);
  --shadow-subtle: 0 6px 18px -4px rgba(5, 6, 7, 0.3);

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; /* Regulated: use clean sans for metadata */
  
  --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.825rem);
  --text-sm: clamp(0.85rem, 0.8rem + 0.25vw, 0.95rem);
  --text-base: clamp(0.975rem, 0.925rem + 0.25vw, 1.075rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
  --text-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem);
  --text-2xl: clamp(1.65rem, 1.4rem + 1.2vw, 2.3rem);
  --text-3xl: clamp(2.2rem, 1.8rem + 1.8vw, 3.2rem);
  --text-4xl: clamp(2.9rem, 2.3rem + 2.8vw, 4.6rem);
  --text-huge: clamp(3.6rem, 2.8rem + 4.5vw, 6.8rem);
  --text-display: clamp(4.4rem, 3.2rem + 6.5vw, 9.8rem);

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  --tracking-tighter: -0.035em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.16em;

  /* ==========================================================================
     Layout & Spacing
     ========================================================================== */
  --container-max-width: 1440px;
  --container-narrow-width: 1120px;
  --container-pad: clamp(1.5rem, 4.5vw, 4.5rem);
  
  --header-height: 88px;
  --header-height-scrolled: 76px;

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;
  --space-4xl: 10rem;

  /* ==========================================================================
     Transitions & Timing (Cinematic & Restrained)
     ========================================================================== */
  --ease-architectural: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-fast: 0.2s var(--ease-out-quad);
  --transition-base: 0.35s var(--ease-architectural);
  --transition-slow: 0.7s var(--ease-architectural);
  --transition-cinematic: 1.2s var(--ease-architectural);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-header: 1000;
  --z-modal: 2000;
}