/**
 * @file
 * CSS custom properties for the Real Estate Elite theme.
 * Black-red-white premium color palette with elegant typography scale.
 */

:root {
  /* === Colors === */
  --re-black: #0A0A0A;
  --re-black-light: #1A1A1A;
  --re-black-lighter: #2A2A2A;
  --re-red: #C8102E;
  --re-red-dark: #9E0C24;
  --re-red-light: #E8344E;
  --re-white: #FFFFFF;
  --re-off-white: #F5F5F3;
  --re-cream: #FAF8F5;
  --re-gray-100: #E8E6E3;
  --re-gray-200: #D0CEC9;
  --re-gray-300: #A8A5A0;
  --re-gray-400: #787570;
  --re-gray-500: #585550;
  --re-gray-600: #3A3835;

  /* === Typography === */
  --re-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Noto Sans', sans-serif;
  --re-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Noto Sans', sans-serif;

  /* Font sizes - fluid scale (optimised for Cyrillic readability) */
  --re-text-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.8125rem);
  --re-text-sm: clamp(0.8125rem, 0.75rem + 0.25vw, 0.9375rem);
  --re-text-base: clamp(0.9375rem, 0.85rem + 0.35vw, 1.0625rem);
  --re-text-lg: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  --re-text-xl: clamp(1.1875rem, 1.05rem + 0.55vw, 1.5rem);
  --re-text-2xl: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
  --re-text-3xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem);
  --re-text-4xl: clamp(2.25rem, 1.75rem + 2.8vw, 3.75rem);
  --re-text-5xl: clamp(2.75rem, 2rem + 3.8vw, 5rem);

  /* Line heights (generous for Cyrillic) */
  --re-leading-tight: 1.2;
  --re-leading-snug: 1.35;
  --re-leading-normal: 1.65;
  --re-leading-relaxed: 1.8;

  /* Letter spacing (adjusted for Cyrillic) */
  --re-tracking-tight: -0.015em;
  --re-tracking-normal: 0;
  --re-tracking-wide: 0.04em;
  --re-tracking-wider: 0.08em;

  /* === Spacing === */
  --re-space-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
  --re-space-sm: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --re-space-md: clamp(1rem, 0.8rem + 0.8vw, 1.5rem);
  --re-space-lg: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --re-space-xl: clamp(2rem, 1.5rem + 2vw, 4rem);
  --re-space-2xl: clamp(3rem, 2rem + 3vw, 6rem);
  --re-space-3xl: clamp(4rem, 3rem + 4vw, 8rem);

  /* === Layout === */
  --re-container-max: 1320px;
  --re-container-narrow: 960px;
  --re-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* === Transitions === */
  --re-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --re-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --re-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --re-duration-fast: 200ms;
  --re-duration-normal: 400ms;
  --re-duration-slow: 700ms;

  /* === Borders & Radius === */
  --re-radius-sm: 0;
  --re-radius-md: 0;
  --re-radius-lg: 0;
  --re-radius-xl: 0;
  --re-radius-full: 0;

  /* === Shadows === */
  --re-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --re-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
  --re-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
  --re-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.24);
  --re-shadow-red: 0 8px 32px rgba(200, 16, 46, 0.2);

  /* === Z-index === */
  --re-z-header: 100;
  --re-z-overlay: 200;
  --re-z-modal: 300;
  --re-z-loader: 999;
}
