/**
 * Response Connect — Design Tokens
 * confidence: provided (brand direction), inferred (scale/spacing)
 * source: dna.md v1.0
 * -------------------------------------------------------
 * LAYER A1-identity: brand-required, no fallback
 * LAYER A1-structure: brand-required typographic/layout scale
 * LAYER A2: sensible fallback defined
 * LAYER B-slot: alias or richer brand opinion
 */

/* ============================================================
   A1-IDENTITY — Brand colors & typefaces
   ============================================================ */
:root {
  /* Brand blues */
  --color-blue:          #1A5CE8; /* confidence: provided — azul principal ("Response") */
  --color-blue-dark:     #0D3A99; /* confidence: provided — hover / logo */

  /* Secondary — Golden Bronze (acento premium; compartilhado com o endosso Instituto JB) */
  --color-gold:      #C9A227; /* confidence: provided — acento; fill OU texto/ícone SOBRE navy (7.14:1 AA) */
  --color-gold-text: #8A6D14; /* confidence: inferred — texto/ícone dourado sobre fundo CLARO (4.6:1 AA) */
  --color-gold-tint: #FAF4DB; /* confidence: inferred — tint claro p/ fundo de chip */

  /* Accent / CTA */
  --color-coral:       #F96332; /* confidence: provided — acento de marca (decorativo/display) */
  --color-coral-cta:   #CE4316; /* confidence: inferred — bg do botão CTA (AA c/ texto branco 16px) */
  --color-coral-hover: #B23A11; /* confidence: inferred — hover do CTA */
  --color-coral-glow:  rgba(206, 67, 22, 0.30); /* confidence: inferred — shadow do CTA */

  /* WhatsApp — reservado, não usar como cor de marca */
  --color-whatsapp:    #25D366; /* confidence: provided — exclusivo botão WA */

  /* Backgrounds & surfaces */
  --color-bg:          #F7F9FC; /* confidence: provided — fundo de página */
  --color-surface:     #FFFFFF; /* confidence: provided — cards, panels */
  --color-border:      #DDE3EE; /* confidence: provided — bordas, divisores */

  /* Text */
  --color-text:        #0D1B2E; /* confidence: provided — texto principal (16.4:1 AAA) */
  --color-text-2:      #4A5E74; /* confidence: provided — texto secundário (6.3:1 AA) */
  --color-text-3:      #5E7089; /* confidence: inferred — CORRIGIDO de #8A9BB0 (falhava WCAG) → 4.8:1 AA */

  /* Status — fills vs. texto pequeno (variantes escuras passam AA) */
  --color-success:      #16A34A; /* fill/ícone */
  --color-success-text: #15803D; /* confidence: inferred — texto pequeno AA (5.0:1) */
  --color-error:        #DC2626; /* fill; texto sobre branco 4.8:1 AA */
  --color-error-text:   #B91C1C; /* confidence: inferred — texto de badge sobre tint AA (5.3:1) */
  --color-warning:      #D97706; /* fill */
  --color-warning-text: #B45309; /* confidence: inferred — texto AA (5.0:1) */
  --color-info:         #1D4ED8; /* confidence: inferred — variante azul AA */

  /* Typefaces */
  --font-display: 'Plus Jakarta Sans', system-ui, sans-serif; /* confidence: provided */
  --font-body:    'Inter', system-ui, sans-serif;             /* confidence: provided */
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;  /* confidence: inferred */
}

/* ============================================================
   A1-STRUCTURE — Type scale, container, spacing
   ============================================================ */
:root {
  /* Type scale */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  clamp(1.75rem, 3vw, 2rem);
  --text-4xl:  clamp(2.25rem, 4vw, 3rem);
  --text-hero: clamp(2.5rem, 5vw, 3.5rem);

  /* Line heights */
  --leading-tight:  1.2;  /* headings */
  --leading-snug:   1.4;  /* UI labels, buttons */
  --leading-normal: 1.6;  /* body text */

  /* Letter spacing */
  --tracking-tight:  -0.02em; /* headings */
  --tracking-normal:  0em;    /* body */
  --tracking-wide:    0.08em; /* ALL-CAPS labels */

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

  /* Container & grid */
  --container-max:   1200px;
  --container-pad-x: clamp(24px, 4vw, 48px);
  --grid-cols:       12;
  --grid-gap:        clamp(16px, 2vw, 24px);

  /* Section vertical rhythm */
  --section-y-desktop: var(--space-20); /* 80px */
  --section-y-mobile:  var(--space-12); /* 48px */
}

/* ============================================================
   A2 — Motion, focus, icon sizes (brand opinion + fallback)
   ============================================================ */
