/* ============================================================
   Theme: MODERN — Real Estate, Gym, Tech, Automotive, Studio
   Primary: Violet-600 (#7c3aed) — bold, contemporary
   Philosophy: Bold, dark-first, geometric, high-energy
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700;800&family=Inter:wght@400;500&display=swap');

:root {
  --theme: modern;

  /* Violet-600: strong on dark ✅, distinctive on light ✅
     Used by: Figma, Stripe, GitHub Copilot — signals innovation */
  --color-primary:         #7c3aed;   /* violet-600               */
  --color-primary-h:       #6d28d9;   /* violet-700 hover         */
  --color-accent:          #a78bfa;   /* violet-400 soft glow     */
  --color-secondary:       #18181b;   /* zinc-900 dark base       */

  --color-surface:         #fafafa;
  --color-surface-2:       #f4f4f5;
  --color-border:          rgba(124,58,237,0.15);
  --color-text:            #18181b;
  --color-text-muted:      #71717a;
  --color-text-on-primary: #ffffff;

  /* ── Typography — geometric, bold ── */
  --font-heading: 'DM Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  --text-hero:    clamp(3rem, 7vw, 5.5rem);
  --text-h2:      clamp(2rem, 4vw, 3.25rem);

  --weight-heading:        800;
  --letter-spacing-hero:   -0.03em;   /* tight = modern */
  --letter-spacing-label:  0.1em;

  /* ── Shape — sharp with slight softening ── */
  --radius-xs:    4px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-card:  16px;
  --radius-btn:   8px;
  --radius-image: 12px;

  /* ── Depth — glassmorphism-ready ── */
  --shadow-sm:   0 2px 8px rgba(124,58,237,0.08);
  --shadow-md:   0 8px 32px rgba(124,58,237,0.12);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.10);
  --shadow-btn:  0 4px 20px rgba(124,58,237,0.35);

  /* ── Spacing — airy but structured ── */
  --section-py:    6rem;
  --section-py-sm: 4rem;
  --container-max: 1280px;

  /* ── Button ── */
  --btn-radius:         8px;
  --btn-padding:        0.875rem 2rem;
  --btn-letter-spacing: 0.01em;
  --btn-transform:      none;
  --btn-weight:         700;

  /* ── Motion — swift, decisive ── */
  --ease-default:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 280ms;
  --duration-slow: 550ms;

  --divider-style: diagonal;
}

/* Dark mode — violet pops on dark zinc (primary use case) */
.dark {
  --color-surface:    #09090b;
  --color-surface-2:  #18181b;
  --color-text:       #fafafa;
  --color-text-muted: #a1a1aa;
  --color-border:     rgba(167,139,250,0.15);
}