/* ==========================================================================
   SWEET HOME REAL ESTATE — DESIGN SYSTEM TOKENS (variables.css)
   Aesthetic: "Brand Theater" / Senior UI/UX Audit Refined
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     1. Color Palette
     ------------------------------------------------------------------------- */
  /* Primary Brands */
  --color-primary: #0B3D2E;        /* Deep Forest Emerald */
  --color-primary-light: #1A5C45;  /* Hover / Lighter Emerald */
  --color-primary-dark: #06261C;   /* Deepest Shadow Emerald */
  --color-primary-muted: #2D7A5F;  /* Subtle Emerald Accent */

  /* Metallic Luxury Gold Gradients & Solid Accents */
  --color-accent: #C9A84C;         /* Brushed Luxury Gold */
  --color-accent-light: #D4B96A;   /* Bright Gold Hover */
  --color-accent-dark: #A38435;    /* Deep Gold Active */
  --gradient-gold: linear-gradient(135deg, #D4B96A 0%, #C9A84C 50%, #A38435 100%);
  --color-accent-subtle: rgba(201, 168, 76, 0.12); /* Gold Tint Background */

  /* Neutrals & Surfaces */
  --color-bg: #FAFAF7;             /* Warm Silk Off-White */
  --color-bg-elevated: #FFFFFF;    /* Cards & Modals */
  --color-bg-subtle: #F3F1EC;      /* Alternating Section Fill */
  --color-surface: #EDE9E1;        /* Borders & Dividers */
  --color-surface-hover: #E3DEC3;

  /* Typography Colors */
  --color-text-primary: #1A1A1A;   /* High Contrast Body/Headings */
  --color-text-secondary: #5A5A5A; /* Descriptions & Specs */
  --color-text-tertiary: #8A8A8A;  /* Captions & Footnotes */
  --color-text-inverse: #FAFAF7;   /* Text on Dark Surfaces */

  /* Dark Sections (Footer, Hero Overlays, Feature Cards) */
  --color-dark: #0A0A0A;           /* OLED Obsidian Black */
  --color-dark-elevated: #141414;  /* Dark Card Surface */
  --color-dark-surface: #1E1E1E;   /* Dark Dividers */
  --color-dark-text: #E8E4DE;      /* Body Text on Dark */
  --color-dark-muted: #9E9A93;     /* Secondary Text on Dark */

  /* -------------------------------------------------------------------------
     2. Typography
     ------------------------------------------------------------------------- */
  --font-heading: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* -------------------------------------------------------------------------
     3. Spacing & Grid System
     ------------------------------------------------------------------------- */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  --section-padding: clamp(64px, 8vw, 128px);
  --section-padding-sm: clamp(40px, 5vw, 80px);

  --container-max: 1440px;
  --container-narrow: 900px;
  --container-wide: 1680px;
  --container-padding: clamp(20px, 4vw, 80px);

  /* -------------------------------------------------------------------------
     4. Elevation & Shadows
     ------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);
  
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-card-hover: 0 16px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(201, 168, 76, 0.25);

  --shadow-gold: 0 4px 20px rgba(201, 168, 76, 0.35);
  --shadow-gold-hover: 0 8px 28px rgba(201, 168, 76, 0.5);

  /* -------------------------------------------------------------------------
     5. Border Radii
     ------------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* -------------------------------------------------------------------------
     6. Transitions & Motion (Exponential Silk Easing)
     ------------------------------------------------------------------------- */
  --ease-expo-out: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-reveal: 1200ms;
}