/* ==========================================================================
   D-ZONE SOFAS — MASTER DESIGN SYSTEM TOKENS
   Creative Direction: Reference-Driven Luxury Editorial Furniture Brand
   Brand: D-ZONE Sofas | "For Incredible Homes" | "Comfort, engineered around you."
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     01. COLOR SYSTEM — ALTERNATING EDITORIAL PALETTE
     ------------------------------------------------------------------------- */
  /* Master Dark Surfaces (Hero, Signature, Inside Sofa, Materials, Craft, CTA, Footer) */
  --color-bg-dark: #0b0b0a;
  --color-bg-dark-surface: #141413;
  --color-bg-dark-elevated: #1b1b19;
  --color-bg-dark-glass: rgba(11, 11, 10, 0.88);
  --border-dark-subtle: rgba(255, 255, 255, 0.08);
  --border-dark-medium: rgba(255, 255, 255, 0.16);
  --border-dark-rule: rgba(255, 255, 255, 0.12);

  /* Master Warm Light Surfaces (Brand Statement, Customization, Collection, Projects, Why D-Zone) */
  --color-bg-ivory: #f5f2eb;
  --color-bg-ivory-surface: #ffffff;
  --color-bg-ivory-elevated: #faf8f5;
  --color-bg-ivory-glass: rgba(245, 242, 235, 0.94);
  --border-ivory-subtle: rgba(18, 18, 17, 0.08);
  --border-ivory-medium: rgba(18, 18, 17, 0.16);
  --border-ivory-rule: rgba(18, 18, 17, 0.12);

  /* Master Warm Mid-Tones (Stone & Taupe Accents) */
  --color-bg-stone: #d8d2c8;
  --color-bg-stone-surface: #e5e0d7;
  --color-bg-taupe: #a69c8e;
  --border-stone-subtle: rgba(18, 18, 17, 0.1);
  --border-stone-rule: rgba(18, 18, 17, 0.14);

  /* Typography Colors — Dark Contexts */
  --color-text-dark-primary: #f6f4f0;      /* Warm Alabaster Ivory */
  --color-text-dark-secondary: #aba8a1;    /* Muted Warm Stone */
  --color-text-dark-muted: #726f68;        /* Subtle Editorial Grey */

  /* Typography Colors — Light / Ivory Contexts */
  --color-text-light-primary: #171716;     /* Deep Charcoal (High Contrast) */
  --color-text-light-secondary: #5f5a52;   /* Readable Muted Charcoal/Stone */
  --color-text-light-muted: #726e67;       /* Refined Editorial Marker */

  /* Default Typography Aliases */
  --color-text-primary: var(--color-text-dark-primary);
  --color-text-secondary: var(--color-text-dark-secondary);
  --color-text-muted: var(--color-text-dark-muted);
  --color-text-inverse: #0b0b0a;

  /* Signature D-ZONE Gold — Restrained Accent Only */
  --color-accent-gold: #c5a059;
  --color-accent-gold-hover: #d8b26e;
  --color-accent-gold-bright: #dda73a;
  --color-accent-gold-subtle: rgba(197, 160, 89, 0.12);
  --color-accent-gold-border: rgba(197, 160, 89, 0.4);

  /* WhatsApp Brand Color */
  --color-whatsapp: #25d366;
  --color-whatsapp-hover: #20ba59;

  /* -------------------------------------------------------------------------
     02. TYPOGRAPHY SYSTEM — CORMORANT GARAMOND (HEADLINES) + MANROPE (BODY)
     ------------------------------------------------------------------------- */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-primary: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Typography Scale */
  --fs-hero: clamp(2.75rem, 5.8vw, 5.4rem);
  --fs-h1: clamp(2.4rem, 4.8vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 3.4vw, 3.2rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.85rem);
  --fs-lead: clamp(1.05rem, 1.3vw, 1.28rem);
  --fs-body: 0.96rem;
  --fs-caption: 0.82rem;
  --fs-kicker: 0.72rem;
  --fs-numeral: clamp(1.8rem, 3vw, 3rem);

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-kicker: 0.18em;
  --tracking-numeral: -0.02em;

  /* Line Heights */
  --lh-tight: 1.08;
  --lh-snug: 1.22;
  --lh-normal: 1.5;
  --lh-relaxed: 1.72;

  /* -------------------------------------------------------------------------
     03. SPACING & ARCHITECTURAL BREATHING ROOM
     ------------------------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.25rem;
  --space-xl: 3.25rem;
  --space-2xl: 5rem;
  --space-3xl: 7.5rem;
  --space-section: clamp(5rem, 8vw, 9rem);

  /* Container Widths */
  --container-max-width: 1400px;
  --container-editorial-width: 1200px;
  --container-narrow-width: 900px;
  --container-padding: clamp(1.25rem, 4.5vw, 3.5rem);

  /* Header Height */
  --header-height: 84px;

  /* Radii (Delicate architectural pill or micro-radius) */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;

  /* Transitions */
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.2s var(--ease-editorial);
  --transition-normal: 0.45s var(--ease-editorial);
  --transition-slow: 0.85s var(--ease-editorial);

  /* Shadows */
  --shadow-editorial: 0 16px 40px rgba(0, 0, 0, 0.08);
  --shadow-dark: 0 24px 54px rgba(0, 0, 0, 0.55);

  /* Z-Index Hierarchy */
  --z-bg: 0;
  --z-video: 1;
  --z-veil: 2;
  --z-content: 3;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}