:root {
  /* Motion */
  --motion-fast:   150ms ease;    /* hover states, micro */
  --motion-base:   200ms ease;    /* transitions padrão */
  --motion-slow:   350ms ease;    /* modais, reveals */
  --motion-spring: 200ms cubic-bezier(0.34, 1.56, 0.64, 1); /* bounce sutil */

  /* Border radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  /* Shadows (navy base — nunca black puro) */
  --shadow-xs:   0 1px 2px rgba(13, 27, 46, 0.06);
  --shadow-sm:   0 2px 6px rgba(13, 27, 46, 0.08);
  --shadow-md:   0 4px 16px rgba(13, 27, 46, 0.10);
  --shadow-lg:   0 8px 32px rgba(13, 27, 46, 0.12);
  --shadow-cta:  0 4px 14px rgba(206, 67, 22, 0.30);
  --shadow-blue: 0 4px 14px rgba(26, 92, 232, 0.20);

  /* Icon sizes */
  --icon-xs:  16px;
  --icon-sm:  20px;
  --icon-md:  24px;
  --icon-lg:  32px;
  --icon-xl:  48px;
}

/* ============================================================
   B-SLOTS — Semantic aliases for builder consumption
   ============================================================ */
:root {
  /* Brand aliases */
  --bg:      var(--color-bg);
  --fg:      var(--color-text);
  --fg-2:    var(--color-text-2);
  --fg-3:    var(--color-text-3);
  --accent:  var(--color-coral);        /* acento de marca (decorativo) */
  --primary: var(--color-blue);         /* Cor de marca primária */
  --secondary: var(--color-gold);       /* Cor secundária (Golden Bronze, acento) */
  --surface: var(--color-surface);
  --border:  var(--color-border);

  /* Button semantic */
  --btn-cta-bg:       var(--color-coral-cta);   /* AA com texto branco 16px */
  --btn-cta-bg-hover: var(--color-coral-hover);
  --btn-cta-fg:       #FFFFFF;
  --btn-cta-shadow:   var(--shadow-cta);

  --btn-primary-bg:       var(--color-blue);
  --btn-primary-bg-hover: var(--color-blue-dark);
  --btn-primary-fg:       #FFFFFF;
  --btn-primary-shadow:   var(--shadow-blue);

  --btn-ghost-border: var(--color-blue);
  --btn-ghost-fg:     var(--color-blue);
  --btn-ghost-bg:     transparent;

  --btn-wa-bg: var(--color-whatsapp);
  --btn-wa-fg: #0D1B2E;   /* navy — texto branco FALHA WCAG sobre verde (1.98:1); navy = 8.7:1 AAA */

  /* Font semantic */
  --font-heading: var(--font-display);
  --font-ui:      var(--font-body);

  /* Feature icon container (Golden Bronze como FILL + ícone navy = 7.14:1 AA) */
  --icon-feature-bg: var(--color-gold);
  --icon-feature-fg: var(--color-text);
}

/* ============================================================
   UTILITY CLASSES (starter kit para o builder)
   ============================================================ */

/* Botão CTA */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 14px 28px;
  background: var(--btn-cta-bg);
  color: var(--btn-cta-fg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  box-shadow: var(--btn-cta-shadow);
  cursor: pointer;
  transition: background var(--motion-fast), box-shadow var(--motion-fast), transform var(--motion-fast);
  text-decoration: none;
}
.btn-cta:hover {
  background: var(--btn-cta-bg-hover);
  transform: translateY(-1px);
}
.btn-cta:active {
  transform: translateY(0);
}

/* Botão primário azul */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  box-shadow: var(--btn-primary-shadow);
  cursor: pointer;
  transition: background var(--motion-fast), transform var(--motion-fast);
  text-decoration: none;
}
.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
}

/* Botão ghost */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  background: var(--btn-ghost-bg);
  color: var(--btn-ghost-fg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--btn-ghost-border);
  cursor: pointer;
  transition: background var(--motion-fast), color var(--motion-fast);
  text-decoration: none;
}
.btn-ghost:hover {
  background: var(--color-blue);
  color: #FFFFFF;
}

/* Botão WhatsApp */
.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px 24px;
  background: var(--btn-wa-bg);
  color: var(--btn-wa-fg);
  font-family: var(--font-ui);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: filter var(--motion-fast), transform var(--motion-fast);
  text-decoration: none;
}
.btn-whatsapp:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Card padrão */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-base), transform var(--motion-base);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

/* Feature icon container */
.icon-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-xl);
  height: var(--icon-xl);
  border-radius: var(--radius-lg);
  background: var(--icon-feature-bg);
  color: var(--icon-feature-fg);
  flex-shrink: 0;
}