/**
 * FIANCO DESIGN SYSTEM TOKENS
 * Design Read: Cold Luxury & High-Performance Glazing Architecture
 * Guided by: design-taste-frontend, emil-design-eng, animate, mobile-native
 */

:root {
  /* ==========================================================================
     COLOR SYSTEM: Cold Architectural Luxury & Saint-Gobain Glass Palette
     (Anti-slop: zero generic AI purple/neon, no muddy cream/brass clichés)
     ========================================================================== */
  --color-bg-base: oklch(0.978 0.005 85);       /* Pure Architectural Alabaster #f8f7f5 */
  --color-bg-surface: oklch(0.998 0.001 85);    /* Pure Monolith White #ffffff */
  --color-bg-elevated: oklch(0.945 0.008 85);   /* Cool Limestone Plinth #f0ece5 */
  --color-bg-card: oklch(0.998 0.001 85 / 0.92);/* Crystalline Glass Card */
  --color-bg-subtle: oklch(0.96 0.005 85);     /* Soft Stone Tint */

  /* Text & Contrast Hierarchy (WCAG AAA Compliance: >14:1 contrast ratio) */
  --color-text-primary: oklch(0.14 0.015 250);  /* Deep Architectural Basalt #11141a */
  --color-text-secondary: oklch(0.38 0.018 70); /* Warm Slate Charcoal #4a4740 */
  --color-text-muted: oklch(0.55 0.015 70);     /* Muted Stone #76736a */
  --color-text-dim: oklch(0.70 0.012 70);       /* Hairline Label Grey #9e9b93 */

  /* Luxury Accents: Patina Bronze & Saint-Gobain French Cobalt */
  --color-accent-bronze: oklch(0.48 0.11 65);   /* Deep Patina Bronze #7b5927 */
  --color-accent-bronze-light: oklch(0.58 0.12 72); /* Polished Architectural Brass #997330 */
  --color-accent-glow: oklch(0.48 0.11 65 / 0.12);

  /* Saint-Gobain Certified Network Cobalt */
  --color-sg-blue: oklch(0.44 0.20 255);        /* Royal Saint-Gobain French Cobalt #004fb0 */
  --color-sg-blue-dim: oklch(0.44 0.20 255 / 0.08);
  --color-emerald: oklch(0.44 0.15 150);        /* Certified LEED Green #107446 */
  --color-emerald-dim: oklch(0.44 0.15 150 / 0.08);

  /* Hairlines & Borders */
  --border-subtle: oklch(0.14 0.015 250 / 0.09); /* Crisp 1px stone divider */
  --border-medium: oklch(0.14 0.015 250 / 0.16);
  --border-accent: oklch(0.48 0.11 65 / 0.35);
  --border-sg: oklch(0.44 0.20 255 / 0.35);

  /* Semantic Aliases for Cold Architectural Luxury */
  --color-gold-300: var(--color-accent-bronze-light);
  --color-gold-400: var(--color-accent-bronze);
  --color-gold-500: oklch(0.40 0.11 65);
  --border-gold: var(--border-accent);
  --border-gold-strong: oklch(0.48 0.11 65 / 0.60);
  --shadow-gold: var(--shadow-accent);

  /* ==========================================================================
     TYPOGRAPHY (Modular Scale with Italic Descender Clearance)
     ========================================================================== */
  --font-serif: 'Cormorant Garamond', Didot, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.88rem + 0.3vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 0.98rem + 0.4vw, 1.25rem);
  --text-lg: clamp(1.25rem, 1.12rem + 0.65vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
  --text-3xl: clamp(2.35rem, 1.85rem + 2.5vw, 3.75rem);
  --text-4xl: clamp(3rem, 2.2rem + 4vw, 5.25rem);
  --text-display: clamp(3.25rem, 2.4rem + 5vw, 6.5rem);

  /* Letter Spacing */
  --tracking-tight: -0.03em;
  --tracking-normal: 0em;
  --tracking-wide: 0.06em;
  --tracking-widest: 0.18em;
  --tracking-monumental: 0.26em;

  /* Line Heights with Italic Clearance */
  --leading-none: 1.04;
  --leading-tight: 1.16;
  --leading-snug: 1.32;
  --leading-relaxed: 1.65;
  --leading-loose: 1.85;

  /* ==========================================================================
     FLUID SPACING SYSTEM
     ========================================================================== */
  --space-3xs: clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.68rem + 0.35vw, 0.875rem);
  --space-sm: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --space-md: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --space-lg: clamp(2rem, 1.7rem + 1.5vw, 3rem);
  --space-xl: clamp(3rem, 2.4rem + 3vw, 4.5rem);
  --space-2xl: clamp(4rem, 3.2rem + 4vw, 6rem);
  --space-3xl: clamp(5rem, 3.8rem + 5.5vw, 8.5rem);

  /* Layout Containers */
  --container-max: 1380px;
  --container-wide: 1560px;
  --container-narrow: 1040px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);

  /* ==========================================================================
     EMIL KOWALSKI EASING CURVES & TIMING (animate & emil-design-eng)
     Never use ease-in for UI. UI animations under 300ms.
     ========================================================================== */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);       /* Strong ease-out for responsive UI */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);   /* Strong ease-in-out for on-screen travel */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);    /* iOS-like drawer physical curve */
  --duration-press: 160ms;                          /* Tactile button press feedback */
  --duration-fast: 200ms;                           /* Micro-interactions & tooltips */
  --duration-normal: 260ms;                         /* Modals & content reveals */
  --duration-deliberate: 400ms;                     /* Page-level transitions */

  /* Shadows (Tinted to background, no muddy pure-black drop shadows) */
  --shadow-subtle: 0 4px 18px -2px rgba(17, 20, 26, 0.05);
  --shadow-monolith: 0 16px 38px -8px rgba(17, 20, 26, 0.09);
  --shadow-accent: 0 10px 28px -4px rgba(123, 89, 39, 0.18);

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-card: 10;
  --z-dropdown: 50;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 500;
  --z-toast: 1000;

  /* Safe Area Insets for Mobile Notches */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}