/* Pink Design System v2.13 (3b1dc87) — tokens + componentes de marketing (gerado de pink/design-system; não editar à mão) */
/**
 * Pink Design System — Primitive Tokens
 * Pilar 1: Tokens — camada primitiva
 *
 * Primitivos são valores brutos sem intenção.
 * NUNCA use primitivos diretamente no código de produto.
 * Use sempre tokens semânticos: var(--color-action-primary-bg-default)
 *
 * Axioma P1: Um primitivo não carrega intenção.
 * Axioma T1: ComponentToken → SemanticToken → PrimitiveToken. Nunca saltos.
 */

:root {

  /* ─────────────────────────────────────────────
   * PINK (marca)
   * ───────────────────────────────────────────── */

  --primitive-pink-50:   #FFF0F7;
  --primitive-pink-100:  #FDEEF5;  /* pink-tint: fundos e badges */
  --primitive-pink-200:  #FBC5DC;
  --primitive-pink-300:  #F78DB8;
  --primitive-pink-400:  #F05090;
  --primitive-pink-500:  #D5156B;  /* pink canônico — usar via semantic */
  --primitive-pink-600:  #B21373;
  --primitive-pink-700:  #8E0F5A;
  --primitive-pink-800:  #6A0B43;
  --primitive-pink-900:  #47072D;

  /* Gradiente CTA canônico */
  --primitive-pink-gradient: linear-gradient(154deg, #EB0775 44%, #B21373);


  /* ─────────────────────────────────────────────
   * BLUE (chat / ação de mensageria)
   * ───────────────────────────────────────────── */

  --primitive-blue-50:   #EFF6FF;
  --primitive-blue-100:  #DBEAFE;
  --primitive-blue-200:  #BFDBFE;
  --primitive-blue-300:  #93C5FD;
  --primitive-blue-400:  #60A5FA;
  --primitive-blue-500:  #3B82F6;
  --primitive-blue-600:  #1D74F5;  /* azul chat — ação primária dentro de mensageria */
  --primitive-blue-700:  #1560CC;
  --primitive-blue-800:  #1E40AF;
  --primitive-blue-900:  #1E3A8A;


  /* ─────────────────────────────────────────────
   * DARK BLUE (sidebar)
   * ───────────────────────────────────────────── */

  --primitive-navy-900:  #04436a;  /* sidebar produto v2 */
  --primitive-navy-950:  #062c47;  /* trilha do tema navy (v2.12) */
  --primitive-navy-975:  #041e31;  /* canvas do tema navy (v2.12) */
  --primitive-lavender-50: #F2EFFF;              /* v2.13: topo do gradiente da arte do login */
  --primitive-orchid-200-alpha-5: rgba(235, 197, 224, 0.05);  /* v2.13: base do gradiente da arte do login */


  /* ─────────────────────────────────────────────
   * NEUTRAL (cinzas)
   * ───────────────────────────────────────────── */

  --primitive-gray-25:   #FCFCFD;
  --primitive-gray-50:   #F9FAFB;
  --primitive-gray-100:  #F2F4F7;
  --primitive-gray-150:  #F2F3F5;  /* component bg (heritage v1) */
  --primitive-gray-200:  #EAECF0;
  --primitive-gray-300:  #D0D5DD;
  --primitive-gray-400:  #98A2B3;
  --primitive-gray-500:  #667085;
  --primitive-gray-600:  #475467;
  --primitive-gray-700:  #344054;
  --primitive-gray-800:  #1D2939;
  --primitive-gray-900:  #101828;


  /* ─────────────────────────────────────────────
   * GREEN (sucesso / WhatsApp)
   * ───────────────────────────────────────────── */

  --primitive-green-50:  #ECFDF5;
  --primitive-green-100: #D1FAE5;
  --primitive-green-200: #A7F3D0;
  --primitive-green-300: #6EE7B7;
  --primitive-green-400: #34D399;
  --primitive-green-500: #25D366;  /* WhatsApp green canônico */
  --primitive-green-600: #059669;
  --primitive-green-700: #047857;
  --primitive-green-800: #065F46;
  --primitive-green-900: #064E3B;


  /* ─────────────────────────────────────────────
   * RED (erro)
   * ───────────────────────────────────────────── */

  --primitive-red-50:    #FFF1F2;
  --primitive-red-100:   #FFE4E6;
  --primitive-red-200:   #FECDD3;
  --primitive-red-300:   #FDA29B;
  --primitive-red-400:   #F97066;
  --primitive-red-500:   #F04438;
  --primitive-red-600:   #D92D20;
  --primitive-red-700:   #C01048;
  --primitive-red-800:   #881337;
  --primitive-red-900:   #7A271A;


  /* ─────────────────────────────────────────────
   * AMBER (warning / marketing badge)
   * ───────────────────────────────────────────── */

  --primitive-amber-50:  #FFFBEB;
  --primitive-amber-100: #FEF3C7;
  --primitive-amber-200: #FDE68A;
  --primitive-amber-300: #FCD34D;
  --primitive-amber-400: #FBBF24;
  --primitive-amber-500: #F59E0B;
  --primitive-amber-600: #D97706;
  --primitive-amber-700: #92400E;


  /* ─────────────────────────────────────────────
   * TEAL (page bg produto)
   * ───────────────────────────────────────────── */

  --primitive-teal-25:   #F3FAFB;  /* fundo de página produto */
  --primitive-teal-50:   #E6F7F8;


  /* ─────────────────────────────────────────────
   * WHITE / BLACK
   * ───────────────────────────────────────────── */

  --primitive-white:     #FFFFFF;
  --primitive-black:     #000000;


  /* ─────────────────────────────────────────────
   * CANAL (cores externas imutáveis)
   * Axioma C1: Cores de Channel não variam por contexto.
   * ───────────────────────────────────────────── */

  --primitive-channel-whatsapp:    #25D366;
  --primitive-channel-instagram:   #E1306C;
  --primitive-channel-facebook:    #1877F2;
  --primitive-channel-blue-com:    #36BFFA;   /* Blue (Pink) */
  --primitive-channel-partner-purple: #9441BD;
  --primitive-channel-partner-blue:   #628EA3;

  /* WhatsApp UI */
  --primitive-wa-bg-chat:    #EFEAE2;
  --primitive-wa-bg-bubble:  #DCF8C6;
  --primitive-wa-text:       #1D1D1D;
  --primitive-wa-time:       #6B7B6F;
  --primitive-wa-btn-text:   #1D74F5;
  --primitive-wa-btn-border: #E9E9E9;


  /* ─────────────────────────────────────────────
   * TIPOGRAFIA — escala de tamanhos
   * ───────────────────────────────────────────── */

  --primitive-font-size-10:  10px;
  --primitive-font-size-12:  12px;
  --primitive-font-size-14:  14px;
  --primitive-font-size-16:  16px;
  --primitive-font-size-18:  18px;
  --primitive-font-size-20:  20px;
  --primitive-font-size-24:  24px;
  --primitive-font-size-30:  30px;
  --primitive-font-size-36:  36px;
  --primitive-font-size-40:  40px;
  --primitive-font-size-48:  48px;
  --primitive-font-size-56:  56px;

  --primitive-font-weight-400: 400;
  --primitive-font-weight-600: 600;
  --primitive-font-weight-700: 700;
  --primitive-font-weight-800: 800;

  --primitive-line-height-tight:  1.2;
  --primitive-line-height-snug:   1.4;
  --primitive-line-height-normal: 1.5;
  --primitive-line-height-loose:  1.7;


  /* ─────────────────────────────────────────────
   * ESPAÇAMENTO — escala base 4px
   * ───────────────────────────────────────────── */

  --primitive-space-1:   4px;
  --primitive-space-2:   8px;
  --primitive-space-3:   12px;
  --primitive-space-4:   16px;
  --primitive-space-5:   20px;
  --primitive-space-6:   24px;
  --primitive-space-8:   32px;
  --primitive-space-10:  40px;
  --primitive-space-12:  48px;
  --primitive-space-16:  64px;
  --primitive-space-20:  80px;
  --primitive-space-24:  96px;
  --primitive-space-32:  128px;


  /* ─────────────────────────────────────────────
   * RADIUS
   * ───────────────────────────────────────────── */

  --primitive-radius-2:   2px;
  --primitive-radius-4:   4px;
  --primitive-radius-6:   6px;
  --primitive-radius-8:   8px;
  --primitive-radius-10:  10px;
  --primitive-radius-12:  12px;
  --primitive-radius-14:  14px;
  --primitive-radius-20:  20px;
  --primitive-radius-32:  32px;
  --primitive-radius-full: 9999px;


  /* ─────────────────────────────────────────────
   * TAG (matizes de tag/chip — 10 canônicos)
   * 100 = fundo · 200 = borda · 700 = tom médio · 800 = texto.
   * 100/800 são os TAG_COLORS do produto (components/tags); 200/700
   * completam a escala de cada matiz. Os 15 matizes extras do Twenty não
   * têm primitivo: são aliases semânticos (semantic.css, bloco TAG).
   * ───────────────────────────────────────────── */

  --primitive-tag-gray-100:      #F2F3F5;  --primitive-tag-gray-200:      #E4E7EC;  --primitive-tag-gray-700:      #667085;  --primitive-tag-gray-800:      #475467;
  --primitive-tag-pink-100:      #FCCEE6;  --primitive-tag-pink-200:      #F7A6CC;  --primitive-tag-pink-700:      #C11574;  --primitive-tag-pink-800:      #851642;
  --primitive-tag-red-100:       #FECDCA;  --primitive-tag-red-200:       #FDA29B;  --primitive-tag-red-700:       #B42318;  --primitive-tag-red-800:       #7A271A;
  --primitive-tag-orange-100:    #FDDCAB;  --primitive-tag-orange-200:    #FEB273;  --primitive-tag-orange-700:    #B93815;  --primitive-tag-orange-800:    #7E2410;
  --primitive-tag-yellow-100:    #FEF0C7;  --primitive-tag-yellow-200:    #FEDF89;  --primitive-tag-yellow-700:    #B54708;  --primitive-tag-yellow-800:    #93370D;
  --primitive-tag-green-100:     #D1FADF;  --primitive-tag-green-200:     #A6F4C5;  --primitive-tag-green-700:     #027A48;  --primitive-tag-green-800:     #054F31;
  --primitive-tag-turquoise-100: #A0EBCB;  --primitive-tag-turquoise-200: #6CD9B0;  --primitive-tag-turquoise-700: #107569;  --primitive-tag-turquoise-800: #1E4534;
  --primitive-tag-sky-100:       #E0F2FE;  --primitive-tag-sky-200:       #B9E6FE;  --primitive-tag-sky-700:       #026AA2;  --primitive-tag-sky-800:       #0B4A6F;
  --primitive-tag-blue-100:      #D1E9FF;  --primitive-tag-blue-200:      #B2DDFF;  --primitive-tag-blue-700:      #175CD3;  --primitive-tag-blue-800:      #194185;
  --primitive-tag-purple-100:    #EDE9FE;  --primitive-tag-purple-200:    #DDD6FE;  --primitive-tag-purple-700:    #6927DA;  --primitive-tag-purple-800:    #361884;


  /* ─────────────────────────────────────────────
   * SOMBRA
   * ───────────────────────────────────────────── */

  --primitive-shadow-xs:      0 1px 2px rgba(0, 0, 0, 0.04);
  --primitive-shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.06);
  --primitive-shadow-md:      0 4px 16px rgba(0, 0, 0, 0.08);
  --primitive-shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.10);
  --primitive-shadow-xl:      0 20px 60px rgba(0, 0, 0, 0.20);
  /* camadas finas (r6 lote 0): sombra curta + halo, para overlay pequeno; e lateral, para painel */
  --primitive-shadow-layered-md: 0 8px 24px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06);
  --primitive-shadow-left-lg:    -12px 0 40px rgba(16, 24, 40, 0.14);

  /* Pink-tinted (produto) */
  --primitive-shadow-pink-sm: 0 4px 12px rgba(213, 21, 107, 0.20);
  --primitive-shadow-pink-md: 0 8px 20px rgba(213, 21, 107, 0.32);
  --primitive-shadow-pink-lg: 0 8px 48px rgba(213, 21, 107, 0.09);
  --primitive-shadow-pink-xl: 0 12px 28px rgba(213, 21, 107, 0.40);


  /* ─────────────────────────────────────────────
   * TRANSPARÊNCIA
   * ───────────────────────────────────────────── */

  --primitive-alpha-5:   rgba(0, 0, 0, 0.05);
  --primitive-alpha-10:  rgba(0, 0, 0, 0.10);
  --primitive-alpha-15:  rgba(0, 0, 0, 0.15);
  --primitive-alpha-48:  rgba(0, 0, 0, 0.48);
  --primitive-alpha-50:  rgba(0, 0, 0, 0.50);

  --primitive-white-10:  rgba(255, 255, 255, 0.10);
  --primitive-white-30:  rgba(255, 255, 255, 0.30);
  --primitive-white-60:  rgba(255, 255, 255, 0.60);
  --primitive-white-88:  rgba(255, 255, 255, 0.88);


  /* ─────────────────────────────────────────────
   * DURAÇÃO DE ANIMAÇÃO
   * ───────────────────────────────────────────── */

  --primitive-duration-100: 100ms;
  --primitive-duration-150: 150ms;
  --primitive-duration-200: 200ms;
  --primitive-duration-300: 300ms;
  --primitive-duration-350: 350ms;
  --primitive-duration-500: 500ms;
  --primitive-duration-1500: 1500ms;  /* ciclo do shimmer de skeleton */

  --primitive-easing-linear: linear;
  --primitive-easing-ease:   ease;
  --primitive-easing-spring: cubic-bezier(0.4, 0, 0.2, 1);
  --primitive-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);   /* entra rápido, assenta devagar */
  --primitive-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);   /* sai acelerando */

}


