/**
 * VERDANA — Luxury Real Estate Agency
 * Design System Tokens & Custom Properties
 */

:root {
  /* Brand Palette */
  --color-primary: #D96868;
  --color-primary-hover: #C55757;
  --color-primary-subtle: rgba(217, 104, 104, 0.08);
  --color-primary-light: #FAF0F0;
  
  --color-bg: #F2F2F2;
  --color-bg-subtle: #E9E9E9;
  --color-surface: #FFFFFF;
  --color-surface-translucent: rgba(255, 255, 255, 0.85);
  
  --color-secondary: #91AE6E;
  --color-secondary-hover: #7E9B5C;
  --color-secondary-subtle: rgba(145, 174, 110, 0.12);
  
  --color-deep-accent: #689D4B;
  --color-deep-accent-hover: #55833C;
  --color-deep-accent-subtle: rgba(104, 157, 75, 0.12);
  
  /* Neutral Palette */
  --color-neutral-dark: #222222;
  --color-neutral-charcoal: #333333;
  --color-neutral-gray: #666666;
  --color-neutral-muted: #888888;
  --color-neutral-light: #CCCCCC;
  --color-border: #E0E0E0;
  --color-border-subtle: rgba(34, 34, 34, 0.08);
  --color-white: #FFFFFF;
  
  /* Typography System */
  --font-serif: 'Cormorant Garamond', 'Didot', 'Playfair Display', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.84375rem;  /* 13.5px */
  --text-base: 0.96875rem;/* 15.5px */
  --text-md: 1.125rem;    /* 18px */
  --text-lg: 1.3125rem;   /* 21px */
  --text-xl: 1.625rem;    /* 26px */
  --text-2xl: 2.125rem;   /* 34px */
  --text-3xl: 2.75rem;    /* 44px */
  --text-4xl: 3.5rem;     /* 56px */
  --text-5xl: 4.5rem;     /* 72px */
  --text-hero: clamp(2.75rem, 6vw, 5.25rem);
  
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0em;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;
  --tracking-widest: 0.22em;
  
  --lh-tight: 1.12;
  --lh-snug: 1.28;
  --lh-normal: 1.55;
  --lh-relaxed: 1.75;
  
  /* Layout Spacing */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 1rem;      /* 16px */
  --space-md: 1.5rem;    /* 24px */
  --space-lg: 2.5rem;    /* 40px */
  --space-xl: 4rem;      /* 64px */
  --space-2xl: 6rem;     /* 96px */
  --space-3xl: 9rem;     /* 144px */
  
  --container-max: 1380px;
  --container-narrow: 1040px;
  --container-pad: clamp(1.25rem, 4vw, 3.5rem);
  
  /* Architectural Elements */
  --radius-xs: 1px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-none: 0px;
  
  /* Shadows (Restrained & Architectural) */
  --shadow-subtle: 0 4px 20px -2px rgba(34, 34, 34, 0.04);
  --shadow-float: 0 16px 36px -8px rgba(34, 34, 34, 0.07);
  --shadow-overlay: 0 24px 48px -12px rgba(34, 34, 34, 0.16);
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-editorial: 0.85s cubic-bezier(0.25, 1, 0.3, 1);
  
  /* Z-index hierarchy */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal-backdrop: 500;
  --z-modal: 510;
  --z-toast: 1000;
}