/* ══════════════════════════════════════════════════════════
   Landing Design System v2 — Premium Psychology
   Playfair Display + Inter · Deep Indigo + Bronze
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Color Palette ──────────────────────────────────── */
  --landing-primary: #3b4a8a;
  --landing-primary-soft: rgba(59, 74, 138, 0.08);
  --landing-primary-glow: rgba(59, 74, 138, 0.18);
  --landing-secondary: #5b6abf;
  --landing-secondary-soft: rgba(91, 106, 191, 0.06);
  --landing-accent: #b8875a;
  --landing-accent-soft: rgba(184, 135, 90, 0.10);
  --landing-accent-glow: rgba(184, 135, 90, 0.22);
  --landing-cream: #faf8f4;
  --landing-cream-warm: #f3ede4;
  --landing-surface: rgba(255, 253, 249, 0.82);
  --landing-surface-solid: #fffdf9;
  --landing-text: #1a1a2e;
  --landing-text-secondary: #5a5a72;
  --landing-text-muted: #8888a0;
  --landing-border: rgba(59, 74, 138, 0.06);
  --landing-border-strong: rgba(59, 74, 138, 0.12);

  /* ── Glass System ───────────────────────────────────── */
  --landing-glass-bg: rgba(255, 253, 249, 0.65);
  --landing-glass-border: rgba(59, 74, 138, 0.06);
  --landing-glass-shadow: 0 4px 24px rgba(26, 26, 46, 0.04), 0 1px 4px rgba(26, 26, 46, 0.02);
  --landing-glass-shadow-hover: 0 12px 48px rgba(26, 26, 46, 0.07), 0 4px 12px rgba(26, 26, 46, 0.03);
  --landing-glass-radius: 20px;

  /* ── Shadows ────────────────────────────────────────── */
  --landing-shadow-soft: 0 4px 20px rgba(26, 26, 46, 0.03);
  --landing-shadow-medium: 0 8px 40px rgba(26, 26, 46, 0.05);
  --landing-shadow-strong: 0 16px 64px rgba(26, 26, 46, 0.08);
  --landing-shadow-glow: 0 0 60px rgba(59, 74, 138, 0.10);

  /* ── Gradients ──────────────────────────────────────── */
  --landing-gradient-primary: linear-gradient(135deg, #3b4a8a 0%, #5b6abf 100%);
  --landing-gradient-accent: linear-gradient(135deg, #b8875a 0%, #d4a574 100%);
  --landing-gradient-warm: linear-gradient(135deg, #b8875a 0%, #c9a070 100%);
  --landing-gradient-surface: linear-gradient(180deg, var(--landing-cream) 0%, var(--landing-cream-warm) 100%);
  --landing-gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.65) 0%, rgba(255,253,249,0.25) 100%);
  --landing-gradient-hero: linear-gradient(180deg, rgba(26, 26, 46, 0.92) 0%, rgba(42, 38, 68, 0.85) 40%, rgba(59, 50, 80, 0.88) 100%);

  /* ── Spacing Scale (8px base) ───────────────────────── */
  --landing-space-xs: 4px;
  --landing-space-sm: 8px;
  --landing-space-md: 16px;
  --landing-space-lg: 24px;
  --landing-space-xl: 32px;
  --landing-space-2xl: 48px;
  --landing-space-3xl: 64px;
  --landing-space-4xl: 96px;

  /* ── Radius ─────────────────────────────────────────── */
  --landing-radius-sm: 10px;
  --landing-radius-md: 14px;
  --landing-radius-lg: 20px;
  --landing-radius-xl: 28px;
  --landing-radius-pill: 100px;

  /* ── Typography ─────────────────────────────────────── */
  --landing-font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --landing-font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Reusable Glass Card ─────────────────────────────── */

.landing-glass {
  background: var(--landing-glass-bg);
  border: 1px solid var(--landing-glass-border);
  border-radius: var(--landing-glass-radius);
  box-shadow: var(--landing-glass-shadow);
}

.landing-glass:hover {
  box-shadow: var(--landing-glass-shadow-hover);
}

/* ── Reusable Glass Tag ──────────────────────────────── */

.landing-glass-tag {
  background: var(--landing-glass-bg);
  border: 1px solid var(--landing-glass-border);
  border-radius: var(--landing-radius-pill);
  box-shadow: var(--landing-shadow-soft);
}

/* ── Section Backgrounds ─────────────────────────────── */

.landing-bg-cream {
  background: var(--landing-cream);
}

.landing-bg-warm {
  background: var(--landing-cream-warm);
}

.landing-bg-gradient {
  background: var(--landing-gradient-surface);
}

/* ── Icon Container ──────────────────────────────────── */

.landing-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.landing-icon-wrap--sm {
  width: 20px;
  height: 20px;
}

.landing-icon-wrap--md {
  width: 32px;
  height: 32px;
}

.landing-icon-wrap--lg {
  width: 48px;
  height: 48px;
}

.landing-icon-wrap svg {
  width: 100%;
  height: 100%;
}