/* ═══════════════════════════════════════════════════════════════
 * PRIMITIVOS DO CATÁLOGO CHAT (v2.11.0 — demo-chat.html incorporado ao DS)
 * Valores brutos que a tela de chat (direção v2) usava e que ainda não tinham
 * primitivo. Só entra aqui o valor que NÃO existia acima — nada duplicado.
 * Duração, curva, camada, tag e avatar NÃO têm primitivo novo: leem os da v2.1–2.9
 * (--primitive-duration-*, --primitive-easing-*, --z-*, --primitive-tag-*).
 * Nunca usar direto: o código usa os semânticos correspondentes em semantic.css.
 * ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Neutros adicionais (cinzas do produto meteor) ── */
  --primitive-gray-175:  #F0F2F5;  /* canvas do app de chat */
  --primitive-gray-210:  #E1E5E8;  /* divisor (header/user-info) */
  --primitive-gray-225:  #E5E7EB;  /* borda da pílula de ações */
  --primitive-gray-250:  #E4E7EC;  /* hover forte */
  --primitive-gray-310:  #C9CDD5;  /* waveform de áudio */
  --primitive-gray-320:  #B0B7C3;  /* placeholder da busca */
  --primitive-gray-350:  #9EA2A8;  /* timestamp / placeholder do composer */

  --primitive-neutral-100: #F4F4F4;  /* hover de item de conversa */
  --primitive-neutral-300: #CCCCCC;  /* linha do divisor de data */
  --primitive-neutral-750: #3B3B3B;  /* texto de menu do contextual-bar */
  --primitive-neutral-800: #343434;  /* nome no user-info */
  --primitive-neutral-850: #333333;  /* label do divisor de data */

  /* ── Pink / red / indigo adicionais ── */
  --primitive-pink-110:  #FFE8F0;  /* bubble própria */
  --primitive-pink-650:  #B30F58;  /* play do áudio em bubble própria */
  --primitive-red-450:   #E53935;  /* encerrar atendimento */
  --primitive-indigo-50: #EEF2FF;  /* ícone de documento */

  /* ── Tons pastéis do avatar (hash determinístico do nome — comportamento.assign.avatar-tone).
        Lidos por --color-avatar-bg-<tom> / --color-avatar-text-<tom> (taxonomia do avatar v2.4). ── */
  --primitive-avatar-coral-bg:    #FECFCB;  --primitive-avatar-coral-fg:    #C0504D;
  --primitive-avatar-yellow-bg:   #FEF0A5;  --primitive-avatar-yellow-fg:   #8A7A2A;
  --primitive-avatar-sage-bg:     #C8EAD0;  --primitive-avatar-sage-fg:     #3E7A52;
  --primitive-avatar-lavender-bg: #D5D0FE;  --primitive-avatar-lavender-fg: #4840B8;
  --primitive-avatar-sky-bg:      #C2E5FD;  --primitive-avatar-sky-fg:      #1D74A5;
  --primitive-avatar-peach-bg:    #FFD9B4;  --primitive-avatar-peach-fg:    #A04000;
  --primitive-avatar-mint-bg:     #B8F0E6;  --primitive-avatar-mint-fg:     #0F7B6C;
  --primitive-avatar-rose-bg:     #FFD6E7;  --primitive-avatar-rose-fg:     #9B1B5A;
  --primitive-avatar-lilac-bg:    #E8D5FE;  --primitive-avatar-lilac-fg:    #6B21A8;
  --primitive-avatar-amber-bg:    #FCE4C5;  --primitive-avatar-amber-fg:    #8B4513;

  /* ── Transparências adicionais ── */
  --primitive-alpha-30:  rgba(0, 0, 0, 0.30);
  --primitive-alpha-38:  rgba(0, 0, 0, 0.38);
  --primitive-white-20:  rgba(255, 255, 255, 0.20);
  --primitive-white-35:  rgba(255, 255, 255, 0.35);
  --primitive-white-65:  rgba(255, 255, 255, 0.65);
  --primitive-white-72:  rgba(255, 255, 255, 0.72);
  --primitive-white-16:  rgba(255, 255, 255, 0.16);  /* divisor sobre a trilha navy (v2.12) */
  --primitive-white-64:  rgba(255, 255, 255, 0.64);  /* texto apagado sobre a trilha navy (v2.12) */
  --primitive-white-82:  rgba(255, 255, 255, 0.82);  /* vidro claro sobre navy (v2.12) */
  --primitive-white-92:  rgba(255, 255, 255, 0.92);  /* texto sobre a trilha navy (v2.12) */
  --primitive-pink-alpha-35:     rgba(213, 21, 107, 0.35);
  --primitive-pink-alpha-40:     rgba(213, 21, 107, 0.40);
  --primitive-pink-110-alpha-65: rgba(255, 232, 240, 0.65);

  /* ── Sombras adicionais ── */
  --primitive-shadow-float:        0 2px 10px rgba(0, 0, 0, 0.10);
  --primitive-shadow-float-strong: 0 2px 10px rgba(0, 0, 0, 0.12);
  --primitive-shadow-pill:         0 2px 8px rgba(0, 0, 0, 0.10);
  --primitive-shadow-avatar-frame: -1px 5px 7px -5px rgba(91, 107, 135, 0.60);

  /* ── Blur ── */
  --primitive-blur-16:   16px;

  /* ── Radius adicionais ── */
  --primitive-radius-16:     16px;
  --primitive-radius-17:     17px;
  --primitive-radius-18:     18px;
  --primitive-radius-24:     24px;

  /* ── Tipografia adicional ── */
  --primitive-font-size-11:     11px;
  --primitive-font-size-13:     13px;
  --primitive-font-weight-500:  500;
  --primitive-line-height-20px: 20px;

  /* ── Espaçamento — escala fina (fora da base 4px; herdada do meteor — NÃO normalizar) ── */
  --primitive-space-fine-1:   1px;
  --primitive-space-fine-2:   2px;
  --primitive-space-fine-3:   3px;
  --primitive-space-fine-5:   5px;
  --primitive-space-fine-6:   6px;
  --primitive-space-fine-7:   7px;
  --primitive-space-fine-10:  10px;
  --primitive-space-fine-11:  11px;
  --primitive-space-fine-13:  13px;
  --primitive-space-fine-14:  14px;
  --primitive-space-fine-18:  18px;

  /* ── Duração adicional (degraus que a escala --motion-duration-* da v2.1 não tinha) ── */
  --primitive-duration-250: 250ms;
  --primitive-duration-400: 400ms;

  /* ── Paleta fechada do catálogo chat — valores que eram hex inline no demo-chat
        (departamentos, ícones do menu contextual). Só via semantic: --color-dept-*,
        --color-menu-icon-*. Cor nova entra por PR no DS, nunca inline. ── */
  --primitive-indigo-500:  #6366F1;
  --primitive-sky-400:     #5AC8FA;
  --primitive-sky-500:     #0EA5E9;
  --primitive-green-650:   #16A34A;
  --primitive-slate-900:   #0F172A;
  --primitive-pink-450:    #E94599;
  --primitive-steel-300:   #A1C3D3;
  --primitive-purple-500:  #9554A9;
  --primitive-blue-350:    #53B1FD;
  --primitive-blue-650:    #3179BA;
  --primitive-amber-450:   #FFC107;
  --primitive-coral-400:   #FF8364;

}
/**
 * Pink Design System — Semantic Tokens
 * Pilar 1: Tokens — camada semântica
 *
 * Nomenclatura: color.namespace.categoria.propriedade.estado
 * CSS var: dots → hífens
 *
 * Nunca use primitivos diretamente no código de produto.
 * Sempre use tokens semânticos ou de componente.
 *
 * Contextos:
 *   :root              → produto Pink v2 (app, admin, forms)
 *   .ctx-marketing     → site marketing (pinkapp.com / Webflow)
 *   .ctx-ops           → mesa de operação (densidade, mono, tabular)
 *
 * Famílias de r6 lote 0 (2026-10-16): ELEVATION (--z-*), MOTION
 * (--motion-*, com --transition-* como alias composto e redução de movimento),
 * SIZE (--size-*), TAG (--color-tag-*), e os avulsos de overlay fino
 * (--shadow-popover/-panel/-focus-ring, skeleton, tooltip). Todos leem
 * primitivos (Axioma T1) — exceto z e size, que são escalas ordinais/medidas
 * de layout sem primitivo (como --spacing-layout-*).
 *
 * Dentro do produto, dois registros de ação coexistem:
 *   color.action.primary.*  →  pink (#D5156B) — CTAs, destaques
 *   color.action.chat.*     →  azul (#1d74f5) — UI de chat, links inline
 *
 * Fonte: varredura pinkapp.com + inspeção CSS Webflow 2026-05-31
 */

