/**
 * S.S. Enterprises - Design System Variables & Tokens
 * Architectural Luxury & Precision False Ceiling Solutions
 */

:root {
  /* Brand Color Palette */
  --color-primary: #1C1C1C;
  --color-secondary: #2F2F2F;
  --color-accent: #C8A96B;
  --color-accent-hover: #D8BA7C;
  --color-accent-dark: #A58648;
  --color-accent-light: rgba(200, 169, 107, 0.12);
  --color-accent-subtle: rgba(200, 169, 107, 0.06);

  /* Backgrounds & Surfaces */
  --color-bg: #F7F6F2;
  --color-bg-alt: #EFECE6;
  --color-surface: #FFFFFF;
  --color-surface-dark: #242424;
  --color-surface-darker: #171717;

  /* Typography Colors */
  --color-text: #1C1C1C;
  --color-text-muted: #6B6B6B;
  --color-text-subtle: #8A8A8A;
  --color-text-light: #FFFFFF;
  --color-text-light-muted: #B3B3B3;

  /* Borders & Dividers */
  --color-border: rgba(28, 28, 28, 0.09);
  --color-border-light: rgba(28, 28, 28, 0.05);
  --color-border-dark: rgba(255, 255, 255, 0.12);
  --color-border-gold: rgba(200, 169, 107, 0.38);

  /* Typography Fonts */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-accent: 'Manrope', 'Inter', sans-serif;

  /* Type Scale */
  --text-hero: clamp(2.6rem, 5.5vw, 4.5rem);      /* 42px - 72px */
  --text-h1: clamp(2.2rem, 4.2vw, 3.4rem);        /* 35px - 54px */
  --text-h2: clamp(1.85rem, 3.2vw, 2.75rem);      /* 30px - 44px */
  --text-h3: clamp(1.35rem, 2.2vw, 1.85rem);      /* 22px - 30px */
  --text-h4: clamp(1.15rem, 1.6vw, 1.4rem);       /* 18px - 22px */
  --text-lead: 1.18rem;                            /* ~19px */
  --text-body: 1rem;                               /* 16px */
  --text-sm: 0.875rem;                             /* 14px */
  --text-xs: 0.75rem;                              /* 12px */

  /* Spacing Scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;
  --space-4xl: 6.5rem;
  --space-5xl: 8.5rem;

  /* Layout Containers */
  --container-max: 1360px;
  --container-narrow: 1080px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* Border Radii */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.1);
  --shadow-gold: 0 8px 30px rgba(200, 169, 107, 0.25);
  --shadow-dark: 0 12px 36px rgba(0, 0, 0, 0.45);

  /* Transitions & Timing */
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-fast: 0.2s var(--ease-out-cubic);
  --transition-normal: 0.35s var(--ease-out-cubic);
  --transition-slow: 0.65s var(--ease-out-cubic);

  /* Header Height */
  --header-height: 88px;
  --header-height-scrolled: 72px;

  /* Z-Index Hierarchy */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
}