/* ============================================================
   Jaque Personal — Design Tokens
   Paleta canônica + tipografia mobile-first
   ============================================================ */

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

:root {
  /* ----- BRAND COLORS ----- */
  --jp-pink: #ff1493;          /* cor de marca, usar com moderação */
  --jp-pink-600: #e60d83;      /* hover / press */
  --jp-pink-100: #ffe1f1;      /* fundos sutis, badges */
  --jp-pink-50:  #fff4fa;      /* wash bem clarinho */

  --jp-black: #050505;         /* texto principal */
  --jp-ink:   #1a1a1a;         /* texto secundário forte */
  --jp-gray-700: #3d3d3d;      /* corpo */
  --jp-gray-500: #737373;      /* apoio */
  --jp-gray-300: #d4d4d4;      /* bordas */
  --jp-gray-200: #e8e8e8;      /* divisores */
  --jp-gray-100: #f5f5f5;      /* superfície sutil */
  --jp-gray-50:  #fafafa;      /* off-white */
  --jp-white: #ffffff;         /* fundo, espaço respirável */

  --jp-green:     #22c55e;     /* CTA principal, garantia, checkmarks */
  --jp-green-600: #16a34a;     /* hover */
  --jp-green-700: #15803d;     /* press */
  --jp-green-100: #dcfce7;     /* badges sucesso, fundo de garantia */

  --jp-warn:  #f59e0b;         /* alertas pontuais (não dominante) */
  --jp-error: #dc2626;         /* erros de form */

  /* ----- SEMANTIC ROLES ----- */
  --bg:        var(--jp-white);
  --bg-soft:   var(--jp-gray-50);
  --bg-muted:  var(--jp-gray-100);
  --bg-pink:   var(--jp-pink-50);
  --bg-dark:   var(--jp-black);

  --fg:        var(--jp-black);
  --fg-strong: var(--jp-black);
  --fg-muted:  var(--jp-gray-700);
  --fg-subtle: var(--jp-gray-500);
  --fg-on-dark:var(--jp-white);
  --fg-brand:  var(--jp-pink);

  --border:        var(--jp-gray-200);
  --border-strong: var(--jp-gray-300);

  --cta:           var(--jp-green);
  --cta-hover:     var(--jp-green-600);
  --cta-press:     var(--jp-green-700);
  --cta-fg:        var(--jp-white);

  --accent:        var(--jp-pink);
  --accent-hover:  var(--jp-pink-600);

  /* ----- TYPOGRAPHY ----- */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Mobile-first sizes */
  --fs-display: 44px;     /* hero LP mobile */
  --fs-h1:      32px;
  --fs-h2:      24px;
  --fs-h3:      20px;
  --fs-lead:    18px;     /* sub-hero, subtítulos */
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.12em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ----- SPACING (4px base) ----- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ----- RADII ----- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ----- ELEVATION ----- */
  --shadow-xs: 0 1px 2px rgba(5,5,5,0.06);
  --shadow-sm: 0 2px 6px rgba(5,5,5,0.08);
  --shadow-md: 0 8px 20px rgba(5,5,5,0.10);
  --shadow-lg: 0 16px 40px rgba(5,5,5,0.14);
  --shadow-cta:0 8px 22px rgba(34,197,94,0.35);  /* halo verde no CTA */
  --shadow-pink:0 8px 22px rgba(255,20,147,0.30);

  /* ----- LAYOUT ----- */
  --container-narrow: 640px;
  --container-base:   960px;
  --container-wide:   1200px;

  /* ----- MOTION ----- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    420ms;
}

/* Desktop scale-up (LPs ainda mobile-first, mas decks/desktop ganham folga) */
@media (min-width: 768px) {
  :root {
    --fs-display: 64px;
    --fs-h1:      48px;
    --fs-h2:      32px;
    --fs-h3:      22px;
    --fs-lead:    20px;
  }
}

/* ============================================================
   Base + Semantic Element Styles
   ============================================================ */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: var(--fs-h1);    font-weight: var(--fw-black); }
h2 { font-size: var(--fs-h2);    font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3);    font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-lead);  font-weight: var(--fw-semibold); }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-brand);
}

p { margin: 0; line-height: var(--lh-loose); color: var(--fg-muted); text-wrap: pretty; }
.lead { font-size: var(--fs-lead); color: var(--fg); }
.small { font-size: var(--fs-small); }
.micro { font-size: var(--fs-micro); color: var(--fg-subtle); }

a { color: var(--fg-brand); text-decoration: none; font-weight: var(--fw-semibold); }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }

strong, b { color: var(--fg-strong); font-weight: var(--fw-bold); }

/* ============================================================
   Component primitives — buttons, badges, cards
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.005em;
  border: none;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-cta {
  background: var(--cta); color: var(--cta-fg);
  box-shadow: var(--shadow-cta);
}
.btn-cta:hover { background: var(--cta-hover); }
.btn-cta:active { background: var(--cta-press); }

.btn-pink {
  background: var(--jp-pink); color: var(--jp-white);
  box-shadow: var(--shadow-pink);
}
.btn-pink:hover { background: var(--accent-hover); }

.btn-dark {
  background: var(--jp-black); color: var(--jp-white);
}
.btn-dark:hover { background: var(--jp-ink); }

.btn-ghost {
  background: transparent; color: var(--fg-strong);
  border: 1.5px solid var(--border-strong);
}
.btn-ghost:hover { border-color: var(--jp-black); }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.badge-pink   { background: var(--jp-pink-100); color: var(--jp-pink-600); }
.badge-green  { background: var(--jp-green-100); color: var(--jp-green-700); }
.badge-dark   { background: var(--jp-black); color: var(--jp-white); }

.card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.card-elevated { box-shadow: var(--shadow-md); border-color: transparent; }
.card-pink     { background: var(--bg-pink); border-color: var(--jp-pink-100); }

.guarantee-seal {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px;
  background: var(--jp-green-100);
  border: 1.5px solid var(--jp-green);
  border-radius: var(--radius-lg);
  color: var(--jp-green-700);
  font-weight: var(--fw-semibold);
}