:root {

  /* ─────────────────────────────────────────────
   * COLOR — ACTION
   * Elementos interativos: botões, links
   * ───────────────────────────────────────────── */

  /* Primary CTA (pink gradient) */
  --color-action-primary-bg-default:    linear-gradient(154deg, #EB0775 44%, #B21373);
  --color-action-primary-bg-hover:      linear-gradient(154deg, #D5156B 44%, #A01060);
  --color-action-primary-text-default:  #FFFFFF;
  --color-action-primary-shadow-default: 0 8px 20px rgba(213, 21, 107, 0.32);
  --color-action-primary-shadow-hover:  0 12px 28px rgba(213, 21, 107, 0.40);

  /* Secondary / Outline */
  --color-action-secondary-bg-default:  #FFFFFF;
  --color-action-secondary-bg-hover:    #F9FAFB;
  --color-action-secondary-border-default: #D0D5DD;
  --color-action-secondary-border-hover:   #98A2B3;
  --color-action-secondary-text-default:   #344054;

  /* WhatsApp — o verde da marca fica; o texto é escuro (r6 lote 6, revisão): branco sobre #25D366 dá
     1.98:1 (2.43:1 no hover) e reprova AA. Gray 900 dá 8.9:1 em repouso e 7.3:1 no hover */
  --color-action-whatsapp-bg-default:   #25D366;
  --color-action-whatsapp-bg-hover:     #1EBF5A;
  --color-action-whatsapp-text-default: var(--primitive-gray-900);

  /* Danger — ação destrutiva confirmada (r6 lote 2: confirm-dialog.danger; o ALERT do PinkModal já era #D92D20) */
  --color-action-danger-bg-default:     var(--primitive-red-600);
  --color-action-danger-bg-hover:       var(--primitive-red-700);
  --color-action-danger-text-default:   var(--color-text-inverted);

  /* Success — ação que conclui/aprova (r6 lote 6: button.success). Green 700: o 600 dá 3.8:1 com branco */
  --color-action-success-bg-default:    var(--primitive-green-700);
  --color-action-success-bg-hover:      var(--primitive-green-800);
  --color-action-success-text-default:  var(--color-text-inverted);

  /* Soft — ação de peso médio, fundo tingido de marca (r6 lote 6: button.soft). 4.6:1 em repouso */
  --color-action-soft-bg-default:       var(--primitive-pink-50);
  --color-action-soft-bg-hover:         var(--primitive-pink-200);
  --color-action-soft-text-default:     var(--primitive-pink-500);
  --color-action-soft-text-hover:       var(--primitive-pink-700);

  /* Link (produto/forms — pink) */
  --color-action-link-text-default:     #D5156B;
  --color-action-link-text-hover:       #B21373;

  /* Chat UI — ações dentro da interface de mensagens (azul, herança v1) */
  --color-action-chat-bg-default:       #1d74f5;
  --color-action-chat-bg-hover:         #1560cc;
  --color-action-chat-text-default:     #FFFFFF;
  --color-action-link-text-chat:        #1d74f5;
  --color-action-selection-bg:          #89defe;
  --color-action-selection-text:        #02acec;
  --color-action-ghost-border-default:  #cecece;  /* check cinza = entregue */

  /* Solid pink (sem gradiente — para pequenos elementos) */
  --color-action-primary-bg-solid:      #D5156B;


  /* ─────────────────────────────────────────────
   * COLOR — FEEDBACK
   * Status: sucesso, erro, alerta, informação
   * ───────────────────────────────────────────── */

  /* Success */
  --color-feedback-success-bg-subtle:   #ECFDF5;
  --color-feedback-success-bg-strong:   #D1FAE5;
  --color-feedback-success-text-default: #047857;
  --color-feedback-success-text-strong:  #065F46;
  --color-feedback-success-border:      #A7F3D0;

  /* Error */
  --color-feedback-error-bg-subtle:     #FFF1F2;
  --color-feedback-error-bg-strong:     #FECDD3;
  --color-feedback-error-text-default:  #C01048;
  --color-feedback-error-text-strong:   #881337;
  --color-feedback-error-border:        #FECDD3;

  /* Warning */
  --color-feedback-warning-bg-subtle:   #FFFBEB;
  --color-feedback-warning-bg-strong:   #FEF3C7;
  --color-feedback-warning-text-default: #92400E;
  --color-feedback-warning-border:      #FDE68A;

  /* Info */
  --color-feedback-info-bg-subtle:      #EFF8FF;
  --color-feedback-info-text-default:   #1D4ED8;
  --color-feedback-info-border:         #BFDBFE;

  /* Rate limit / Blocked */
  /* Unknown / Stale (08-23, plano de alertas fase 10): ERRO ≠ VAZIO, STALE ≠ ATUAL, UNKNOWN ≠ OK.
     unknown = "não consegui ler" (fonte fora) — âmbar neutro, nunca verde; stale = dado com idade
     acima do contrato — cinza-quente com borda tracejada. Estado que a tela NÃO pode pintar de ok. */
  --color-feedback-unknown-bg-subtle:   #FFF7ED;
  --color-feedback-unknown-bg-strong:   #FFEDD5;
  --color-feedback-unknown-text-default: #9A3412;
  --color-feedback-unknown-border:      #FDBA74;
  --color-feedback-stale-bg-subtle:     #F5F5F4;
  --color-feedback-stale-text-default:  #57534E;
  --color-feedback-stale-border:        #D6D3D1;

  --color-feedback-blocked-bg-subtle:   #FED7AA;
  --color-feedback-blocked-text-default: #C2410C;
  --color-feedback-blocked-border:      #FDBA74;


  /* ─────────────────────────────────────────────
   * COLOR — SURFACE
   * Fundos: página, card, overlay, input
   * ───────────────────────────────────────────── */

  --color-surface-page-default:         #F3FAFB;  /* fundo de páginas */
  --color-surface-page-subtle:          #f4f4f4;  /* fundo alternado (chat) */
  --color-surface-card-default:         #FFFFFF;  /* fundo de cards */
  --color-surface-card-marketing:       #FFFFFF;  /* card marketing (mesmo por ora) */
  --color-surface-component-default:    #f2f3f5;  /* fundo de componentes neutros */
  --color-surface-overlay-default:      rgba(0, 0, 0, 0.48);
  --color-surface-overlay-subtle:       rgba(15, 34, 0, 0.05);
  --color-surface-overlay-heavy:        rgba(17, 12, 12, 0.50);
  --color-surface-input-default:        #FFFFFF;
  --color-surface-hover-default:        #F9FAFB;
  --color-surface-auth-photo:           linear-gradient(160deg, #F5F0FF 0%, #FDE0F0 100%);
  --color-surface-auth-page:            #F3FAFB;
  --color-surface-sidebar-default:      #04436a;  /* sidebar produto v2 */
  /* Sobre a sidebar navy (r6 lote 6: sidebar.dark) — texto 10.4:1, apagado 4.8:1 */
  --color-surface-sidebar-hover:        var(--primitive-white-10);
  --color-text-sidebar-default:         var(--color-text-inverted);
  --color-text-sidebar-muted:           var(--primitive-white-60);

  /* Skeleton — placeholder de carregamento (base + faixa do shimmer) */
  --color-surface-skeleton-base:        var(--primitive-gray-100);
  --color-surface-skeleton-highlight:   var(--primitive-gray-200);

  /* Tooltip — superfície INVERSA: escura sobre o produto claro */
  --color-surface-tooltip:              var(--primitive-gray-900);

  /* Avatar — iniciais sobre o matiz rosa da tag; o anel separa avatares empilhados (r6 lote 3, fecha D05) */
  --color-avatar-bg-default:            var(--color-tag-pink-bg);
  --color-avatar-text-default:          var(--color-tag-pink-fg);
  --color-avatar-bg-neutral:            var(--color-surface-component-default);  /* foto, canal, "+N" */
  --color-avatar-ring:                  var(--color-surface-card-default);

  /* Controles marcados — checkbox/rádio marcados e a opção escolhida (r6 lote 4) */
  --color-control-bg-checked:           var(--primitive-pink-500);   /* preenchimento do checkbox/rádio marcado */
  --color-control-mark:                 var(--color-text-inverted);  /* o ✓ / o traço / o ponto por cima */
  --color-control-track-off:            var(--primitive-gray-100);   /* trilho do toggle desligado (v2.13) */
  --color-control-bg-checked-disabled:  var(--primitive-pink-200);   /* toggle ligado e desabilitado (v2.13) */
  --color-surface-selected:             var(--primitive-pink-50);    /* fundo da opção escolhida (radio card) */

  /* Marketing sections */
  --color-surface-marketing-subtle:     #F3FAFB;
  --color-surface-marketing-hero:       linear-gradient(135deg, #DCE8FF, #FFD6EA);


  /* ─────────────────────────────────────────────
   * COLOR — BORDER
   * Bordas e divisores
   * ───────────────────────────────────────────── */

  --color-border-default:               #E4E7EC;
  --color-border-subtle:                #F2F4F7;
  --color-border-strong:                #D0D5DD;
  --color-border-input-default:         #D0D5DD;
  --color-border-input-focus:           #D5156B;
  --color-border-input-hover:           var(--primitive-gray-400);   /* v2.13: o hover usava --color-border-strong, igual ao default — invisível */
  --color-border-input-error:           #FDA29B;
  --color-border-card:                  transparent; /* cards usam shadow, não border */
  --color-border-focus:                 var(--color-border-input-focus); /* foco de qualquer interativo, não só input */


  /* ─────────────────────────────────────────────
   * COLOR — TEXT
   * Toda tipografia
   * ───────────────────────────────────────────── */

  --color-text-headline:                #101828;
  --color-text-body-default:            #1D2939;
  --color-text-body-secondary:          #667085;
  --color-text-muted:                   #98A2B3;
  --color-text-label:                   #344054;
  --color-text-inverted:                #FFFFFF;
  --color-text-inverted-subtle:         rgba(255, 255, 255, 0.60); /* sobre fundos escuros */
  --color-text-brand:                   #D5156B;
  --color-text-link-default:            #D5156B;
  --color-text-placeholder:             #98A2B3;
  --color-text-tooltip:                 var(--primitive-white);  /* sobre --color-surface-tooltip */


  /* ─────────────────────────────────────────────
   * COLOR — CHANNEL
   * Canais de comunicação
   * ───────────────────────────────────────────── */

  --color-channel-whatsapp:             #25D366;
  --color-channel-blue-com:             #36BFFA;
  --color-channel-instagram:            #E1306C;  /* simplificado — prod usa gradiente */
  --color-channel-partner-purple:       #9441BD;
  --color-channel-partner-blue:         #628EA3;
  --color-channel-link:                 #36BFFA;


  /* ─────────────────────────────────────────────
   * SPACING
   * Espaçamentos de layout e componente
   * ───────────────────────────────────────────── */

  /* Layout */
  --spacing-layout-gap-sm:              48px;
  --spacing-layout-gap-md:              80px;
  --spacing-layout-gap-lg:              128px;
  --spacing-layout-container-sm:        45rem;
  --spacing-layout-container-md:        64rem;
  --spacing-layout-container-lg:        76rem;

  /* Componente interno */
  --spacing-component-padding-xs:       8px;
  --spacing-component-padding-sm:       12px;
  --spacing-component-padding-md:       16px;
  --spacing-component-padding-lg:       24px;
  --spacing-component-gap-xs:           4px;
  --spacing-component-gap-sm:           8px;
  --spacing-component-gap-md:           12px;
  --spacing-component-gap-lg:           16px;

  /* Painéis e cards */
  --spacing-panel-padding-default:      24px;
  --spacing-panel-padding-lg:           52px;
  --spacing-panel-gap:                  16px;


  /* ─────────────────────────────────────────────
   * RADIUS
   * Arredondamentos
   * ───────────────────────────────────────────── */

  --radius-component-default:           14px;
  --radius-component-sm:                6px;
  --radius-component-md:                10px;
  --radius-component-pill:              99px;
  --radius-card-default:                32px;
  --radius-card-sm:                     20px;
  --radius-avatar:                      14px;
  --radius-badge:                       99px;
  --radius-panel-default:               32px;
  --radius-tooltip:                     var(--primitive-radius-6);


  /* ─────────────────────────────────────────────
   * SHADOW
   * Elevação
   * ───────────────────────────────────────────── */

  --shadow-card-default:                0 8px 48px rgba(213, 21, 107, 0.09);
  --shadow-button-primary:              0 8px 20px rgba(213, 21, 107, 0.32);
  --shadow-button-primary-hover:        0 12px 28px rgba(213, 21, 107, 0.40);
  --shadow-overlay:                     0 20px 60px rgba(0, 0, 0, 0.20);
  --shadow-sm:                          0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-xs:                          0 1px 2px rgba(0, 0, 0, 0.04);
  /* overlay fino (r6 lote 0): dropdown, tooltip, command-menu ficam em
     --shadow-popover; o painel lateral projeta para a esquerda (--shadow-panel). */
  --shadow-popover:                     var(--primitive-shadow-layered-md);
  --shadow-panel:                       var(--primitive-shadow-left-lg);
  --shadow-focus-ring:                  0 0 0 3px color-mix(in srgb, var(--color-border-focus) 22%, transparent);


  /* ─────────────────────────────────────────────
   * FONT
   * Tipografia
   * ───────────────────────────────────────────── */

  --font-family-app:                    'Nunito', Arial, Helvetica, sans-serif;
  --font-family-system:                 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-family-marketing:              'Space Grotesk', 'Nunito', sans-serif;
  --font-family-mono:                   'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --font-size-xs:                       10px;
  --font-size-sm:                       12px;
  --font-size-md:                       14px;
  --font-size-lg:                       16px;
  --font-size-xl:                       20px;
  --font-size-2xl:                      24px;
  --font-size-3xl:                      30px;
  --font-size-4xl:                      40px;

  --font-weight-regular:                400;
  --font-weight-semibold:               600;
  --font-weight-bold:                   700;
  --font-weight-extrabold:              800;

  /* Aliases semânticos */
  --font-heading-sm:                    var(--font-size-xl);   /* 20px */
  --font-heading-md:                    var(--font-size-2xl);  /* 24px */
  --font-heading-lg:                    var(--font-size-3xl);  /* 30px */
  --font-heading-xl:                    var(--font-size-4xl);  /* 40px */


  /* ─────────────────────────────────────────────
   * MOTION (fecha D01)
   * Duração e curva separadas. --transition-* é o alias composto
   * (duração + curva) que os componentes antigos leem; ele é recomposto em
   * cada contexto no bloco "MOTION — aliases" abaixo, porque uma var()
   * dentro de custom property resolve onde é declarada.
   * prefers-reduced-motion zera as durações (bloco no fim do arquivo).
   * ───────────────────────────────────────────── */

  --motion-duration-fast:               var(--primitive-duration-150);
  --motion-duration-base:               var(--primitive-duration-200);
  --motion-duration-slow:               var(--primitive-duration-350);
  --motion-duration-skeleton:           var(--primitive-duration-1500);
  --motion-easing-standard:             var(--primitive-easing-spring);
  --motion-easing-enter:                var(--primitive-easing-decelerate);
  --motion-easing-exit:                 var(--primitive-easing-accelerate);


  /* ─────────────────────────────────────────────
   * ELEVATION (fecha D02)
   * Quem pode estar em cima de quem. Escala ordinal, sem primitivo.
   * Regra: um componente só usa o degrau do seu papel; nunca um número.
   *   base      conteúdo da página
   *   raised    elemento que flutua no próprio fluxo (header flutuante, composer, card arrastado)
   *   sticky    cabeçalho grudado (topbar, thead de tabela)
   *   dropdown  menu, picker, popover ancorado num gatilho
   *   overlay   scrim e o que mora sobre ele sem prender o foco (painel lateral)
   *   modal     diálogo que prende o foco
   *   toast     aviso transitório — acima do modal, para ser lido
   *   tooltip   rótulo de ajuda — acima de tudo
   * ───────────────────────────────────────────── */

  --z-base:                             0;
  --z-raised:                           10;
  --z-sticky:                           20;
  --z-dropdown:                         100;
  --z-overlay:                          150;
  --z-modal:                            200;
  --z-toast:                            300;
  --z-tooltip:                          400;


  /* ─────────────────────────────────────────────
   * SIZE
   * Medidas de controle e de painel (layout, sem primitivo).
   * ───────────────────────────────────────────── */

  --size-control-xs:                    28px;
  --size-control-sm:                    36px;
  --size-control-md:                    44px;
  --size-row:                           44px;   /* linha de tabela/lista */
  --size-side-panel-md:                 420px;
  --size-side-panel-lg:                 560px;
  /* r6 lote 2 — overlays */
  --size-dropdown-min:                  220px;  /* largura mínima de um menu/picker */
  --size-dropdown-max:                  380px;  /* largura máxima de um menu/picker */
  --size-tooltip-max:                   280px;  /* um tooltip quebra linha antes disto */
  --size-dialog-sm:                     440px;  /* diálogo de confirmação */
  --size-command-menu:                  640px;  /* menu de comandos (⌘K) */
  /* r6 lote 3 — painel lateral e avatar */
  --size-side-panel-max:                880px;  /* o painel redimensionado não passa disto */
  --size-resize-handle:                 8px;    /* área de pegar do resize-handle (a linha visível tem 2px) */
  --size-avatar-xs:                     20px;   /* célula de tabela, chip, grupo denso */
  --size-avatar-sm:                     28px;   /* cartão de kanban, lista */
  --size-avatar-md:                     36px;   /* padrão: topbar, item de conversa */
  --size-avatar-lg:                     48px;   /* cabeçalho de registro */
  --size-avatar-xl:                     64px;   /* perfil */
  /* r6 lote 4 — dados e formulário */
  --size-check:                         16px;   /* lado do checkbox / diâmetro do rádio */
  --size-check-sm:                      14px;   /* idem, em tabela e lista densa */
  --size-toggle-track-width:            32px;   /* produto.form.toggle (v2.13): o trilho */
  --size-toggle-track-height:           20px;
  --size-toggle-knob:                   16px;   /* a bolinha; anda (largura − bolinha − 2 × respiro) */
  --size-chip:                          22px;   /* altura de um chip */
  --size-chip-sm:                       18px;   /* altura de um chip em célula densa */
  --size-target-min:                    24px;   /* menor alvo de ponteiro: o × de um chip, o Mover de uma linha (WCAG 2.5.8 AA) */
  --size-date-picker:                   160px;  /* largura mínima de um campo de data (dd/mm/aaaa + ícone) */
  /* r6 lote 5 — formulários P2 */
  --size-number-input:                  128px;  /* largura de um campo numérico com os botões − e + */
  --size-image-input:                   72px;   /* lado da prévia de um image-input (logo do workspace) */
  --size-image-input-sm:                48px;   /* idem, em linha de configuração densa */
  --size-swatch:                        20px;   /* diâmetro de uma amostra do color-picker */
  /* r6 lote 6 — superfícies e navegação P2 */
  --size-control-lg:                    48px;   /* botão grande (CTA de página vazia, login) */
  --size-dialog-md:                     580px;  /* modal padrão: formulário curto (o .dialog do console) */
  --size-dialog-lg:                     800px;  /* modal largo: formulário de duas colunas, prévia */
  --size-dialog-xl:                     1120px; /* modal extra: editor de widget, mapeamento de importação */
  --size-sidebar:                       248px;  /* largura da navegação lateral */
  --size-sidebar-collapsed:             64px;   /* a mesma, recolhida em trilho de ícones */
  --size-sidebar-icon:                  24px;   /* lado do ícone de item da navegação */
  --size-unread-dot:                    8px;    /* diâmetro do ponto de não lido */
  /* r6 lote 8 */
  --size-icon-sm:                       16px;   /* ícone em linha de texto; o badge de um stack-icon md */
  --size-icon-md:                       20px;   /* ícone de item, de cabeçalho; o stack-icon padrão */
  --size-icon-lg:                       32px;   /* ícone de destaque (integração, objeto na página) */
  --size-flag:                          20px;   /* largura da bandeira no country-select e no phone-country-picker */
  --size-placeholder:                   160px;  /* lado da ilustração de um animated-placeholder */
  --size-placeholder-sm:                112px;  /* idem, em painel lateral e estado vazio compacto */
  --size-scrollbar:                     10px;   /* espessura da barra de rolagem de um scroll-area */
  /* r6 lote 7 — conteúdo e dados P2 */
  --size-icon-tile-sm:                  24px;   /* lado de um icon-tile em item de lista, menu, célula */
  --size-icon-tile-md:                  32px;   /* padrão: linha de configuração, objeto no seletor */
  --size-icon-tile-lg:                  40px;   /* cabeçalho de objeto, card de integração */
  --size-color-sample:                  16px;   /* lado de uma amostra de cor (opção de SELECT, etapa) */
  --size-color-sample-sm:               12px;   /* idem, dentro de chip e de célula densa */
  --size-file-chip-max:                 220px;  /* largura máxima de um file-chip: o nome corta com … */
  --size-slider-track:                  4px;    /* espessura do trilho de um slider */
  --size-slider-thumb:                  16px;   /* diâmetro do polegar de um slider */
  --size-code-gutter:                   40px;   /* coluna dos números de linha (code-block, code-editor) */
  --size-code-block-max:                320px;  /* altura máxima de um code-block antes de rolar */
  --size-code-editor-min:               192px;  /* altura mínima de um code-editor (~10 linhas) */
  --size-table-cell-max:                340px;  /* célula de tabela corta com … depois disto (o title leva o valor inteiro) */
  --size-table-max:                     480px;  /* altura máxima de um .table-wrap--scroll: dali em diante rola, e o thead sticky gruda nele */


  /* ─────────────────────────────────────────────
   * COLOR — ILUSTRAÇÃO, ROLAGEM E SELEÇÃO (r6 lote 8)
   * Ilustração: a paleta do traço Pink (produto.feedback.animated-placeholder);
   * um tema reaponta estas sete e as 15 ilustrações mudam juntas.
   * Rolagem: o polegar da barra e a sombra de borda (produto.surface.scroll-area).
   * Seleção: o retângulo de produto.action.drag-select.
   * ───────────────────────────────────────────── */

  --color-illustration-blob:            var(--primitive-pink-50);    /* a mancha de fundo (camada de trás) */
  --color-illustration-paper:           var(--primitive-white);      /* papel, cartão, tela */
  --color-illustration-line:            var(--primitive-gray-300);   /* contorno do papel */
  --color-illustration-ink:             var(--primitive-gray-400);   /* linhas de conteúdo (texto fingido) */
  --color-illustration-shade:           var(--primitive-gray-100);   /* sombra no chão, preenchimento neutro */
  --color-illustration-accent:          var(--primitive-pink-500);   /* o traço de marca */
  --color-illustration-accent-soft:     var(--primitive-pink-200);   /* preenchimento de marca */
  --color-scrollbar-thumb:              var(--primitive-gray-300);   /* polegar da barra de rolagem */
  --color-scrollbar-thumb-hover:        var(--primitive-gray-400);   /* idem, em hover e arrastando */
  --color-scroll-shadow:                color-mix(in srgb, var(--primitive-gray-900) 14%, transparent); /* sombra de borda: há mais conteúdo */
  --color-selection-box-border:         var(--primitive-pink-500);   /* contorno do retângulo de seleção */
  --color-selection-box-bg:             color-mix(in srgb, var(--primitive-pink-500) 10%, transparent); /* o miolo dele */


  /* ─────────────────────────────────────────────
   * COLOR — CÓDIGO (r6 lote 7)
   * O fundo, o texto e a calha de números do código (code-block, json-tree,
   * code-editor) e os papéis de sintaxe. Cada papel é AA (≥ 4.5:1) sobre o
   * fundo e sobre a linha marcada — o validate.js confere (Axioma Cd1).
   * Os papéis vêm dos 700 dos matizes de tag: um tema reaponta um papel,
   * nunca um componente escolhe cor de token de código.
   * ───────────────────────────────────────────── */

  --color-code-bg:                      var(--primitive-gray-50);        /* fundo de bloco de código e editor */
  --color-code-fg:                      var(--primitive-gray-800);       /* texto sem papel — 14.1:1 */
  --color-code-border:                  var(--primitive-gray-200);       /* contorno do bloco e do editor */
  --color-code-gutter:                  var(--primitive-gray-500);       /* números de linha — 4.8:1 */
  --color-code-line-active:             var(--primitive-gray-100);       /* a linha do cursor / a linha marcada */
  --color-code-bg-inert:                var(--primitive-gray-100);       /* fundo do código que não se edita (code-editor readonly e disabled) — 4.5:1 para a calha e o comentário */
  --color-code-syntax-keyword:          var(--primitive-tag-purple-700); /* const, return, if — 6.9:1 */
  --color-code-syntax-string:           var(--primitive-tag-green-700);  /* "texto" — 5.2:1 */
  --color-code-syntax-number:           var(--primitive-tag-blue-700);   /* 42, 3.14 — 5.7:1 */
  --color-code-syntax-literal:          var(--primitive-tag-orange-700); /* true, false, null — 5.5:1 */
  --color-code-syntax-key:              var(--primitive-tag-pink-700);   /* chave de objeto, propriedade — 5.5:1 */
  --color-code-syntax-comment:          var(--primitive-gray-500);       /* // comentário — 4.8:1 (4.5 na linha marcada) */
  --color-code-syntax-punctuation:      var(--primitive-gray-600);       /* { } [ ] : , — 7.4:1 */
  --color-code-syntax-function:         var(--primitive-tag-sky-700);    /* nome de função chamada — 5.6:1 */
  --color-rating-star:                  var(--primitive-tag-yellow-700); /* estrela cheia do campo RATING — 5.4:1 */


  /* ─────────────────────────────────────────────
   * COLOR — TAG
   * Matizes de tag/chip: 10 canônicos (os TAG_COLORS do produto).
   * bg = fundo, fg = texto, border = contorno (variante outline).
   * ───────────────────────────────────────────── */

  --color-tag-gray-bg:                  var(--primitive-tag-gray-100);
  --color-tag-gray-fg:                  var(--primitive-tag-gray-800);
  --color-tag-gray-border:              var(--primitive-tag-gray-200);
  --color-tag-pink-bg:                  var(--primitive-tag-pink-100);
  --color-tag-pink-fg:                  var(--primitive-tag-pink-800);
  --color-tag-pink-border:              var(--primitive-tag-pink-200);
  --color-tag-red-bg:                   var(--primitive-tag-red-100);
  --color-tag-red-fg:                   var(--primitive-tag-red-800);
  --color-tag-red-border:               var(--primitive-tag-red-200);
  --color-tag-orange-bg:                var(--primitive-tag-orange-100);
  --color-tag-orange-fg:                var(--primitive-tag-orange-800);
  --color-tag-orange-border:            var(--primitive-tag-orange-200);
  --color-tag-yellow-bg:                var(--primitive-tag-yellow-100);
  --color-tag-yellow-fg:                var(--primitive-tag-yellow-800);
  --color-tag-yellow-border:            var(--primitive-tag-yellow-200);
  --color-tag-green-bg:                 var(--primitive-tag-green-100);
  --color-tag-green-fg:                 var(--primitive-tag-green-800);
  --color-tag-green-border:             var(--primitive-tag-green-200);
  --color-tag-turquoise-bg:             var(--primitive-tag-turquoise-100);
  --color-tag-turquoise-fg:             var(--primitive-tag-turquoise-800);
  --color-tag-turquoise-border:         var(--primitive-tag-turquoise-200);
  --color-tag-sky-bg:                   var(--primitive-tag-sky-100);
  --color-tag-sky-fg:                   var(--primitive-tag-sky-800);
  --color-tag-sky-border:               var(--primitive-tag-sky-200);
  --color-tag-blue-bg:                  var(--primitive-tag-blue-100);
  --color-tag-blue-fg:                  var(--primitive-tag-blue-800);
  --color-tag-blue-border:              var(--primitive-tag-blue-200);
  --color-tag-purple-bg:                var(--primitive-tag-purple-100);
  --color-tag-purple-fg:                var(--primitive-tag-purple-800);
  --color-tag-purple-border:            var(--primitive-tag-purple-200);

  /* tag aliases — paridade Twenty. Os 15 matizes do Twenty que a Pink não
     tem resolvem para o canônico mais próximo, para que uma opção de SELECT
     importada pinte sem quebrar a taxonomia. Um alias só vira matiz próprio
     com primitivo fornecido pelo designer. */
  --color-tag-tomato-bg:                var(--color-tag-red-bg);
  --color-tag-tomato-fg:                var(--color-tag-red-fg);
  --color-tag-tomato-border:            var(--color-tag-red-border);
  --color-tag-ruby-bg:                  var(--color-tag-red-bg);
  --color-tag-ruby-fg:                  var(--color-tag-red-fg);
  --color-tag-ruby-border:              var(--color-tag-red-border);
  --color-tag-crimson-bg:               var(--color-tag-pink-bg);
  --color-tag-crimson-fg:               var(--color-tag-pink-fg);
  --color-tag-crimson-border:           var(--color-tag-pink-border);
  --color-tag-plum-bg:                  var(--color-tag-purple-bg);
  --color-tag-plum-fg:                  var(--color-tag-purple-fg);
  --color-tag-plum-border:              var(--color-tag-purple-border);
  --color-tag-violet-bg:                var(--color-tag-purple-bg);
  --color-tag-violet-fg:                var(--color-tag-purple-fg);
  --color-tag-violet-border:            var(--color-tag-purple-border);
  --color-tag-iris-bg:                  var(--color-tag-purple-bg);
  --color-tag-iris-fg:                  var(--color-tag-purple-fg);
  --color-tag-iris-border:              var(--color-tag-purple-border);
  --color-tag-cyan-bg:                  var(--color-tag-sky-bg);
  --color-tag-cyan-fg:                  var(--color-tag-sky-fg);
  --color-tag-cyan-border:              var(--color-tag-sky-border);
  --color-tag-jade-bg:                  var(--color-tag-turquoise-bg);
  --color-tag-jade-fg:                  var(--color-tag-turquoise-fg);
  --color-tag-jade-border:              var(--color-tag-turquoise-border);
  --color-tag-grass-bg:                 var(--color-tag-green-bg);
  --color-tag-grass-fg:                 var(--color-tag-green-fg);
  --color-tag-grass-border:             var(--color-tag-green-border);
  --color-tag-mint-bg:                  var(--color-tag-turquoise-bg);
  --color-tag-mint-fg:                  var(--color-tag-turquoise-fg);
  --color-tag-mint-border:              var(--color-tag-turquoise-border);
  --color-tag-lime-bg:                  var(--color-tag-green-bg);
  --color-tag-lime-fg:                  var(--color-tag-green-fg);
  --color-tag-lime-border:              var(--color-tag-green-border);
  --color-tag-bronze-bg:                var(--color-tag-orange-bg);
  --color-tag-bronze-fg:                var(--color-tag-orange-fg);
  --color-tag-bronze-border:            var(--color-tag-orange-border);
  --color-tag-gold-bg:                  var(--color-tag-yellow-bg);
  --color-tag-gold-fg:                  var(--color-tag-yellow-fg);
  --color-tag-gold-border:              var(--color-tag-yellow-border);
  --color-tag-brown-bg:                 var(--color-tag-orange-bg);
  --color-tag-brown-fg:                 var(--color-tag-orange-fg);
  --color-tag-brown-border:             var(--color-tag-orange-border);
  --color-tag-amber-bg:                 var(--color-tag-yellow-bg);
  --color-tag-amber-fg:                 var(--color-tag-yellow-fg);
  --color-tag-amber-border:             var(--color-tag-yellow-border);

}


/* ═══════════════════════════════════════════════════════════════
 * CATÁLOGO CHAT — tokens semânticos (v2.11.0, demo-chat.html → DS)
 * Só o que a v2.1–2.9 NÃO tinha. Motion, camada, tag, avatar e foco LEEM a base
 * da v2.9: --motion-duration-* e --motion-easing-* (D01), --z-* (D02), --color-tag-*,
 * --color-avatar-* e --size-avatar-*, --shadow-focus-ring e --color-border-focus.
 * O mapeamento dos tokens do wip que saíram (nosso → v2.9) está em
 * docs/taxonomy.md §"Reintegração v2.11". Fecha D03 (--surface-frosted-*).
 * ═══════════════════════════════════════════════════════════════ */

:root {

  /* ─────────────────────────────────────────────
   * MOTION — degraus que a escala da v2.1 não tinha (zeram em reduced-motion,
   * no bloco do fim do arquivo) + quanto a peça anda/escala/gira
   * ───────────────────────────────────────────── */
  --motion-duration-instant:            var(--primitive-duration-100);  /* hover de ação pequena, grow do textarea */
  --motion-duration-moderate:           var(--primitive-duration-250);  /* entrada de mensagem, expansão do encerrar */
  --motion-duration-slower:             var(--primitive-duration-400);  /* slide do sideout */
  --motion-easing-linear:               var(--primitive-easing-linear); /* loops contínuos (spin, shimmer) */
  --motion-offset-enter-y:              6px;     /* fade-in: translateY(6px → 0) */
  --motion-scale-hover:                 1.05;    /* botão de envio no hover */
  --motion-scale-press:                 0.95;    /* botão de envio pressionado */
  --motion-rotate-collapsed:            -90deg;  /* chevron de seção recolhida */


  /* ─────────────────────────────────────────────
   * SURFACE — FROSTED GLASS (fecha D03). Material composto: fundo translúcido + blur +
   * sombra + raio. Uso: cards que flutuam sobre conteúdo que rola por baixo.
   * backdrop-filter: blur(var(--surface-frosted-blur))
   * ───────────────────────────────────────────── */
  --surface-frosted-bg-default:         var(--primitive-white-65);           /* header do chat, composer */
  --surface-frosted-bg-strong:          var(--primitive-white-72);           /* header da lista de conversas */
  --surface-frosted-bg-brand:           var(--primitive-pink-110-alpha-65);  /* announcement bar */
  --surface-frosted-blur:               var(--primitive-blur-16);
  --surface-frosted-shadow:             var(--primitive-shadow-float);
  --surface-frosted-radius:             var(--primitive-radius-20);


  /* ─────────────────────────────────────────────
   * COLOR — adições do catálogo chat
   * ───────────────────────────────────────────── */
  --color-surface-canvas-default:       var(--primitive-gray-175);      /* fundo do app shell */
  --color-surface-hover-subtle:         var(--primitive-neutral-100);   /* hover de item de conversa */
  --color-surface-hover-strong:         var(--primitive-gray-250);      /* hover de botão-texto no header */
  --color-surface-icon-tile:            var(--primitive-gray-100);      /* tile de ícone (menu, roles) */
  --color-surface-card-header:          var(--primitive-gray-100);      /* header do pink-card */
  --color-surface-brand-default:        var(--primitive-pink-500);      /* header do sideout */
  --color-surface-on-brand-subtle:      var(--primitive-white-20);      /* botão sobre fundo brand */
  --color-surface-on-brand-hover:       var(--primitive-white-35);
  --color-surface-media-scrim:          var(--primitive-alpha-38);      /* timestamp sobre imagem */
  --color-surface-overlay-scrim:        var(--primitive-alpha-30);      /* scrim do sideout do chat (mais leve que o -default do modal) */

  --color-border-divider:               var(--primitive-gray-210);
  --color-border-pill:                  var(--primitive-gray-225);
  --color-border-selected:              var(--primitive-pink-alpha-35); /* item ativo — rosa suave */
  --color-border-date-divider:          var(--primitive-neutral-300);

  --color-text-message:                 var(--primitive-gray-900);      /* corpo da mensagem */
  --color-text-subtle:                  var(--primitive-gray-350);      /* timestamp do item, placeholder do composer */
  --color-text-placeholder-subtle:      var(--primitive-gray-320);      /* placeholder da busca */
  --color-text-neutral-default:         var(--primitive-neutral-850);   /* label do divisor de data */
  --color-text-neutral-strong:          var(--primitive-neutral-800);   /* nome no user-info */
  --color-text-menu-item:               var(--primitive-neutral-750);   /* item do menu do contextual-bar */

  --color-action-primary-bg-solid-hover: var(--primitive-pink-600);    /* enviar (sólido) no hover */
  --color-action-danger-vivid:          var(--primitive-red-450);      /* encerrar atendimento: contorno e ícone; fundo no hover (texto --color-text-inverted) */

  /* Chat — mensagens */
  --color-chat-bubble-received-bg:      var(--primitive-gray-100);
  --color-chat-bubble-own-bg:           var(--primitive-pink-110);
  --color-chat-audio-play-bg-default:   var(--primitive-pink-500);
  --color-chat-audio-play-bg-own:       var(--primitive-pink-650);
  --color-chat-waveform-default:        var(--primitive-gray-310);
  --color-chat-waveform-own:            var(--primitive-pink-alpha-40);
  --color-chat-doc-icon-bg:             var(--primitive-indigo-50);

  /* Paleta fechada (Pf1/Pf2) — departamento e ícone do menu contextual. LISTA FECHADA:
     cor nova entra por PR no DS (primitivo + semântico aqui), nunca hex inline na tela.
     Departamento = tom (o depto é dado do cliente; a tela escolhe um tom desta lista).
     Texto sobre --color-dept-* é --color-text-inverted (vem do componente).
     Tag do chat (tag-pill) NÃO tem paleta própria: lê os matizes --color-tag-* da v2.1. */
  --color-dept-indigo-bg:               var(--primitive-indigo-500);
  --color-dept-sky-bg:                  var(--primitive-sky-500);
  --color-dept-pink-bg:                 var(--primitive-pink-500);
  --color-dept-green-bg:                var(--primitive-green-650);
  --color-dept-slate-bg:                var(--primitive-slate-900);
  --color-menu-icon-transfer:           var(--primitive-steel-300);
  --color-menu-icon-info:               var(--primitive-sky-400);
  --color-menu-icon-participants:       var(--primitive-pink-450);
  --color-menu-icon-files:              var(--primitive-purple-500);
  --color-menu-icon-pinned:             var(--primitive-pink-450);
  --color-menu-icon-mentions:           var(--primitive-blue-650);
  --color-menu-icon-favorites:          var(--primitive-amber-450);
  --color-menu-icon-gossip:             var(--primitive-coral-400);
  --color-menu-icon-history:            var(--primitive-blue-350);
  --color-menu-icon-notifications:      var(--primitive-steel-300);

  /* Avatar — tons pastéis (variante tone do produto.data-display.avatar, comportamento.assign.avatar-tone).
     Mesma taxonomia do avatar v2.4 (--color-avatar-bg-default / -text-default): o tom é o último segmento.
     A ORDEM coral → amber é contrato do hash. */
  --color-avatar-bg-coral:              var(--primitive-avatar-coral-bg);
  --color-avatar-text-coral:            var(--primitive-avatar-coral-fg);
  --color-avatar-bg-yellow:             var(--primitive-avatar-yellow-bg);
  --color-avatar-text-yellow:           var(--primitive-avatar-yellow-fg);
  --color-avatar-bg-sage:               var(--primitive-avatar-sage-bg);
  --color-avatar-text-sage:             var(--primitive-avatar-sage-fg);
  --color-avatar-bg-lavender:           var(--primitive-avatar-lavender-bg);
  --color-avatar-text-lavender:         var(--primitive-avatar-lavender-fg);
  --color-avatar-bg-sky:                var(--primitive-avatar-sky-bg);
  --color-avatar-text-sky:              var(--primitive-avatar-sky-fg);
  --color-avatar-bg-peach:              var(--primitive-avatar-peach-bg);
  --color-avatar-text-peach:            var(--primitive-avatar-peach-fg);
  --color-avatar-bg-mint:               var(--primitive-avatar-mint-bg);
  --color-avatar-text-mint:             var(--primitive-avatar-mint-fg);
  --color-avatar-bg-rose:               var(--primitive-avatar-rose-bg);
  --color-avatar-text-rose:             var(--primitive-avatar-rose-fg);
  --color-avatar-bg-lilac:              var(--primitive-avatar-lilac-bg);
  --color-avatar-text-lilac:            var(--primitive-avatar-lilac-fg);
  --color-avatar-bg-amber:              var(--primitive-avatar-amber-bg);
  --color-avatar-text-amber:            var(--primitive-avatar-amber-fg);


  /* ─────────────────────────────────────────────
   * SHADOW — adições
   * ───────────────────────────────────────────── */
  --shadow-floating:                    var(--primitive-shadow-float);         /* = frosted, para cards não-vidro */
  --shadow-card-section:                var(--primitive-shadow-float-strong);  /* pink-card da lista de conversas */
  --shadow-pill:                        var(--primitive-shadow-pill);          /* pílula de ações da mensagem */
  --shadow-chat-avatar-frame:           var(--primitive-shadow-avatar-frame);  /* moldura do avatar no user-info */
  --shadow-pricing-card:                0 8px 24px rgba(17, 24, 39, 0.06);     /* v2.13: antes o pricing-card lia --card-shadow, que não existia */
  --shadow-pricing-cta:                 0 6px 16px rgba(213, 21, 107, 0.25);   /* v2.13: antes o pricing-card lia --btn-cta-shadow, que não existia */
  --color-surface-login-art:            linear-gradient(to bottom, var(--primitive-lavender-50), var(--primitive-orchid-200-alpha-5));  /* v2.13: arte conceitual do login-card */


  /* ─────────────────────────────────────────────
   * RADIUS — adições (o avatar usa --radius-avatar / --radius-component-pill da v2.4)
   * ───────────────────────────────────────────── */
  --radius-control-default:             var(--primitive-radius-8);   /* botão quadrado de ícone (button.square), menu */
  --radius-list-item:                   var(--primitive-radius-12);
  --radius-card-header:                 var(--primitive-radius-16);
  --radius-bubble-default:              var(--primitive-radius-18);
  --radius-bubble-tail:                 var(--primitive-radius-4);
  --radius-media-default:               var(--primitive-radius-14);
  --radius-input-composer:              var(--primitive-radius-24);  /* não é pill: o textarea cresce até 120px */
  --radius-waveform-bar:                var(--primitive-radius-2);
  --radius-chat-avatar-frame:           var(--primitive-radius-17);
  --radius-pricing-card:                var(--primitive-radius-24);  /* v2.13: antes o pricing-card lia --card-radius, que não existia */
  --radius-pricing-cta:                 var(--primitive-radius-14);  /* v2.13: antes o pricing-card lia --btn-cta-radius, que não existia */


  /* ─────────────────────────────────────────────
   * FONT — adições
   * ───────────────────────────────────────────── */
  --font-size-xs-plus:                  var(--primitive-font-size-11);  /* timestamps, contadores, meta */
  --font-size-sm-plus:                  var(--primitive-font-size-13);  /* nome/preview de item, busca, announcement */
  --font-size-icon-md:                  var(--primitive-font-size-18);  /* glifo de botão de ícone */
  --font-size-icon-lg:                  var(--primitive-font-size-20);  /* glifo de tile (documento) */
  --font-weight-medium:                 var(--primitive-font-weight-500);
  --line-height-normal:                 var(--primitive-line-height-normal);  /* 1.5 — texto de mensagem */
  --line-height-snug:                   var(--primitive-line-height-snug);    /* 1.4 — textarea */
  --line-height-title-sm:               var(--primitive-line-height-20px);    /* título de seção */


  /* ─────────────────────────────────────────────
   * SPACING — escala fina + painel. 4/8/12/16/24 continuam nos tokens
   * --spacing-component-*; aqui só o que é fora da base 4px (padrão Pink original,
   * herdado do meteor — NÃO normalizar, decisão do Pedro 10-16) e o padding de painel lateral.
   * Quando usar cada degrau (e o que é proibido): docs/spacing.md + ontology.md Sp1–Sp4.
   * ───────────────────────────────────────────── */
  --spacing-fine-1:                     var(--primitive-space-fine-1);
  --spacing-fine-2:                     var(--primitive-space-fine-2);
  --spacing-fine-3:                     var(--primitive-space-fine-3);
  --spacing-fine-5:                     var(--primitive-space-fine-5);
  --spacing-fine-6:                     var(--primitive-space-fine-6);
  --spacing-fine-7:                     var(--primitive-space-fine-7);
  --spacing-fine-10:                    var(--primitive-space-fine-10);
  --spacing-fine-11:                    var(--primitive-space-fine-11);
  --spacing-fine-13:                    var(--primitive-space-fine-13);
  --spacing-fine-14:                    var(--primitive-space-fine-14);
  --spacing-fine-18:                    var(--primitive-space-fine-18);
  --spacing-panel-padding-sm:           var(--primitive-space-5);   /* 20px — sideout, user-info, menu */
  --spacing-input-icon-inset:           var(--primitive-space-8);   /* 32px — texto à direita do ícone da busca */
  --spacing-divider-margin:             var(--primitive-space-5);   /* 20px — respiro e recuo de divisores */


  /* ─────────────────────────────────────────────
   * BORDER / OPACITY
   * ───────────────────────────────────────────── */
  --border-width-thin:                  1px;
  --border-width-medium:                1.5px;
  --border-width-thick:                 2px;
  --border-width-chat-avatar-frame:     22.3px;
  --opacity-divider:                    0.25;


  /* ─────────────────────────────────────────────
   * SIZE — peças do chat. A escala de controle (--size-control-*) e a de avatar
   * (--size-avatar-*) são as da v2.1/v2.4; aqui só as medidas que o chat tem e
   * que elas não têm, no namespace size.chat.* (ver "Decisões para o Pedro").
   * ───────────────────────────────────────────── */
  --size-icon-xs:                       12px;   /* glifo do wa-badge sm, chevron do pink-card */
  --size-chat-icon-sm:                  13px;   /* glifo do wa-badge md */
  --size-chat-icon-md:                  15px;   /* lupa da busca da lista */
  --size-badge-sm:                      18px;   /* wa-badge sm, contadores, badge de depto no header */
  --size-badge-md:                      20px;   /* wa-badge md */
  --size-chat-avatar-user:              32px;   /* usuário logado (círculo) no topo da lista */
  --size-chat-avatar-item:              var(--size-avatar-md);  /* deprecated v2.13: use --size-avatar-md (36; era 38) */
  --size-chat-avatar-profile:           var(--size-avatar-lg);  /* deprecated v2.13: use --size-avatar-lg (48; era 46) */
  --size-chat-avatar-frame:             90px;   /* moldura do avatar no user-info */
  --size-chat-doc-icon:                 38px;   /* tile de ícone de documento na bolha */
  --size-chat-control-sm:               30px;   /* botão de ícone no header da lista */
  --size-chat-control-md:               32px;   /* ação do header do chat, fechar sideout */
  --size-chat-control-lg:               34px;   /* botão de ícone, encerrar, play, busca */
  --size-chat-control-xl:               40px;   /* enviar, botão de painel (user-info) */
  --size-composer-input-height:         42px;   /* textarea recolhida */
  --size-composer-input-max:            120px;  /* teto do auto-grow */
  --size-header-name-height:            23px;
  --size-encerrar-expanded:             130px;
  --size-encerrar-label:                80px;
  --size-media-image-width:             220px;
  --size-media-image-height:            160px;
  --size-media-attachment-min:          210px;  /* áudio e documento */
  --size-waveform-height:               24px;
  --size-waveform-bar:                  3px;
  --size-audio-duration-min:            28px;
  --size-message-min-width:             120px;  /* bolha nunca fica mais estreita que isto */


  /* ─────────────────────────────────────────────
   * LAYOUT — floating layout da conversation-view (patterns/conversation-view.md)
   * ───────────────────────────────────────────── */
  --layout-sidebar-width:               368px;
  --layout-sideout-width:               400px;
  --layout-floating-offset-y:           12px;   /* distância do card flutuante à borda */
  --layout-floating-offset-x:           16px;
  --layout-floating-header-min-height:  52px;
  --layout-floating-announcement-top:   93px;   /* offset-y + altura do header + gap */
  --layout-floating-content-top:        152px;  /* respiro do conteúdo sob header + announcement */
  --layout-floating-content-bottom:     90px;   /* respiro do conteúdo sobre o composer */
  --layout-sidebar-list-top:            76px;   /* respiro da lista sob o header da lista */
  --layout-card-header-height:          50px;
  --layout-sideout-header-height:       80px;
  --layout-message-max-width:           65%;    /* bolha: % da área de mensagens (≥ 1100: o visual original) */
  --layout-message-max-width-compact:   75%;    /* bolha abaixo de --breakpoint-conv-wide (sem isto, 1 palavra/linha) */
  --layout-sidebar-width-compact:       300px;  /* largura média (conv-view < 1100px) */
  --layout-sidebar-width-drawer:        320px;  /* estreita (conv-view < 760px): gaveta sobre o chat */

  /* BREAKPOINTS da conversation-view — CONTAINER queries, não media: o layout também
     vive dentro de iframe e de painel. CSS não aceita var() em @container/@media, então estes
     tokens são a FONTE dos números; o CSS repete o valor com comentário apontando o token
     (patterns/conversation-view.md §Responsividade). */
  --breakpoint-conv-wide:               1100px; /* conv-view ≥ isto: lista cheia (368) */
  --breakpoint-conv-narrow:             760px;  /* conv-view < isto: lista vira gaveta */
  --breakpoint-conv-main-compact:       560px;  /* conv-main < isto: header só com ações primárias + kebab */
  --breakpoint-conv-main-tagless:       720px;  /* conv-main < isto: o "+ Adicionar tag" sai do header (o nome tem prioridade) */

}


/* ═══════════════════════════════════════════════════════════════
 * CATÁLOGO (index.html — cards guidelines/ e components/<nome>/<nome>.card.html)
 * Chrome dos cards do catálogo: o id formal do componente (.comp-id, monospace rosa)
 * e o id do estado (.state-id, monospace cinza) — contrato do CLAUDE.md. Só aliases.
 * ═══════════════════════════════════════════════════════════════ */

:root {
  --color-catalog-id-text:              var(--color-text-brand);
  --color-catalog-id-bg:                var(--primitive-pink-50);
  --color-catalog-state-text:           var(--color-text-muted);
  --color-catalog-stage-bg:             var(--color-surface-canvas-default);
}


/* ═══════════════════════════════════════════════════════════════
 * CONTEXTO: MARKETING (pinkapp.com / Webflow)
 * Aplica override dos tokens para o contexto do site marketing.
 * Uso: adicionar classe .ctx-marketing no <body> ou seção.
 * ═══════════════════════════════════════════════════════════════ */

.ctx-marketing {

  /* Fundos de seção */
  --color-surface-page-default:         #FFFFFF;
  --color-surface-section-alternate:    #F9F9F9;
  --color-surface-card-default:         #FFFFFF;

  /* Texto */
  --color-text-headline:                #333333;
  --color-text-body-default:            #333333;
  --color-text-body-secondary:          #666666;
  --color-text-muted:                   #999999;

  /* Bordas */
  --color-border-default:               #E5E5E5;
  --color-border-subtle:                #F5F5F5;

  /* Radius — marketing é menos arredondado que o produto */
  --radius-component-default:           8px;   /* botões, thumbnails */
  --radius-card-default:                12px;  /* cards de feature */
  --radius-avatar:                      50%;   /* avatares circulares */
  --radius-badge:                       4px;   /* category tags */
  --radius-input-default:               6px;   /* inputs */

  /* Sombras — neutras, sem tint pink */
  --shadow-card-default:                0 2px 8px rgba(0,0,0,.08);
  --shadow-card-hover:                  0 8px 20px rgba(0,0,0,.12);
  --shadow-button-primary:              0 4px 12px rgba(213,21,107,.30);
  --shadow-header:                      0 2px 8px rgba(0,0,0,.08);

  /* Tipografia */
  --font-family-app:                    'Inter', 'Poppins', Arial, sans-serif;
  --font-heading-display:               56px;
  --font-heading-section:               36px;
  --font-heading-card:                  24px;
  --font-body-large:                    18px;

  /* Spacing de layout */
  --spacing-layout-gap-sm:              48px;
  --spacing-layout-gap-md:              64px;
  --spacing-layout-gap-lg:              80px;
  --spacing-layout-container-lg:        1200px;
  --spacing-layout-container-narrow:    500px;

  /* Motion — mais lento que no produto (aliases --transition-* recompostos abaixo) */
  --motion-duration-fast:               var(--primitive-duration-300);
  --motion-duration-base:               var(--primitive-duration-300);
  --motion-easing-standard:             var(--primitive-easing-ease);

}

/* ═══════════════════════════════════════════════════════════════
 * CONTEXTO: OPS (ops.heypink.com — mesa de operação)
 * Decisão do Pedro (plano de alertas §7.1, 23/08): a "mesa" do ops vira CONTEXTO do DS,
 * não um quarto dialeto. Mesma paleta e mesma fonte do produto; muda a DENSIDADE (tabela
 * longa, muita linha por tela), o dado técnico em MONO e os números TABULARES (coluna de
 * contagem não dança). Morrem: Archivo, #D93A72, radius 0, #F6F5F2.
 * Uso: classe .ctx-ops no <body> (ou na raiz da página). Componentes: sem variante nova —
 * eles leem os tokens e ficam compactos sozinhos.
 * ═══════════════════════════════════════════════════════════════ */

.ctx-ops {

  /* Densidade — um degrau abaixo do produto em padding e gap */
  --spacing-component-padding-xs:       4px;
  --spacing-component-padding-sm:       8px;
  --spacing-component-padding-md:       12px;
  --spacing-component-padding-lg:       16px;
  --spacing-component-gap-xs:           2px;
  --spacing-component-gap-sm:           6px;
  --spacing-component-gap-md:           10px;
  --spacing-component-gap-lg:           12px;

  /* Tipografia de dado — o corpo segue Nunito; id, chave, horário e contagem em mono */
  --font-size-xs:                       11px;   /* 10px do produto é pequeno demais para mono em tabela */
  --font-size-sm:                       12px;
  --font-size-md:                       13px;
  --font-family-data:                   var(--font-family-mono);

  /* Raios — menores, sem chegar a 0 (radius 0 foi aposentado no §7.1) */
  --radius-component-default:           8px;
  --radius-component-md:                6px;
  --radius-component-sm:                4px;

  /* Motion — operação não espera animação (aliases --transition-* recompostos abaixo) */
  --motion-duration-fast:               var(--primitive-duration-100);
  --motion-duration-base:               var(--primitive-duration-150);

  font-variant-numeric:                 tabular-nums;

}

/* ═══════════════════════════════════════════════════════════════
 * MOTION — aliases compostos, recompostos em cada contexto
 * --transition-* = duração + curva do contexto onde o elemento está.
 * ═══════════════════════════════════════════════════════════════ */

:root, .ctx-marketing, .ctx-ops {
  --transition-fast:                    var(--motion-duration-fast) var(--motion-easing-standard);
  --transition-base:                    var(--motion-duration-base) var(--motion-easing-standard);
  --transition-slow:                    var(--motion-duration-slow) var(--motion-easing-standard);
}

/* ═══════════════════════════════════════════════════════════════
 * CAMADAS E TEMA NAVY (v2.12) — patterns/floating-layers.md
 * A tela tem duas camadas: a TRILHA (.layer-track — o conteúdo principal, que
 * rola) e os FLUTUANTES (.layer-float — header, composer, lista, painéis, que
 * ficam por cima, em vidro, e deixam a trilha passar por baixo).
 * O tema navy ("light dark mode") escurece o FUNDO: o canvas e as trilhas de apoio
 * (.layer-track: a coluna da lista). A conversa (.conv-main) é conteúdo e fica clara;
 * o flutuante continua vidro claro e translúcido. Tokens sensíveis ao fundo:
 *   --color-surface-card-default (o fundo que o conteúdo da trilha pinta),
 *   --color-text-headline | -body-default | -body-secondary | -muted | -neutral-default | -subtle,
 *   --color-border-date-divider | -divider | -default.
 * A trilha os redefine; o flutuante volta ao valor claro lendo --layer-light-*,
 * a foto que o :root tira dos mesmos tokens (custom property herda o valor já
 * resolvido — nenhum valor é copiado). Fecha D04 em parte: escuro de trilha,
 * não dark mode completo.
 * ═══════════════════════════════════════════════════════════════ */

:root {
  --color-surface-track-default:        var(--color-surface-card-default);  /* fundo da trilha (claro = o do card) */

  --layer-light-surface-card:           var(--color-surface-card-default);
  --layer-light-text-headline:          var(--color-text-headline);
  --layer-light-text-body:              var(--color-text-body-default);
  --layer-light-text-secondary:         var(--color-text-body-secondary);
  --layer-light-text-muted:             var(--color-text-muted);
  --layer-light-text-neutral:           var(--color-text-neutral-default);
  --layer-light-text-subtle:            var(--color-text-subtle);
  --layer-light-border-date:            var(--color-border-date-divider);
  --layer-light-border-divider:         var(--color-border-divider);
  --layer-light-border-default:         var(--color-border-default);
}

/* tema.navy — no <html> (ou na raiz da tela): data-theme="navy" */
[data-theme="navy"] {
  --color-surface-canvas-default:       var(--primitive-navy-975);
  --color-surface-track-default:        var(--primitive-navy-950);
}

/* tema.navy.trilha — o que pousa direto numa trilha de apoio lê claro sobre navy */
[data-theme="navy"] .layer-track {
  --color-surface-card-default:         var(--color-surface-track-default);
  --color-text-headline:                var(--primitive-white-92);   /* 12.3:1 */
  --color-text-body-default:            var(--primitive-white-92);
  --color-text-body-secondary:          var(--primitive-white-64);   /* 6.7:1 */
  --color-text-muted:                   var(--primitive-white-64);
  --color-text-neutral-default:         var(--primitive-white-82);
  --color-text-subtle:                  var(--primitive-white-64);
  --color-border-date-divider:          var(--primitive-white-16);
  --color-border-divider:               var(--primitive-white-16);
  --color-border-default:               var(--primitive-white-16);
}

/* tema.navy.flutuante — header, composer, balão, painel: voltam ao claro.
 * Componentes que flutuam por natureza entram sem a classe (lista abaixo). */
[data-theme="navy"] :is(.layer-float, .conv-header, .msg-announcement, .conv-composer-wrap, .msg-bubble, .sideout, .conv-list__header, .pink-card) {
  --color-surface-card-default:         var(--layer-light-surface-card);
  --color-text-headline:                var(--layer-light-text-headline);
  --color-text-body-default:            var(--layer-light-text-body);
  --color-text-body-secondary:          var(--primitive-gray-600);   /* vidro sobre navy fica mais escuro: o secundário desce um degrau */
  --color-text-muted:                   var(--layer-light-text-muted);
  --color-text-neutral-default:         var(--layer-light-text-neutral);
  --color-text-subtle:                  var(--layer-light-text-subtle);
  --color-border-date-divider:          var(--layer-light-border-date);
  --color-border-divider:               var(--layer-light-border-divider);
  --color-border-default:               var(--layer-light-border-default);
}

/* ═══════════════════════════════════════════════════════════════
 * MOTION — movimento reduzido (comportamento.reduce.motion)
 * Quem pediu menos movimento no sistema operacional recebe duração zero em
 * todo contexto: a mudança de estado acontece, a animação não. Vem por
 * último para vencer os contextos (mesma especificidade, ordem decide).
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  :root, .ctx-marketing, .ctx-ops {
    --motion-duration-fast:             0ms;
    --motion-duration-base:             0ms;
    --motion-duration-slow:             0ms;
    --motion-duration-skeleton:         0ms;
    --motion-duration-instant:          0ms;
    --motion-duration-moderate:         0ms;
    --motion-duration-slower:           0ms;
  }
}
/* ── components/nav-header ── */
/**
 * NavHeader — Pink Design System
 * domain: marketing | category: navigation | status: beta
 * Referência: pinkapp.com header
 */

.nav-header {
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: box-shadow var(--transition-base);
}

.nav-header--scrolled {
  box-shadow: var(--shadow-sm);
}

.nav-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-component-padding-lg);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-component-padding-lg);
}

/* logo */
.nav-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-header__logo img,
.nav-header__logo svg {
  height: 32px;
  width: auto;
}

/* menu */
.nav-header__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-header__menu-item {
  position: relative;
}

.nav-header__menu-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body-default);
  text-decoration: none;
  border-radius: var(--radius-component-default);
  transition: background var(--transition-fast), color var(--transition-fast);
  white-space: nowrap;
}

