/* ============================================================
   VESTRA REALTY — Design Tokens
   All tokens declared here. Never hardcode colors, spacing,
   typography, or transitions anywhere else.
   ============================================================ */

:root {
  /* ── Green Palette (from HTML mockups — exact) ────────── */
  --vr-green-950: #020f05;
  --vr-green-900: #062616;
  --vr-green-800: #0b3d22;
  --vr-green-700: #124d2a;
  --vr-green-600: #1c6b3f;
  --vr-green-500: #2db36a;
  --vr-green-400: #3fd47d;
  --vr-green-300: #7de8a9;
  --vr-green-200: #b0e8c8;
  --vr-green-100: #d1f7e2;
  --vr-green-50:  #f0fdf6;

  /* ── Surfaces ─────────────────────────────────────────── */
  --vr-surface-dark:    #0b1a10;
  --vr-surface-bg:      #0b1a10;
  --vr-surface-card:    #ffffff;
  --vr-surface-body:    #f8faf9;
  --vr-surface-overlay: rgba(6, 38, 22, 0.85);

  /* ── Text ─────────────────────────────────────────────── */
  --vr-text-primary:   #ffffff;
  --vr-text-secondary: #a3c4af;
  --vr-text-dark:      #0f2718;
  --vr-text-muted:     #6b7280;

  /* ── Accent Colors (roles + status) ───────────────────── */
  --vr-amber:  #e8a020;
  --vr-sky:    #1a8fc4;
  --vr-coral:  #d95f3b;
  --vr-violet: #6c4db8;
  --vr-teal:   #0f9d8d;

  /* ── Status ───────────────────────────────────────────── */
  --vr-status-pending:   #e8a020;
  --vr-status-active:    #2db36a;
  --vr-status-reserved:  #1a8fc4;
  --vr-status-sold:      #6c4db8;
  --vr-status-rejected:  #d95f3b;
  --vr-status-suspended: #6b7280;

  /* ── Typography ───────────────────────────────────────── */
  --vr-font-heading: 'Cormorant Garamond', Georgia, serif;
  --vr-font-body:    'Outfit', system-ui, sans-serif;

  --vr-text-xs:   0.75rem;
  --vr-text-sm:   0.875rem;
  --vr-text-base: 1rem;
  --vr-text-lg:   1.125rem;
  --vr-text-xl:   1.25rem;
  --vr-text-2xl:  1.5rem;
  --vr-text-3xl:  1.875rem;
  --vr-text-4xl:  2.25rem;
  --vr-text-5xl:  3rem;
  --vr-text-6xl:  3.75rem;

  /* ── Spacing ──────────────────────────────────────────── */
  --vr-space-1:  4px;
  --vr-space-2:  8px;
  --vr-space-3:  12px;
  --vr-space-4:  16px;
  --vr-space-5:  20px;
  --vr-space-6:  24px;
  --vr-space-8:  32px;
  --vr-space-10: 40px;
  --vr-space-12: 48px;
  --vr-space-16: 64px;

  /* ── Border Radius ────────────────────────────────────── */
  --vr-radius-sm:   6px;
  --vr-radius-md:   8px;
  --vr-radius-lg:   12px;
  --vr-radius-xl:   16px;
  --vr-radius-2xl:  20px;
  --vr-radius-full: 100px;

  /* ── Shadows ──────────────────────────────────────────── */
  --vr-shadow-xs:  0 1px 2px rgba(6,38,22,0.05);
  --vr-shadow-sm:  0 1px 3px rgba(6,38,22,0.08), 0 1px 2px rgba(6,38,22,0.04);
  --vr-shadow-md:  0 4px 16px rgba(6,38,22,0.10), 0 2px 4px rgba(6,38,22,0.06);
  --vr-shadow-lg:  0 12px 40px rgba(6,38,22,0.14), 0 4px 12px rgba(6,38,22,0.08);
  --vr-shadow-xl:  0 20px 60px rgba(6,38,22,0.18), 0 8px 20px rgba(6,38,22,0.10);

  /* ── Transitions ──────────────────────────────────────── */
  --vr-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --vr-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --vr-ease-enter:  cubic-bezier(0.0, 0.0, 0.2, 1);
  --vr-ease-exit:   cubic-bezier(0.4, 0.0, 1, 1);

  --vr-duration-fast: 150ms;
  --vr-duration-base: 250ms;
  --vr-duration-slow: 400ms;

  /* ── Layout ───────────────────────────────────────────── */
  --vr-sidebar-w: 240px;
  --vr-topbar-h:  64px;
  --vr-bottom-nav-h: 64px;
}