/* ==========================================================================
   VIRETTO — Design System Tokens
   "Inteligência imobiliária com negociação flexível."
   ========================================================================== */

:root {
  /* ── Brand Colors ─────────────────────────────────────────────────────── */
  --v-teal:              #1B3A4B;
  --v-teal-light:        #2D5F73;
  --v-teal-mid:          #245266;
  --v-teal-vivid:        #3A8BA8;
  --v-copper:            #B87333;
  --v-copper-light:      #D4956B;
  --v-copper-hover:      #CA8548;
  --v-gold:              #C9A96E;
  --v-gold-soft:         #D4BC8A;

  /* ── Neutrals ─────────────────────────────────────────────────────────── */
  --v-dark:              #0C1117;
  --v-dark-card:         #111920;
  --v-dark-elevated:     #16202A;
  --v-dark-subtle:       #1C2833;
  --v-gray-900:          #212D39;
  --v-gray-800:          #2C3A48;
  --v-gray-700:          #3D4E5E;
  --v-gray-600:          #506476;
  --v-gray-500:          #6B7F91;
  --v-gray-400:          #8A9BAA;
  --v-gray-300:          #A0B0BF;
  --v-gray-200:          #C2CDD6;
  --v-gray-100:          #E0E7EC;
  --v-cream:             #F5F1EC;
  --v-cream-warm:        #EDE6DD;
  --v-white:             #FAFAFA;
  --v-white-pure:        #FFFFFF;

  /* ── Semantic ──────────────────────────────────────────────────────────── */
  --v-success:           #2E8B57;
  --v-error:             #C0392B;
  --v-warning:           #D4A017;
  --v-info:              var(--v-teal-vivid);

  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --v-bg-primary:        var(--v-dark);
  --v-bg-card:           var(--v-dark-card);
  --v-bg-elevated:       var(--v-dark-elevated);
  --v-bg-overlay:        rgba(12, 17, 23, 0.85);
  --v-bg-light:          var(--v-cream);
  --v-bg-light-card:     var(--v-white-pure);

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --v-text-primary:      var(--v-white);
  --v-text-secondary:    var(--v-gray-300);
  --v-text-tertiary:     var(--v-gray-500);
  --v-text-dark:         var(--v-dark);
  --v-text-dark-secondary: var(--v-gray-700);
  --v-text-accent:       var(--v-copper);
  --v-text-link:         var(--v-teal-vivid);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --v-font-heading:      'Plus Jakarta Sans', 'General Sans', system-ui, sans-serif;
  --v-font-display:      'Playfair Display', 'Georgia', serif;
  --v-font-body:         'Inter', system-ui, -apple-system, sans-serif;
  --v-font-mono:         'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --v-fs-display:        clamp(2.75rem, 5.5vw, 4.5rem);
  --v-fs-h1:             clamp(2rem, 4vw, 3.25rem);
  --v-fs-h2:             clamp(1.625rem, 3vw, 2.5rem);
  --v-fs-h3:             clamp(1.25rem, 2vw, 1.75rem);
  --v-fs-h4:             clamp(1.1rem, 1.5vw, 1.375rem);
  --v-fs-body-lg:        1.125rem;
  --v-fs-body:           1rem;
  --v-fs-body-sm:        0.875rem;
  --v-fs-caption:        0.8125rem;
  --v-fs-overline:       0.75rem;

  --v-lh-tight:          1.15;
  --v-lh-heading:        1.25;
  --v-lh-body:           1.65;

  --v-ls-tight:          -0.025em;
  --v-ls-normal:         0;
  --v-ls-wide:           0.05em;
  --v-ls-overline:       0.12em;

  /* ── Spacing Scale (8px base) ──────────────────────────────────────────── */
  --v-space-1:           0.25rem;    /* 4px */
  --v-space-2:           0.5rem;     /* 8px */
  --v-space-3:           0.75rem;    /* 12px */
  --v-space-4:           1rem;       /* 16px */
  --v-space-5:           1.5rem;     /* 24px */
  --v-space-6:           2rem;       /* 32px */
  --v-space-7:           2.5rem;     /* 40px */
  --v-space-8:           3rem;       /* 48px */
  --v-space-9:           4rem;       /* 64px */
  --v-space-10:          5rem;       /* 80px */
  --v-space-11:          6rem;       /* 96px */
  --v-space-12:          8rem;       /* 128px */

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --v-container-max:     1280px;
  --v-container-narrow:  960px;
  --v-container-tight:   720px;
  --v-gutter:            1.5rem;
  --v-section-padding:   var(--v-space-11);

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --v-radius-sm:         6px;
  --v-radius-md:         10px;
  --v-radius-lg:         16px;
  --v-radius-xl:         24px;
  --v-radius-pill:       999px;
  --v-border-subtle:     1px solid rgba(255, 255, 255, 0.06);
  --v-border-light:      1px solid rgba(255, 255, 255, 0.1);
  --v-border-copper:     1px solid rgba(184, 115, 51, 0.3);

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  --v-shadow-sm:         0 1px 3px rgba(0, 0, 0, 0.2);
  --v-shadow-md:         0 4px 16px rgba(0, 0, 0, 0.25);
  --v-shadow-lg:         0 8px 32px rgba(0, 0, 0, 0.3);
  --v-shadow-xl:         0 16px 48px rgba(0, 0, 0, 0.35);
  --v-shadow-glow-teal:  0 0 40px rgba(27, 58, 75, 0.3);
  --v-shadow-glow-copper:0 0 40px rgba(184, 115, 51, 0.15);
  --v-shadow-card:       0 2px 12px rgba(0, 0, 0, 0.2), 0 0 1px rgba(255, 255, 255, 0.05);
  --v-shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 1px rgba(184, 115, 51, 0.2);

  /* ── Transitions ───────────────────────────────────────────────────────── */
  --v-ease-out:          cubic-bezier(0.16, 1, 0.3, 1);
  --v-ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
  --v-ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1);
  --v-duration-fast:     150ms;
  --v-duration-normal:   300ms;
  --v-duration-slow:     500ms;
  --v-duration-slower:   800ms;
  --v-transition-base:   all var(--v-duration-normal) var(--v-ease-out);
  --v-transition-fast:   all var(--v-duration-fast) var(--v-ease-out);
  --v-transition-slow:   all var(--v-duration-slow) var(--v-ease-out);

  /* ── Z-Index Scale ─────────────────────────────────────────────────────── */
  --v-z-base:            1;
  --v-z-dropdown:        100;
  --v-z-sticky:          200;
  --v-z-fixed:           300;
  --v-z-overlay:         400;
  --v-z-modal:           500;
  --v-z-toast:           600;
  --v-z-tooltip:         700;
}

/* ── Dark mode is default, light sections via class ─────────────────────── */
.section--light {
  --v-bg-primary:        var(--v-cream);
  --v-bg-card:           var(--v-white-pure);
  --v-bg-elevated:       var(--v-white);
  --v-text-primary:      var(--v-dark);
  --v-text-secondary:    var(--v-gray-700);
  --v-text-tertiary:     var(--v-gray-600);
  --v-border-subtle:     1px solid rgba(0, 0, 0, 0.08);
  --v-border-light:      1px solid rgba(0, 0, 0, 0.12);
  --v-shadow-card:       0 2px 12px rgba(0, 0, 0, 0.06), 0 0 1px rgba(0, 0, 0, 0.08);
  --v-shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.1), 0 0 1px rgba(184, 115, 51, 0.15);
}