.nav-header__menu-link:hover {
  background: var(--color-surface-hover-default);
  color: var(--color-action-primary-bg-solid);
}

/* actions direita */
.nav-header__actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-component-gap-md);
  flex-shrink: 0;
}

/* ícones de canal */
.nav-header__channel-icons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-header__channel-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
  text-decoration: none;
}

.nav-header__channel-icon:hover {
  opacity: 1;
}

/* CTA pill */
.nav-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  background: var(--color-action-primary-bg-default);
  color: var(--color-action-primary-text-default);
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-component-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  box-shadow: var(--shadow-button-primary);
}

.nav-header__cta:hover {
  opacity: 0.92;
  box-shadow: var(--shadow-button-primary-hover);
  transform: translateY(-1px);
}

/* hamburger mobile */
.nav-header__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-header__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text-body-default);
  border-radius: 2px;
  transition: transform var(--transition-base), opacity var(--transition-fast);
}

@media (max-width: 900px) {
  .nav-header__menu { display: none; }
  .nav-header__channel-icons { display: none; }
  .nav-header__hamburger { display: flex; }
}

@media (max-width: 480px) {
  .nav-header__cta { display: none; }
}

/* ── marketing.navigation.nav-header.menu-open (10-16) — o estado declarado no component.json.
   O botão vira X (as 3 barras giram com motion token) e o painel desce com grid-rows 0fr→1fr.
   Classe .nav-header--menu-open no <nav>; o botão leva aria-expanded="true" e aria-controls. ── */
