/* ══════════════════════════════════════════════════════════════════════
   COOPA — Design tokens
   Fonte: COOPA Design System (claude.ai/design).
   Titles: Centrale Sans Bold · Support: Atyp Display · Base: Montserrat.
   Centrale Sans & Atyp são COMERCIAIS — substituídas por Montserrat.
   Licencie as originais para produção e troque o @font-face abaixo.
   ══════════════════════════════════════════════════════════════════════ */

/* Montserrat — base oficial (geométrica, legível). Google Fonts CDN. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
  /* ── Cores · escala base da marca ─────────────────────────────────── */
  --teal-500: #35B8B1;   /* Primária / marca — accents, superfícies, identidade */
  --teal-600: #2AA39C;   /* hover em superfícies teal */
  --teal-700: #157C76;   /* Ação / profundidade — botões, links, texto de marca */
  --teal-800: #11645F;   /* pressed / acentos profundos */
  --teal-900: #0C4A46;

  --teal-100: #E4F4F3;   /* tints para superfícies suaves */
  --teal-50:  #F2FAF9;

  --green-900: #28332F;  /* superfície escura cooperativa */
  --green-800: #324039;

  /* Neutros quentes */
  --warm-100: #F4F3F1;
  --warm-200: #E7E6E3;
  --warm-300: #D8D7D4;   /* bordas, divisores, preenchimentos secundários */
  --warm-400: #BDBCB8;

  --ink-900: #242626;    /* corpo, títulos, alto contraste */
  --ink-700: #4A4D4D;
  --ink-500: #71807D;    /* texto atenuado / legendas */

  --white: #FFFFFF;

  /* Status semântico (calmo, AA sobre claro) */
  --success: #157C76;
  --warning: #B7791F;
  --danger:  #C0413B;
  --info:    #157C76;

  /* ── Aliases semânticos ───────────────────────────────────────────── */
  --color-brand: var(--teal-500);
  --color-action: var(--teal-700);
  --color-action-hover: var(--teal-800);

  --surface-page: var(--white);
  --surface-card: var(--white);
  --surface-muted: var(--warm-100);
  --surface-neutral: var(--warm-300);
  --surface-brand: var(--teal-500);
  --surface-brand-soft: var(--teal-100);
  --surface-dark: var(--green-900);

  --text-body: var(--ink-900);
  --text-muted: var(--ink-500);
  --text-on-brand: var(--white);
  --text-on-dark: var(--white);
  --text-brand: var(--teal-700);
  --text-link: var(--teal-700);

  --border-subtle: var(--warm-300);
  --border-strong: var(--warm-400);
  --border-brand: var(--teal-500);

  --focus-ring: var(--teal-700);

  /* ── Tipografia ───────────────────────────────────────────────────── */
  --font-base: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Montserrat', system-ui, sans-serif;   /* ≈ Centrale Sans */
  --font-support: 'Montserrat', system-ui, sans-serif;   /* ≈ Atyp Display */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display: 4rem;
  --fs-h1: 3rem;
  --fs-h2: 2.25rem;
  --fs-h3: 1.625rem;
  --fs-h4: 1.25rem;
  --fs-lead: 1.25rem;
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-normal: 1.55;

  --ls-tight: -0.02em;
  --ls-normal: 0;
  --ls-eyebrow: 0.16em;

  --text-display-weight: var(--fw-light);
  --text-title-weight: var(--fw-bold);

  /* ── Espaçamento (base 4px, respiro generoso) ─────────────────────── */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --container-max: 1200px;
  --container-pad: 1.5rem;
  --section-gap: var(--space-9);

  /* ── Raios & sombras ──────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-bubble-tail: 4px; /* o canto reto do balão de fala */

  --shadow-xs: 0 1px 2px rgba(36, 38, 38, 0.06);
  --shadow-sm: 0 2px 8px rgba(36, 38, 38, 0.06);
  --shadow-md: 0 8px 24px rgba(36, 38, 38, 0.08);
  --shadow-lg: 0 18px 48px rgba(36, 38, 38, 0.10);
  --shadow-brand: 0 12px 30px rgba(21, 124, 118, 0.18);

  /* ── Movimento — calmo, sem bounce ────────────────────────────────── */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-normal: 220ms;
  --dur-slow: 360ms;
}