/* =============================================================
   Studio Evento – Pastel Clay Design System Theme
   Soft cream canvas, oat borders, pastel swatch palette,
   playful hover animations, soft Clay shadows.
   ============================================================= */

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

:root {
  /* ── Canvas ── */
  --clay-cream: #faf9f7;
  --clay-black: #2d2b2e;
  --clay-white: #ffffff;

  /* ── Pastel Swatch Palette ── */
  --pastel-violet: #a78bfa;
  --pastel-violet-medium: #c4b5fd;
  --pastel-violet-light: #ede9fe;
  --pastel-rose: #fda4af;
  --pastel-rose-light: #ffe4e6;
  --pastel-mint: #86efac;
  --pastel-mint-light: #dcfce7;
  --pastel-sky: #7dd3fc;
  --pastel-sky-light: #e0f2fe;
  --pastel-peach: #fdba74;
  --pastel-peach-light: #fff7ed;
  --pastel-lemon: #fde68a;
  --pastel-lemon-light: #fefce8;

  /* ── Neutrals (warm) ── */
  --warm-silver: #b0aca4;
  --warm-charcoal: #6b6966;
  --dark-charcoal: #4a4845;

  /* ── Borders ── */
  --oat: #e4dfd8;
  --oat-light: #f0ece6;

  /* ── Shadows (soft violet tint) ── */
  --clay-shadow: rgba(167,139,250,0.08) 0px 2px 8px,
                 rgba(0,0,0,0.03) 0px 1px 2px;
  --clay-hover-shadow: rgba(167,139,250,0.25) -5px 5px;

  /* ── Focus ── */
  --focus-ring: #a78bfa;

  /* ── Fonts ── */
  --font-sans: 'DM Sans', Arial, sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* ── Overrides for shadcn/Tailwind vars ── */
  --se-bg-1: #faf9f7;
  --se-bg-2: #f5f3ef;
  --se-panel: #ffffff;
  --se-panel-soft: #faf9f7;
  --se-border: #e4dfd8;
  --se-text: #2d2b2e;
  --se-text-soft: #6b6966;
  --se-primary: #a78bfa;
  --se-primary-strong: #8b6cf5;
  --se-accent: #fda4af;
  --se-shadow: var(--clay-shadow);
}

/* ── Global ── */
body {
  background: var(--clay-cream) !important;
  color: var(--clay-black);
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
}

/* ── Header / Nav ── */
header {
  background: rgba(250, 249, 247, 0.92) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--oat) !important;
  box-shadow: none !important;
}

/* ── Headings ── */
h1, h2, h3, .hero-title, .section-title {
  color: var(--clay-black) !important;
  font-weight: 600;
  letter-spacing: -0.04em;
}

/* ── Body text ── */
p, span, label, .hero-description,
.text-gray-600, .text-gray-700 {
  color: var(--warm-charcoal);
}

/* ── Cards & Panels ── */
.main-container,
.section-row,
.gradient-card,
.roi-calculator,
.tab-content,
.hero-panel,
[class*='card'],
[class*='panel'] {
  border: 1px solid var(--oat) !important;
  box-shadow: var(--clay-shadow) !important;
  border-radius: 24px;
}

.hero-panel,
.gradient-card-content,
.tab-content,
.section-row,
.main-container {
  background: var(--clay-white) !important;
}

/* ── Primary CTA (Pastel Violet) ── */
.cta-primary,
button.bg-blue-600,
button[class*='bg-blue'],
.btn-primary {
  background: var(--pastel-violet) !important;
  border: none !important;
  color: var(--clay-white) !important;
  border-radius: 12px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500;
  box-shadow: var(--clay-shadow) !important;
  transition: all 0.3s ease !important;
}

.cta-primary:hover,
button.bg-blue-600:hover,
button[class*='bg-blue']:hover,
.btn-primary:hover {
  transform: translateY(-3px) rotateZ(-4deg) !important;
  box-shadow: var(--clay-hover-shadow) !important;
  background: #8b6cf5 !important;
}

/* ── Outlined CTA ── */
.cta-outlined,
.generate-doc-btn,
.btn-outline,
button.border-blue-500 {
  border: 1px solid var(--oat) !important;
  color: var(--clay-black) !important;
  background: transparent !important;
  border-radius: 12px !important;
  font-family: var(--font-sans) !important;
  font-weight: 500;
  transition: all 0.3s ease !important;
}

.cta-outlined:hover,
.generate-doc-btn:hover,
.btn-outline:hover,
button.border-blue-500:hover {
  background: var(--pastel-violet-light) !important;
  color: #7c3aed !important;
  transform: translateY(-3px) rotateZ(-4deg) !important;
  box-shadow: var(--clay-hover-shadow) !important;
}

/* ── Inputs / Forms ── */
input, textarea, select {
  border: 1px solid var(--oat) !important;
  background: var(--clay-white) !important;
  border-radius: 12px !important;
  font-family: var(--font-sans) !important;
}

input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--pastel-violet-medium) !important;
  box-shadow: none !important;
}

/* ── Tabs ── */
.tab-header,
.section-row-header {
  background: var(--clay-cream) !important;
  border-bottom: 1px solid var(--oat) !important;
}

.tab-button.active {
  color: var(--pastel-violet) !important;
  border-bottom-color: var(--pastel-violet) !important;
}

/* ── Tooltip descriptions ── */
[id^='desc-'] {
  border: 1px solid var(--oat) !important;
  background: var(--clay-white) !important;
  box-shadow: var(--clay-shadow) !important;
  border-radius: 24px !important;
}

/* ── Footer ── */
footer {
  border-radius: 40px 40px 0 0 !important;
  border-top: 1px solid var(--oat);
}

/* ── Uppercase labels ── */
.section-label,
[class*='uppercase'] {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.08px;
  color: var(--warm-silver);
}

/* ── Responsive ── */
main { position: relative; }
.page { position: relative; }

@media (max-width: 960px) {
  [id^='btn-'] {
    min-width: 100% !important;
  }
}