.nav-header__hamburger span { transition: transform var(--motion-duration-base) var(--motion-easing-standard), opacity var(--motion-duration-fast) var(--motion-easing-standard); }
/* deslocamento = gap entre barras (5px legado) + espessura da barra */
.nav-header--menu-open .nav-header__hamburger span:nth-child(1) { transform: translateY(calc(var(--spacing-fine-5) + var(--border-width-thick))) rotate(45deg); }
.nav-header--menu-open .nav-header__hamburger span:nth-child(2) { opacity: 0; }
.nav-header--menu-open .nav-header__hamburger span:nth-child(3) { transform: translateY(calc(-1 * (var(--spacing-fine-5) + var(--border-width-thick)))) rotate(-45deg); }

.nav-header__mobile-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--motion-duration-slow) var(--motion-easing-standard);
}
.nav-header__mobile-panel > * { overflow: hidden; min-height: 0; }
.nav-header--menu-open .nav-header__mobile-panel { grid-template-rows: 1fr; border-top: var(--border-width-thin) solid var(--color-border-subtle); }
.nav-header__mobile-list { list-style: none; margin: 0; padding: var(--spacing-component-gap-sm) var(--spacing-component-padding-lg); display: flex; flex-direction: column; }
.nav-header__mobile-list .nav-header__menu-link { padding: var(--spacing-component-padding-sm) var(--spacing-component-padding-xs); }

