/* ==========================================================================
   DESIGN TOKENS — Luxury Real Estate (eXp Realty Portugal)
   Custom properties for colors, typography, spacing, breakpoints, shadows
   ========================================================================== */

:root {
  /* --------------------------------------------------------------------------
     COLOR PALETTE — eXp Realty Brand Colors
     -------------------------------------------------------------------------- */
  /* Base Neutrals */
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-light-grey: #E2E3E4;

  /* Brand Colors */
  --color-brand-dark-navy: #0C0F24;
  --color-charcoal-blue: #31303F;
  --color-moss-grey: #686672;
  --color-slate-blue: #506CAA;
  --color-frosted-blue: #D3DAE9;

  /* Semantic aliases for the design system */
  --color-ink: var(--color-brand-dark-navy);
  --color-ink-light: var(--color-charcoal-blue);
  --color-paper: var(--color-frosted-blue);
  --color-paper-dark: var(--color-light-grey);
  --color-accent: var(--color-slate-blue);
  --color-accent-hover: #3D5A8F;  /* Darker slate blue for hover */
  --color-accent-light: #A8B8D8;  /* Lighter slate blue */

  /* Text colors */
  --color-text-primary: var(--color-brand-dark-navy);
  --color-text-secondary: var(--color-charcoal-blue);
  --color-text-muted: var(--color-moss-grey);
  --color-text-on-accent: var(--color-white);

  /* Background colors */
  --color-background: var(--color-white);
  --color-background-alt: var(--color-frosted-blue);
  --color-background-dark: var(--color-brand-dark-navy);

  /* Border colors */
  --color-border: var(--color-light-grey);
  --color-border-strong: var(--color-moss-grey);
  --color-border-on-dark: rgba(255, 255, 255, 0.15);

  /* Focus ring */
  --color-focus: var(--color-slate-blue);

  /* eXp Realty brand colors (preserved for badges/co-branding) */
  --color-exp-dark: #0B1D3A;
  --color-exp-gold: #C8A951;
  --color-exp-light-gold: #E8D4A8;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY — Editorial pairing
     Display: Cormorant Garamond (serif, elegant, high contrast)
     Body: Inter (neutral sans, excellent readability)
     -------------------------------------------------------------------------- */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Fluid type scale (clamp for responsive without media queries) */
  --text-xs: clamp(0.7rem, 0.65rem + 0.25vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.05rem);
  --text-lg: clamp(1.1rem, 1rem + 0.5vw, 1.2rem);
  --text-xl: clamp(1.3rem, 1.15rem + 0.75vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 1.35rem + 1.25vw, 2rem);
  --text-3xl: clamp(2rem, 1.6rem + 2vw, 2.8rem);
  --text-4xl: clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
  --text-5xl: clamp(3rem, 2rem + 5vw, 5.5rem);

  /* Line heights */
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.08em;

  /* --------------------------------------------------------------------------
     SPACING SCALE — Base 4px, fluid on larger screens
     -------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;
  --space-48: 192px;

  /* Fluid section padding */
  --section-padding-y: clamp(64px, 8vw, 128px);
  --section-padding-x: clamp(24px, 5vw, 96px);

  /* Container max widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* --------------------------------------------------------------------------
     BREAKPOINTS — Mobile-first (min-width)
     xs: 0 (default)
     sm: 480px
     md: 768px
     lg: 1024px
     xl: 1280px
     2xl: 1536px
     -------------------------------------------------------------------------- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* --------------------------------------------------------------------------
     BORDERS & RADIUS
     -------------------------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --border-hairline: 1px solid var(--color-border);
  --border-strong: 1px solid var(--color-border-strong);

  /* --------------------------------------------------------------------------
     SHADOWS — Minimal, no drop shadows per luxury guidelines
     Only subtle 1px top border simulation if absolutely needed
     -------------------------------------------------------------------------- */
  --shadow-subtle: 0 1px 0 rgba(0, 0, 0, 0.04);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.06);

  /* --------------------------------------------------------------------------
     TRANSITIONS — Slow, deliberate, cubic-bezier(0.22, 1, 0.36, 1)
     Respect prefers-reduced-motion
     -------------------------------------------------------------------------- */
  --transition-fast: 150ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-base: 300ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slow: 500ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-slower: 700ms cubic-bezier(0.22, 1, 0.36, 1);

  /* --------------------------------------------------------------------------
     Z-INDEX SCALE
     -------------------------------------------------------------------------- */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;
}

/* --------------------------------------------------------------------------
   DARK MODE (optional — only if brand approves)
   Based on eXp Realty brand colors
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-text-primary: var(--color-white);
    --color-text-secondary: var(--color-frosted-blue);
    --color-text-muted: var(--color-light-grey);
    --color-background: var(--color-brand-dark-navy);
    --color-background-alt: var(--color-charcoal-blue);
    --color-background-dark: var(--color-black);
    --color-border: var(--color-border-on-dark);
    --color-border-strong: rgba(255, 255, 255, 0.25);
  }
}

/* --------------------------------------------------------------------------
   REDUCED MOTION — Collapse all transitions
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-slower: 0ms;
  }
}