/* foco de teclado (A2) */
.nav-header__menu-link:focus-visible, .nav-header__cta:focus-visible, .nav-header__hamburger:focus-visible, .nav-header__channel-icon:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: var(--spacing-fine-2); }
/* ── components/hero ── */
/**
 * Hero — Pink Design System
 * domain: marketing | category: surface | status: beta
 * Referência: pinkapp.com hero sections
 */

.hero {
  width: 100%;
  padding: var(--spacing-layout-gap-md) var(--spacing-component-padding-lg);
}

.hero__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Variante: centered ──────────────────────────── */
.hero--centered {
  text-align: center;
  padding-top: 96px;
  padding-bottom: 96px;
}

.hero--centered .hero__inner {
  max-width: 760px;
}

.hero--centered .hero__actions {
  justify-content: center;
}

/* ── Variante: two-column ────────────────────────── */
.hero--two-column .hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 64px;
}

.hero--two-column .hero__content {
  text-align: left;
}

.hero--two-column .hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero--two-column .hero__visual img {
  width: 100%;
  max-width: 560px;
  height: auto;
}

/* ── Conteúdo ────────────────────────────────────── */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-action-primary-bg-solid);
  margin-bottom: 16px;
}

.hero__headline {
  font-family: var(--font-family-marketing);
  font-size: clamp(32px, 5vw, 52px);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-headline);
  line-height: 1.15;
  margin: 0 0 20px;
}

.hero__headline strong,
.hero__headline em {
  color: var(--color-action-primary-bg-solid);
  font-style: normal;
}

.hero__subtitle {
  font-family: var(--font-family-app);
  font-size: var(--font-size-lg);
  color: var(--color-text-body-secondary);
  line-height: 1.6;
  margin: 0 0 36px;
  max-width: 560px;
}

.hero--centered .hero__subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* ── Ações ───────────────────────────────────────── */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* botão CTA principal */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: var(--color-action-primary-bg-default);
  color: var(--color-action-primary-text-default);
  font-family: var(--font-family-app);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-component-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-button-primary);
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.hero__cta:hover {
  opacity: 0.92;
  box-shadow: var(--shadow-button-primary-hover);
  transform: translateY(-2px);
}

/* botão secundário */
.hero__cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: transparent;
  color: var(--color-text-body-default);
  font-family: var(--font-family-app);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-component-pill);
  border: 1px solid var(--color-border-strong);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.hero__cta-secondary:hover {
  background: var(--color-surface-hover-default);
  border-color: var(--color-text-body-secondary);
}

/* ── Social proof inline ─────────────────────────── */
.hero__social-proof {
  margin-top: 24px;
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  color: var(--color-text-body-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Responsivo ──────────────────────────────────── */
@media (max-width: 768px) {
  .hero--two-column .hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .hero--two-column .hero__visual {
    order: -1;
  }

  .hero {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__cta,
  .hero__cta-secondary {
    justify-content: center;
  }
}

/* foco de teclado (A2, 10-16) — o hover já existia; o foco ganha o mesmo destaque + anel */
.hero__cta:focus-visible, .hero__cta-secondary:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: var(--spacing-fine-2); }
/* ── components/feature-section ── */
/**
 * FeatureSection — Pink Design System
 * domain: marketing | category: surface | status: beta
 * Referência: pinkapp.com feature sections (alternadas)
 */

.feature-section {
  padding: 80px var(--spacing-component-padding-lg);
  background: var(--color-surface-page-default);
}

.feature-section--alternate {
  background: #F9F9F9;
}

.feature-section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Variante: 2 colunas (texto + imagem) ────────── */
.feature-section--two-col .feature-section__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}

/* imagem à direita (padrão) */
.feature-section--text-left .feature-section__content { order: 1; }
.feature-section--text-left .feature-section__visual  { order: 2; }

/* imagem à esquerda */
.feature-section--text-right .feature-section__content { order: 2; }
.feature-section--text-right .feature-section__visual  { order: 1; }

/* ── Variante: 3 cards grid ──────────────────────── */
.feature-section--grid .feature-section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.feature-section--grid .feature-section__heading-block {
  text-align: center;
  max-width: 640px;
}

.feature-section__cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

/* ── Conteúdo textual ────────────────────────────── */
.feature-section__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-action-primary-bg-solid);
  margin-bottom: 12px;
}

.feature-section__heading {
  font-family: var(--font-family-marketing);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-headline);
  line-height: 1.25;
  margin: 0 0 16px;
}

.feature-section__heading strong {
  color: var(--color-action-primary-bg-solid);
}

.feature-section__body {
  font-family: var(--font-family-app);
  font-size: var(--font-size-lg);
  color: var(--color-text-body-secondary);
  line-height: 1.65;
  margin: 0 0 28px;
}

.feature-section__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-app);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-action-primary-bg-solid);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.feature-section__cta:hover {
  gap: 10px;
}

/* ── Visual (imagem/mockup) ──────────────────────── */
.feature-section__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-section__visual img {
  width: 100%;
  max-width: 520px;
  height: auto;
  border-radius: 16px;
}

/* ── Feature card (variante grid) ───────────────── */
.feature-card {
  background: var(--color-surface-card-default);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 28px 24px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.feature-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #FDEEF5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--color-action-primary-bg-solid);
}

.feature-card__heading {
  font-family: var(--font-family-app);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-headline);
  margin: 0 0 8px;
}

.feature-card__body {
  font-family: var(--font-family-app);
  font-size: var(--font-size-md);
  color: var(--color-text-body-secondary);
  line-height: 1.6;
  margin: 0;
}

.feature-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 16px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-action-primary-bg-solid);
  text-decoration: none;
  transition: gap var(--transition-fast);
}

.feature-card__link:hover { gap: 8px; }

/* ── Responsivo ──────────────────────────────────── */
@media (max-width: 900px) {
  .feature-section--two-col .feature-section__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .feature-section--text-right .feature-section__content { order: 2; }
  .feature-section--text-right .feature-section__visual  { order: 1; }

  .feature-section__cards-grid {
    grid-template-columns: 1fr;
  }

  .feature-section {
    padding: 48px var(--spacing-component-padding-md);
  }
}

/* foco de teclado (A2, 10-16) */
.feature-section__cta:focus-visible, .feature-card__link:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: var(--spacing-fine-2); border-radius: var(--radius-component-sm); }
.feature-card:focus-within { transform: translateY(calc(-1 * var(--spacing-component-gap-xs))); box-shadow: var(--shadow-overlay); }
/* ── components/cta-section ── */
/**
 * CTASection — Pink Design System
 * domain: marketing | category: surface | status: beta
 * Referência: pinkapp.com modal card de conversão (repetido 5x na home)
 */

/* ── Seção wrapper ───────────────────────────────── */
.cta-section {
  padding: 80px var(--spacing-component-padding-lg);
  background: #F9F9F9;
}

.cta-section__inner {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
}

/* ── Variante: modal-card ────────────────────────── */
.cta-section--card .cta-section__inner {
  background: var(--color-surface-card-default);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 48px 40px;
}

/* ── Variante: banner pink ───────────────────────── */
.cta-section--banner {
  background: var(--color-action-primary-bg-default);
}

.cta-section--banner .cta-section__headline,
.cta-section--banner .cta-section__subtitle {
  color: var(--color-action-primary-text-default);
}

/* ── Avatar ──────────────────────────────────────── */
.cta-section__avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 24px;
  display: block;
}

/* ── Texto ───────────────────────────────────────── */
.cta-section__headline {
  font-family: var(--font-family-marketing);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-headline);
  line-height: 1.3;
  margin: 0 0 12px;
}

.cta-section__subtitle {
  font-family: var(--font-family-app);
  font-size: var(--font-size-md);
  color: var(--color-text-body-secondary);
  line-height: 1.6;
  margin: 0 0 28px;
}

/* ── CTA ─────────────────────────────────────────── */
.cta-section__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--color-action-primary-bg-default);
  color: var(--color-action-primary-text-default);
  font-family: var(--font-family-app);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-component-pill);
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-shadow: var(--shadow-button-primary);
  transition: opacity var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.cta-section__btn:hover {
  opacity: 0.92;
  box-shadow: var(--shadow-button-primary-hover);
  transform: translateY(-2px);
}

/* banner: botão branco */
.cta-section--banner .cta-section__btn {
  background: #FFFFFF;
  color: var(--color-action-primary-bg-solid);
  box-shadow: none;
}

.cta-section--banner .cta-section__btn:hover {
  background: rgba(255, 255, 255, 0.92);
}

@media (max-width: 600px) {
  .cta-section {
    padding: 48px var(--spacing-component-padding-md);
  }

  .cta-section--card .cta-section__inner {
    padding: 32px 24px;
  }

  .cta-section__btn {
    width: 100%;
  }
}

/* foco de teclado (A2, 10-16) */
.cta-section__btn:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: var(--spacing-fine-2); }
/* ── components/testimonial-card ── */
/**
 * TestimonialCard — Pink Design System
 * domain: marketing | category: content | status: beta
 * Referência: pinkapp.com testimonials carousel
 */

/* ── Carousel wrapper ────────────────────────────── */
.testimonial-carousel {
  padding: 80px var(--spacing-component-padding-lg);
  background: #F9F9F9;
  overflow: hidden;
}

.testimonial-carousel__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.testimonial-carousel__heading {
  text-align: center;
  font-family: var(--font-family-marketing);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-headline);
  margin: 0 0 48px;
}

.testimonial-carousel__track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 8px;
}

.testimonial-carousel__track::-webkit-scrollbar { display: none; }

/* setas de navegação */
.testimonial-carousel__nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.testimonial-carousel__arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(213, 21, 107, 0.90);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}

.testimonial-carousel__arrow:hover {
  background: var(--color-action-primary-bg-solid);
}

/* ── Card ────────────────────────────────────────── */
.testimonial-card {
  background: var(--color-surface-card-default);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 28px;
  min-width: 340px;
  max-width: 380px;
  flex-shrink: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* logo empresa */
.testimonial-card__logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  object-position: left;
}

/* citação */
.testimonial-card__quote {
  font-family: var(--font-family-app);
  font-size: var(--font-size-md);
  color: var(--color-text-body-default);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.testimonial-card__quote strong {
  color: var(--color-text-headline);
  font-weight: var(--font-weight-bold);
}

/* autor */
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 12px;
}

.testimonial-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.testimonial-card__author-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.testimonial-card__name {
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-body-default);
}

.testimonial-card__role {
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .testimonial-carousel {
    padding: 48px var(--spacing-component-padding-md);
  }

  .testimonial-card {
    min-width: 280px;
  }
}

/* foco + fim do carrossel (10-16): seta sem destino fica desabilitada, não some */
.testimonial-carousel__arrow:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: var(--spacing-fine-2); }
.testimonial-carousel__arrow:disabled { opacity: var(--opacity-divider); cursor: default; }
.testimonial-carousel__track { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .testimonial-carousel__track { scroll-behavior: auto; } }
/* ── components/logo-carousel ── */
/**
 * LogoCarousel — Pink Design System
 * domain: marketing | category: content | status: beta
 * Referência: pinkapp.com "Estamos em boas companhias"
 */

.logo-carousel {
  padding: 64px var(--spacing-component-padding-lg);
  text-align: center;
  overflow: hidden;
}

.logo-carousel__heading {
  font-family: var(--font-family-marketing);
  font-size: clamp(22px, 2.5vw, 28px);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-headline);
  margin: 0 0 8px;
}

.logo-carousel__subtitle {
  font-family: var(--font-family-app);
  font-size: var(--font-size-md);
  color: var(--color-text-body-secondary);
  margin: 0 0 40px;
}

/* máscara de fade nas bordas */
.logo-carousel__mask {
  position: relative;
  overflow: hidden;
}

.logo-carousel__mask::before,
.logo-carousel__mask::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}

.logo-carousel__mask::before {
  left: 0;
  background: linear-gradient(to right, white, transparent);
}

.logo-carousel__mask::after {
  right: 0;
  background: linear-gradient(to left, white, transparent);
}

/* track animado */
.logo-carousel__track {
  display: flex;
  gap: 48px;
  align-items: center;
  width: max-content;
  animation: logo-scroll 30s linear infinite;
}

.logo-carousel__track:hover {
  animation-play-state: paused;
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* move metade — segunda metade é duplicata */
}

.logo-carousel__logo {
  height: 32px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(100%);
  flex-shrink: 0;
  transition: opacity var(--transition-base), filter var(--transition-base);
}

.logo-carousel__track:hover .logo-carousel__logo {
  opacity: 0.8;
  filter: grayscale(40%);
}

/* respeita preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .logo-carousel__track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
}

/* ── marketing.content.logo-carousel.paused (10-16): além do hover, pausa por controle explícito
   (.logo-carousel--paused, botão de pausa — WCAG 2.2.2) e quando algo dentro recebe foco. ── */
.logo-carousel--paused .logo-carousel__track,
.logo-carousel:focus-within .logo-carousel__track { animation-play-state: paused; }
.logo-carousel--paused .logo-carousel__logo { opacity: 0.8; filter: grayscale(40%); }
/* ── components/pricing-card ── */
/* PricingCard — card de plano para tabelas de preço e propostas comerciais.
 * Domain: marketing. Usa tokens semânticos (sem hex raw). Ver component.json.
 * Composição esperada: .pricing-grid > .pricing-card (n×), um deles .pricing-card--featured. */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  max-width: 1040px;
  margin-inline: auto;
}

.pricing-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 2rem 1.75rem;
  background: var(--color-surface-card-default);
  border-radius: var(--radius-pricing-card);
  box-shadow: var(--shadow-pricing-card);
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(17, 24, 39, 0.10);
}

/* Destaque — "Mais popular". Borda pink + leve scale; eleva sobre os vizinhos. */
.pricing-card--featured {
  border: 2px solid var(--color-action-primary-bg-solid);
  transform: scale(1.04);
  z-index: 1;
}
.pricing-card--featured:hover {
  transform: scale(1.04) translateY(-4px);
}

.pricing-card__badge {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-action-primary-bg-solid);
  color: var(--color-action-primary-text-default);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-card__name {
  font-family: var(--font-family-marketing);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-headline);
  margin: 0;
}

.pricing-card__price {
  display: flex;
  align-items: flex-start;
  gap: 0.2rem;
  line-height: 1;
  color: var(--color-text-headline);
}
.pricing-card__currency {
  font-size: 1.1rem;
  font-weight: 600;
  margin-top: 0.35rem;
  color: var(--color-text-body-secondary);
}
.pricing-card__amount {
  font-family: var(--font-family-marketing);
  font-size: 2.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.pricing-card__period {
  align-self: flex-end;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-body-secondary);
  margin-bottom: 0.45rem;
}

.pricing-card__desc {
  font-size: 0.9rem;
  color: var(--color-text-body-secondary);
  margin: -0.5rem 0 0;
}

.pricing-card__features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}
.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--color-text-body-default);
}
/* check de sucesso (SVG inline ou ::before) */
.pricing-card__feature::before {
  content: "";
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.05rem;
  border-radius: 50%;
  background: var(--color-feedback-success-bg-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath fill-rule='evenodd' d='M16.7 5.3a1 1 0 0 1 0 1.4l-7.5 7.5a1 1 0 0 1-1.4 0L3.3 9.9a1 1 0 1 1 1.4-1.4l3.3 3.3 6.8-6.8a1 1 0 0 1 1.4 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}
/* feature ausente (comparativos) */
.pricing-card__feature--off {
  color: var(--color-text-muted);
}
.pricing-card__feature--off::before {
  background: var(--color-surface-page-subtle);
  opacity: 0.7;
}

.pricing-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.25rem;
  border-radius: var(--radius-pricing-cta);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
/* CTA primário (featured) */
.pricing-card--featured .pricing-card__cta,
.pricing-card__cta--primary {
  background: var(--color-action-primary-bg-default);
  color: var(--color-action-primary-text-default);
  box-shadow: var(--shadow-pricing-cta);
}
/* CTA secundário (não-featured) */
.pricing-card__cta--ghost {
  background: transparent;
  color: var(--color-text-brand);
  box-shadow: inset 0 0 0 1.5px var(--color-border-subtle);
}
.pricing-card__cta--ghost:hover {
  background: var(--color-surface-marketing-subtle);
}

/* compact — comparativos densos */
.pricing-card--compact {
  padding: 1.25rem 1.25rem;
  gap: 0.85rem;
}
.pricing-card--compact .pricing-card__amount { font-size: 2rem; }

/* ── Responsivo ── (diretriz Pink: tudo nasce responsivo) */
@media (max-width: 900px) {
  .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  /* no mobile o featured não escala (evita corte/overflow) */
  .pricing-card--featured { transform: none; }
  .pricing-card--featured:hover { transform: translateY(-4px); }
}

/* ── foco + plano escolhido (10-16). Evento pricing.plan_selected: o card do plano escolhido
   ganha .pricing-card--selected (anel rosa), e o CTA aria-pressed="true". ── */
.pricing-card__cta:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: var(--spacing-fine-2); }
.pricing-card--selected { box-shadow: 0 0 0 var(--border-width-thick) var(--color-action-primary-bg-solid), var(--shadow-card-default); }
/* ── components/collapsible ── */
/**
 * Collapsible — Pink Design System
 * produto.surface.collapsible | category: surface | status: beta
 * Seção que abre e fecha, CSS puro sobre <details>/<summary>.
 * Variantes: card · flush · count. Estados: closed · open · hover · focus · disabled. Só tokens semânticos.
 */
/* produto.surface.collapsible.closed — só o resumo, chevron apontando para a direita */
.collapsible { border-radius: var(--radius-component-md); }
.collapsible__summary {
  display: flex; align-items: center; gap: var(--spacing-component-gap-sm);
  min-height: var(--size-control-sm); padding: 0 var(--spacing-component-padding-xs);
  border-radius: var(--radius-component-sm); list-style: none; cursor: pointer; user-select: none;
  color: var(--color-text-label); font-size: var(--font-size-md); font-weight: var(--font-weight-bold);
}
.collapsible__summary::-webkit-details-marker { display: none; }
.collapsible__summary::before {
  content: ""; flex: none; width: .4em; height: .4em; margin: 0 .25em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
  transition: transform var(--motion-duration-fast) var(--motion-easing-standard);
}
.collapsible__title { flex: 1 1 auto; min-width: 0; margin: 0; font: inherit; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* produto.surface.collapsible.open — chevron para baixo, corpo à vista */
.collapsible[open] > .collapsible__summary::before { transform: rotate(45deg); }
.collapsible__body { padding: var(--spacing-component-padding-xs) var(--spacing-component-padding-xs) var(--spacing-component-padding-sm); }
/* produto.surface.collapsible.hover */
.collapsible__summary:hover, .collapsible__summary--hover { background: var(--color-surface-hover-default); }
/* produto.surface.collapsible.focus */
.collapsible__summary:focus-visible, .collapsible__summary--focus { outline: none; box-shadow: var(--shadow-focus-ring); }
/* produto.surface.collapsible.disabled — details não tem disabled: aria-disabled + tabindex=-1 no summary */
.collapsible__summary[aria-disabled="true"] { color: var(--color-text-muted); background: none; cursor: default; pointer-events: none; }

/* produto.surface.collapsible.count — um número à direita (quantos itens dentro) */
.collapsible__count { margin-left: auto; flex: none; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: var(--font-weight-regular); }

/* produto.surface.collapsible.card — com borda própria, para seção solta na página */
.collapsible--card { border: 1px solid var(--color-border-default); background: var(--color-surface-card-default); }
.collapsible--card > .collapsible__summary { padding: 0 var(--spacing-component-padding-sm); border-radius: var(--radius-component-md); }
.collapsible--card[open] > .collapsible__summary { border-bottom: 1px solid var(--color-border-subtle); border-radius: var(--radius-component-md) var(--radius-component-md) 0 0; }
.collapsible--card > .collapsible__body { padding: var(--spacing-component-padding-sm) var(--spacing-component-padding-md); }

/* produto.surface.collapsible.flush — sem recuo: dentro de painel que já tem margem */
.collapsible--flush > .collapsible__summary { padding: 0; }
.collapsible--flush > .collapsible__summary:focus-visible { box-shadow: var(--shadow-focus-ring); }
.collapsible--flush > .collapsible__body { padding: var(--spacing-component-padding-xs) 0 var(--spacing-component-padding-sm); }
/* ── components/nav-footer ── */
/**
 * NavFooter — Pink Design System
 * domain: marketing | category: navigation | status: beta
 * Referência: pinkapp.com footer
 */

.nav-footer {
  border-top: 1px solid #F5F5F5;
  background: var(--color-surface-page-default);
  padding: 64px var(--spacing-component-padding-lg) 32px;
}

.nav-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* grid principal */
.nav-footer__grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(5, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

/* coluna logo */
.nav-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.nav-footer__logo {
  height: 28px;
  width: auto;
  display: block;
}

.nav-footer__brand-desc {
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  color: var(--color-text-body-secondary);
  line-height: 1.6;
  max-width: 200px;
}

/* social icons */
.nav-footer__social {
  display: flex;
  gap: 12px;
}

.nav-footer__social-link {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-component-default);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-body-secondary);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-footer__social-link:hover {
  background: #FDEEF5;
  color: var(--color-action-primary-bg-solid);
}

/* coluna de links */
.nav-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-footer__col-heading {
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-body-default);
  margin: 0 0 4px;
}

.nav-footer__link {
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  color: var(--color-text-body-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-footer__link:hover {
  color: var(--color-action-primary-bg-solid);
}

/* linha inferior */
.nav-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--color-border-subtle);
  gap: 16px;
  flex-wrap: wrap;
}

.nav-footer__copyright {
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.nav-footer__legal {
  display: flex;
  gap: 16px;
}

.nav-footer__legal a {
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.nav-footer__legal a:hover {
  color: var(--color-text-body-secondary);
}

/* seletor de idioma */
.nav-footer__lang {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-app);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-component-pill);
  padding: 4px 12px;
  cursor: pointer;
}

/* responsivo */
@media (max-width: 900px) {
  .nav-footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .nav-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 480px) {
  .nav-footer__grid {
    grid-template-columns: 1fr;
  }

  .nav-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* foco de teclado (A2, 10-16) */
.nav-footer__link:focus-visible, .nav-footer__social-link:focus-visible, .nav-footer__legal a:focus-visible { outline: var(--border-width-thick) solid var(--color-border-focus); outline-offset: var(--spacing-fine-2); border-radius: var(--radius-component-sm); }
/* ── components/button ── */
/**
 * Button — Pink Design System
 * produto.action.button | category: action | status: beta
 * Uma ação: <button class="btn"> (ou <a class="btn"> quando navega). Twenty: Button, IconButton,
 * LightButton, MainButton. Formalizado em r6 lote 6 (sai do LEGACY): só tokens.
 * v2.11 (2.1.0): + xs e square — o botão de ícone do chat (.icon-btn/.btn-outlined do wip) virou variante daqui.
 * Peso (variante): secondary (a base) · primary · ghost · soft · link · whatsapp.
 * Tom (ortogonal ao peso): danger · success. Tamanho: sm · (md) · lg. Forma: icon-only · block.
 * Slot: with-kbd (atalho). Estados: default · hover · focus · active · disabled · loading.
 *
 * Cada peso e cada tom só escrevem as propriedades locais (--btn-*), que só leem tokens; a regra
 * base desenha. Assim tom × peso não vira uma regra por combinação de cor.
 * Axioma B1: o texto do botão é o verbo ("Salvar visão", não "OK"); icon-only leva aria-label.
 * Axioma B2: uma ação primary por região (página, modal, formulário).
 */
/* produto.action.button.default — também .secondary: contorno sobre a superfície (a base) */
.btn {
  --btn-h: var(--size-control-md); --btn-pad-x: var(--spacing-component-padding-lg); --btn-font: var(--font-size-md);
  --btn-bg: var(--color-action-secondary-bg-default); --btn-fg: var(--color-action-secondary-text-default);
  --btn-border: var(--color-action-secondary-border-default); --btn-shadow: 0 0 0 transparent; --btn-ring: 0 0 0 transparent;
  --btn-bg-hover: var(--color-action-secondary-bg-hover); --btn-fg-hover: var(--btn-fg);
  --btn-border-hover: var(--color-action-secondary-border-hover); --btn-shadow-hover: var(--btn-shadow);
  box-sizing: border-box; position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-component-gap-sm);
  min-height: var(--btn-h); margin: 0; padding: 0 var(--btn-pad-x);
  border: 1.5px solid var(--btn-border); border-radius: var(--radius-component-pill);
  background: var(--btn-bg); color: var(--btn-fg); box-shadow: var(--btn-shadow), var(--btn-ring);
  font-family: var(--font-family-app); font-size: var(--btn-font); font-weight: var(--font-weight-bold); line-height: 1.2;
  white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background var(--motion-duration-fast) var(--motion-easing-standard),
    border-color var(--motion-duration-fast) var(--motion-easing-standard),
    color var(--motion-duration-fast) var(--motion-easing-standard),
    box-shadow var(--motion-duration-fast) var(--motion-easing-standard);
}
.btn:visited { color: var(--btn-fg); }

/* produto.action.button.hover */
.btn:hover:not(:disabled):not([aria-disabled="true"]), .btn--hover {
  background: var(--btn-bg-hover); color: var(--btn-fg-hover); border-color: var(--btn-border-hover);
  box-shadow: var(--btn-shadow-hover), var(--btn-ring); text-decoration: none;
}

/* produto.action.button.focus — só no teclado (:focus-visible). O anel é uma propriedade local que toda
   sombra do botão soma (repouso, hover, pressionado): passar o mouse num botão focado não apaga o foco. */
.btn:focus-visible, .btn--focus { outline: none; --btn-ring: var(--shadow-focus-ring); }

/* produto.action.button.active — pressionado (clique) e aria-pressed="true" (botão de alternar) */
.btn:active:not(:disabled):not([aria-disabled="true"]), .btn[aria-pressed="true"], .btn--active {
  background: var(--btn-bg-hover); border-color: var(--btn-border-hover); box-shadow: var(--btn-ring);
}
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }

/* produto.action.button.disabled — :disabled no <button>; aria-disabled="true" no <a> (sem href) */
.btn:disabled, .btn[aria-disabled="true"], .btn--disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* produto.action.button.loading — aria-busy="true": esperando o servidor. O rótulo fica (a largura não
   pula) e o anel gira antes dele. O CSS só barra o PONTEIRO (pointer-events); Enter/Espaço no botão
   focado e Enter num campo do formulário continuam ativando — CSS não bloqueia teclado. Quem envia
   ignora a ativação enquanto houver aria-busy (contrato no README: hx-sync="this:drop" ou guarda no
   handler). Em movimento reduzido o anel fica parado. */
.btn[aria-busy="true"], .btn--loading { cursor: wait; pointer-events: none; }
.btn[aria-busy="true"]::before, .btn--loading::before {
  content: ""; flex: none; box-sizing: border-box; width: 1em; height: 1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-component-pill);
  animation: btn-spin calc(var(--motion-duration-slow) * 2) linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ── Peso ─────────────────────────────────────────────────────────────── */

/* produto.action.button.secondary — a base (.btn sozinho); a classe deixa a escolha explícita no markup */
.btn--secondary { /* a base */ }

/* produto.action.button.primary — a ação principal da região: gradiente de marca, nunca sólido */
.btn--primary {
  --btn-bg: var(--color-action-primary-bg-default); --btn-fg: var(--color-action-primary-text-default);
  --btn-border: transparent; --btn-shadow: var(--shadow-button-primary);
  --btn-bg-hover: var(--color-action-primary-bg-hover); --btn-border-hover: transparent;
  --btn-shadow-hover: var(--shadow-button-primary-hover);
}

/* produto.action.button.ghost — ação de apoio em barra e cabeçalho: sem caixa até o hover */
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--color-text-body-secondary); --btn-border: transparent;
  --btn-bg-hover: var(--color-surface-hover-default); --btn-fg-hover: var(--color-text-body-default); --btn-border-hover: transparent;
}

/* produto.action.button.soft — peso médio: fundo tingido, sem contorno (Twenty: tertiary/soft) */
.btn--soft {
  --btn-bg: var(--color-action-soft-bg-default); --btn-fg: var(--color-action-soft-text-default); --btn-border: transparent;
  --btn-bg-hover: var(--color-action-soft-bg-hover); --btn-fg-hover: var(--color-action-soft-text-hover); --btn-border-hover: transparent;
}

/* produto.action.button.link — ação que lê como link dentro de texto, ajuda ou célula */
.btn--link {
  --btn-h: auto; --btn-pad-x: 0; --btn-bg: transparent; --btn-border: transparent; --btn-bg-hover: transparent; --btn-border-hover: transparent;
  --btn-fg: var(--color-action-link-text-default); --btn-fg-hover: var(--color-action-link-text-hover);
  border-width: 0; border-radius: var(--radius-component-sm); font-size: inherit;
}
.btn--link:hover:not(:disabled):not([aria-disabled="true"]) { text-decoration: underline; }
.btn--link:active { transform: none; }

/* produto.action.button.whatsapp — abre a conversa no WhatsApp: verde do canal com texto escuro
   (--color-action-whatsapp-text-default, 8.9:1; branco no verde dá 1.98:1 e reprova AA) */
.btn--whatsapp {
  --btn-bg: var(--color-action-whatsapp-bg-default); --btn-fg: var(--color-action-whatsapp-text-default); --btn-border: transparent;
  --btn-bg-hover: var(--color-action-whatsapp-bg-hover); --btn-border-hover: transparent;
}

/* ── Tom ───────────────────────────────────────────────────────────────── */

/* produto.action.button.danger — apaga, revoga, desconecta. Contorno vermelho na base; sólido com
   primary; tingido com soft; só o texto com ghost e link. A confirmação é do confirm-dialog. */
.btn--danger {
  --btn-fg: var(--color-feedback-error-text-default); --btn-border: var(--color-feedback-error-border);
  --btn-bg-hover: var(--color-feedback-error-bg-subtle); --btn-border-hover: var(--color-feedback-error-text-default);
}
.btn--danger.btn--primary {
  --btn-bg: var(--color-action-danger-bg-default); --btn-fg: var(--color-action-danger-text-default); --btn-border: transparent;
  --btn-bg-hover: var(--color-action-danger-bg-hover); --btn-border-hover: transparent; --btn-shadow: 0 0 0 transparent;
}
.btn--danger.btn--soft {
  --btn-bg: var(--color-feedback-error-bg-subtle); --btn-border: transparent;
  --btn-bg-hover: var(--color-feedback-error-bg-strong); --btn-fg-hover: var(--color-feedback-error-text-strong); --btn-border-hover: transparent;
}
.btn--danger.btn--ghost { --btn-border: transparent; --btn-border-hover: transparent; --btn-fg-hover: var(--color-feedback-error-text-default); }
.btn--danger.btn--link { --btn-border: transparent; --btn-fg-hover: var(--color-feedback-error-text-strong); --btn-bg-hover: transparent; --btn-border-hover: transparent; }

/* produto.action.button.success — conclui ou aprova (marcar como ganho, aprovar importação) */
.btn--success {
  --btn-fg: var(--color-feedback-success-text-default); --btn-border: var(--color-feedback-success-border);
  --btn-bg-hover: var(--color-feedback-success-bg-subtle); --btn-border-hover: var(--color-feedback-success-text-default);
}
.btn--success.btn--primary {
  --btn-bg: var(--color-action-success-bg-default); --btn-fg: var(--color-action-success-text-default); --btn-border: transparent;
  --btn-bg-hover: var(--color-action-success-bg-hover); --btn-border-hover: transparent; --btn-shadow: 0 0 0 transparent;
}
.btn--success.btn--soft {
  --btn-bg: var(--color-feedback-success-bg-subtle); --btn-border: transparent;
  --btn-bg-hover: var(--color-feedback-success-bg-strong); --btn-fg-hover: var(--color-feedback-success-text-strong); --btn-border-hover: transparent;
}
.btn--success.btn--ghost { --btn-border: transparent; --btn-border-hover: transparent; --btn-fg-hover: var(--color-feedback-success-text-default); }
.btn--success.btn--link { --btn-border: transparent; --btn-fg-hover: var(--color-feedback-success-text-strong); --btn-bg-hover: transparent; --btn-border-hover: transparent; }

/* ── Tamanho e forma ───────────────────────────────────────────────────── */

/* produto.action.button.sm — barra de filtro, linha de tabela, cabeçalho de painel, rodapé denso */
.btn--sm { --btn-h: var(--size-control-sm); --btn-pad-x: var(--spacing-component-padding-md); }

/* produto.action.button.lg — CTA de página vazia e de login */
.btn--lg { --btn-h: var(--size-control-lg); --btn-pad-x: calc(var(--spacing-component-padding-lg) + var(--spacing-component-padding-xs)); --btn-font: var(--font-size-lg); }

/* produto.action.button.icon-only — só o ícone: quadrado do tamanho do controle; aria-label obrigatório */
.btn--icon-only { width: var(--btn-h); padding: 0; }
.btn--icon-only[aria-busy="true"] > *, .btn--icon-only.btn--loading > * { display: none; }

/* produto.action.button.block — ocupa a largura (rodapé de modal no celular, login) */
.btn--block { display: flex; width: 100%; }

/* produto.action.button.xs — v2.11: barra densa (pílula de ações da mensagem, chip de ação): --size-control-xs (28) */
.btn--xs { --btn-h: var(--size-control-xs); --btn-pad-x: var(--spacing-component-padding-sm); --btn-font: var(--font-size-sm); }

/* produto.action.button.square — v2.11 (chat): raio de controle em vez de pílula — barra de ferramentas,
   cabeçalho do chat, composer, painel lateral. Com icon-only o glifo (SVG ou emoji) usa o tamanho de ícone.
   A altura de cada barra do chat vem do contêiner (--btn-h = --size-chat-control-*), não de um tamanho novo. */
.btn--square { border-radius: var(--radius-control-default); }
.btn--square.btn--icon-only { --btn-font: var(--font-size-icon-md); font-weight: var(--font-weight-regular); }

/* produto.action.button.with-kbd — o atalho dentro do botão: <kbd class="kbd kbd--sm btn__kbd">.
   Sobre primary/danger/success sólidos use também kbd--inverse. Some no celular (sem teclado). */
.btn__kbd { margin-inline-start: var(--spacing-component-gap-xs); }
@media (hover: none) { .btn__kbd { display: none; } }

/* Ícone dentro do botão (SVG do consumidor, stroke="currentColor"): segue a cor e o tamanho do texto */
.btn__icon { flex: none; width: 1.15em; height: 1.15em; }

/* Aliases da v1 do DS (sessão 1) — mesma regra, nome antigo. Saem quando nenhum consumidor os usar. */
.btn-cta { --btn-bg: var(--color-action-primary-bg-default); --btn-fg: var(--color-action-primary-text-default); --btn-border: transparent; --btn-shadow: var(--shadow-button-primary); --btn-bg-hover: var(--color-action-primary-bg-hover); --btn-border-hover: transparent; --btn-shadow-hover: var(--shadow-button-primary-hover); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--color-text-body-secondary); --btn-border: transparent; --btn-bg-hover: var(--color-surface-hover-default); --btn-fg-hover: var(--color-text-body-default); --btn-border-hover: transparent; }
.btn-whatsapp { --btn-bg: var(--color-action-whatsapp-bg-default); --btn-fg: var(--color-action-whatsapp-text-default); --btn-border: transparent; --btn-bg-hover: var(--color-action-whatsapp-bg-hover); --btn-border-hover: transparent; }
.btn-sm { --btn-h: var(--size-control-sm); --btn-pad-x: var(--spacing-component-padding-md); }
.btn-lg { --btn-h: var(--size-control-lg); --btn-font: var(--font-size-lg); }
.btn-full { display: flex; width: 100%; }

/* v2.11: o display do componente passava por cima do [hidden] do navegador */
.btn[hidden] { display: none; }
/* ── components/badge ── */
/**
 * Badge — Pink Design System
 * category: data-display | status: beta
 * Variants: brand, neutral, category-marketing, category-servico, channel
 */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--spacing-component-padding-xs) var(--spacing-component-padding-sm);
  border-radius: var(--radius-badge);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  white-space: nowrap;
}

/* brand — pink tint */
.badge--brand {
  background: #FDEEF5;
  color: var(--color-action-primary-bg-solid);
}

/* neutral — cinza */
.badge--neutral {
  background: var(--color-surface-component-default);
  color: var(--color-text-body-secondary);
}

/* category: Marketing — amber */
.badge--category-marketing {
  background: #FEF3C7;
  color: #92400E;
}

/* category: Serviço — green */
.badge--category-servico {
  background: #D1FAE5;
  color: #047857;
}

/* channel — usa cor do canal */
.badge--channel {
  background: var(--color-surface-component-default);
  color: var(--color-text-body-default);
}

.badge--channel-whatsapp { background: #DCF8C6; color: #1a6e38; }
.badge--channel-instagram { background: #FCE7F3; color: #9D174D; }
.badge--channel-facebook  { background: #DBEAFE; color: #1E40AF; }