/* Tokens de design do site. Único arquivo da app onde cores literais são permitidas (tests/tokens.test.ts).
   Valores canônicos: docs/brand-design/logo/design-tokens/connectzme-tokens.{css,json} (v1.1, temas claro e
   escuro) e docs/fundacao_projeto/02_PRD/CTO2_SITE_BLOG_IDIOMAS_TEMA_ESCURO_E_NAVEGACAO_PRD.md §2.1.
   O tema segue o aparelho (spec websites/tema-claro-escuro): o arquivo canônico usa [data-theme="dark"];
   aqui o mesmo conjunto escuro é aplicado por prefers-color-scheme. Os tokens semânticos do arquivo canônico
   que vêm como referência não resolvida ({color.brand…}) estão resolvidos abaixo pelos valores do JSON. */
:root {
  color-scheme: light dark;

  /* Marca e modalidades (iguais nos dois temas). */
  --connectz-color-brand-friendship-light: #D7F0EF;
  --connectz-color-brand-friendship-base: #28A3A2;
  --connectz-color-brand-friendship-dark: #126665;
  --connectz-color-brand-business-light: #DDE5FA;
  --connectz-color-brand-business-base: #3152AD;
  --connectz-color-brand-business-dark: #1E326F;
  --connectz-color-brand-relationship-light: #E8E3F8;
  --connectz-color-brand-relationship-base: #7866D8;
  --connectz-color-brand-relationship-dark: #493993;
  --connectz-color-brand-relationship-on-base-accessible: #7663D5;

  /* Neutros e feedback canônicos (claro). */
  --connectz-color-neutral-warm-white: #F7F5F0;
  --connectz-color-neutral-surface: #FFFFFF;
  --connectz-color-neutral-ink: #111315;
  --connectz-color-neutral-muted: #5E6268;
  --connectz-color-neutral-border: #D8D4CB;
  --connectz-color-neutral-subtle: #EFECE5;

  /* Tema (claro): papéis semânticos que mudam com o tema. */
  --connectz-theme-background: #F7F5F0;
  --connectz-theme-background-alt: #EFECE5;
  --connectz-theme-surface: #FFFFFF;
  --connectz-theme-surface-alt: #EFECE5;
  --connectz-theme-text-primary: #111315;
  --connectz-theme-text-secondary: #5E6268;
  --connectz-theme-border: #D8D4CB;
  --connectz-theme-border-subtle: #EFECE5;
  --connectz-theme-focus-ring: #3152AD;
  --connectz-theme-overlay: rgba(17, 19, 21, 0.60);
  --connectz-theme-feedback-success: #1F7A53;
  --connectz-theme-feedback-warning: #8A5A00;
  --connectz-theme-feedback-danger: #B3261E;
  --connectz-theme-feedback-info: #3152AD;
  /* Texto e ícone de modalidade sobre o fundo do tema (design system, 03_CORES_E_TEMAS §modalidades):
     no claro, tons escuros (base de Amizade e Relacionamento não atinge 4,5:1 como texto). */
  --connectz-theme-friendship-text: #126665;
  --connectz-theme-business-text: #3152AD;
  --connectz-theme-relationship-text: #493993;

  /* Componentes (design system, 06_COMPONENTES): primário institucional = fundo Ink + texto branco no claro;
     fundo #F7FBFF + texto #0B1120 no escuro. Sombra só no claro (no escuro, elevação por borda/superfície). */
  --connectz-theme-button-primary-bg: #111315;
  --connectz-theme-button-primary-text: #FFFFFF;
  --connectz-theme-shadow: #111315;
  /* Trios RGB para pacotes que usam rgb(var(--x)/α): superfície e cor de sombra do tema. */
  --connectz-theme-surface-rgb: 255 255 255;
  --connectz-theme-shadow-rgb: 17 19 21;
  /* Texto sobre preenchimento de marca e sobre as seções/artes escuras (igual nos dois temas). */
  --connectz-color-on-brand: #FFFFFF;
  /* Seção escura do design system (ex.: fundo dos banners da home), igual nos dois temas. */
  --connectz-color-dark-canvas: #0B1120;

  /* Tokens locais da home institucional (tela entregue em 08/10/2026), só decorativos:
     lavagem fria do fundo, acento do anel dos CTAs e brilho da faixa de Universidade. */
  --cz-home-wash: #F4F6FB;
  --cz-home-orbit-accent: #77DFF1;
  --cz-home-friend-glow: #55D5CE;
  /* Texto de apoio com contraste reforçado (prefers-contrast: more). */
  --cz-home-contrast-text: #3D4146;

  /* Aliases usados pelas páginas existentes (mesmos valores do v1.0). */
  --connectz-ink: #111315;
  --connectz-surface: #FFFFFF;
  --connectz-radius-pill: 999px;

  /* Token local: cor medida na borda da arte aprovada
     (apresentacao-institucional-site.jpg, moda dos pixels de borda = rgb(251, 246, 242)).
     Difere do Warm White canônico (#F7F5F0) para não criar emenda visível ao redor da arte. */
  --cz-site-placeholder-surface: #FBF6F2;

  /* Tokens locais da moldura de overlay (T7). Véu sobre a página principal desfocada:
     Ink #111315 com transparência; base Warm White #F7F5F0 enquanto o snapshot carrega. */
  --cz-overlay-veil-base: #F7F5F0;
  /* Véu sobre a página principal nas laterais (design D3): quanto da página de trás aparece. Valor em teste
     pelo CTO (tarefa 5.5, 08/10/2026): 20% no claro e 35% no escuro; aprovação visual final no staging. */
  --cz-overlay-veil-color: #111315;
  --cz-overlay-veil-alpha: 20%;
  --cz-overlay-veil: color-mix(in srgb, var(--cz-overlay-veil-color) var(--cz-overlay-veil-alpha), transparent);
  --cz-overlay-panel-shadow-left: inset -28px 0 32px -24px rgba(17, 19, 21, 0.55);
  --cz-overlay-panel-shadow-right: inset 28px 0 32px -24px rgba(17, 19, 21, 0.55);
  --cz-overlay-close-border: rgba(17, 19, 21, 0.16);
  --cz-overlay-close-shadow: 0 8px 24px rgba(17, 19, 21, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Tema (escuro): conjunto [data-theme="dark"] do arquivo canônico. */
    --connectz-theme-background: #0B1120;
    --connectz-theme-background-alt: #0A1526;
    --connectz-theme-surface: #101828;
    --connectz-theme-surface-alt: #13243F;
    --connectz-theme-text-primary: #F7FBFF;
    --connectz-theme-text-secondary: #D5DEEA;
    --connectz-theme-border: rgba(123, 140, 170, 0.26);
    --connectz-theme-border-subtle: rgba(123, 140, 170, 0.26);
    --connectz-theme-focus-ring: #DDE5FA;
    --connectz-theme-overlay: rgba(0, 0, 0, 0.60);
    --connectz-theme-feedback-success: #7DD3A8;
    --connectz-theme-feedback-warning: #F0C674;
    --connectz-theme-feedback-danger: #F2B8B5;
    --connectz-theme-feedback-info: #DDE5FA;
    --connectz-theme-button-primary-bg: #F7FBFF;
    --connectz-theme-button-primary-text: #0B1120;
    --connectz-theme-shadow: transparent;
    --connectz-theme-surface-rgb: 16 24 40;
    --connectz-theme-shadow-rgb: 0 0 0;
    --cz-home-wash: #0A1526;
    /* Base das laterais do overlay enquanto o snapshot carrega: fundo do tema escuro. */
    --cz-overlay-veil-base: #0B1120;
    --cz-overlay-veil-color: #000000;
    --cz-overlay-veil-alpha: 35%;
    --cz-home-contrast-text: #F7FBFF;
    /* No escuro, texto de modalidade usa os tons claros (Business base como texto dá 2,6:1). */
    --connectz-theme-friendship-text: #D7F0EF;
    --connectz-theme-business-text: #DDE5FA;
    --connectz-theme-relationship-text: #E8E3F8;
  }
}

/* T10 — tema escuro do pacote landingpage-sobre (registro de decisões §2.8). Só tokens; cada regra comenta a cor do
   pacote → token. Critérios (design system, 03_CORES_E_TEMAS §3): fundos creme do pacote → fundo do tema escuro
   (#0B1120) com o mesmo alfa; superfícies brancas → superfície (#101828) com o mesmo alfa; textos cinza-escuros →
   texto do tema (#F7FBFF forte, #D5DEEA apoio); texto de modalidade → tom claro; tinta de chip/área de modalidade →
   tom escuro; sombras → contorno (elevação por borda). As seções que o pacote já faz escuras (.section-dark, cartões
   do time, banner do rodapé, pílulas de informação) ficam como estão. Onde o pacote usa !important, a folha também. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--connectz-theme-background);                          /* #F7F5F0 */
    --bg-soft: var(--connectz-theme-surface-alt);                    /* #EFECE5 */
    --ink: var(--connectz-theme-text-primary);                       /* #111315 */
    --muted: var(--connectz-theme-text-secondary);                   /* #5E6268 */
    --line: var(--connectz-theme-border);                            /* #D8D4CB */
    --line-2: var(--connectz-theme-border);                          /* #D8D4CB */
    --white: var(--connectz-theme-surface);                          /* #fff */
    --shadow: inset 0 0 0 1px var(--connectz-theme-border);          /* sombras dupla → contorno */
    --shadow-lg: inset 0 0 0 1px var(--connectz-theme-border);
    --friend-soft: var(--connectz-color-brand-friendship-dark);      /* área de Amizade #D7F0EF → #126665 */
    --business-soft: var(--connectz-color-brand-business-dark);      /* área de Business #DDE5FA → #1E326F */
    --relationship-soft: var(--connectz-color-brand-relationship-dark); /* área de Relacionamento #E8E3F8 → #493993 */
    --cz-dark-text: var(--connectz-theme-text-primary);
    --cz-dark-text-2: var(--connectz-theme-text-secondary);
    --cz-dark-surface: var(--connectz-theme-surface);
    --cz-dark-bg: var(--connectz-theme-background);
    --cz-dark-border: var(--connectz-theme-border);
    --cz-dark-ring: inset 0 0 0 1px var(--connectz-theme-border);
  }

  /* Página e cabeçalho: #f7f4ee/#f5f2eb (creme) → fundo do tema; rgba(247,244,238,.84) → fundo .84; borda creme → borda. */
  body { background: var(--cz-dark-bg); }
  ::selection { background: var(--connectz-color-brand-business-dark); }                /* #dfe7ff */
  .skip { background: var(--connectz-theme-button-primary-bg); color: var(--connectz-theme-button-primary-text); } /* #111/#fff */
  .site-header { background: color-mix(in srgb, var(--cz-dark-bg) 84%, transparent); border-bottom-color: var(--cz-dark-border); }
  .nav a:not(.contact-pill) { color: var(--cz-dark-text-2); }                          /* #55606d */
  .contact-pill { background: color-mix(in srgb, var(--cz-dark-surface) 86%, transparent); box-shadow: var(--cz-dark-ring); }
  .section-fade-top::before { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cz-dark-bg) 86%, transparent) 60%, var(--cz-dark-bg) 100%); }
  .section-fade-bottom::after { background: linear-gradient(180deg, var(--cz-dark-bg) 0%, color-mix(in srgb, var(--cz-dark-bg) 86%, transparent) 40%, transparent 100%); }

  /* Texto: cinzas escuros do pacote → texto do tema. */
  p { color: var(--cz-dark-text-2); }                                                 /* #3f4650 */
  .lead { color: var(--cz-dark-text-2); }                                             /* #434b56 */
  .strong-line { color: var(--cz-dark-text); }                                        /* #40464f */
  .float-card p, .caption-card span, .photo-first-note span, .mini-float span { color: var(--cz-dark-text-2); } /* #4b5360 #55606d #56606c #555e6a */
  .mini-float strong, .label, .feature-chip b, .stat-card b, .pill-card b { color: var(--cz-dark-text); } /* #212733 #242b36 #222a35 */
  .pill-card span, .stat-card span, .feature-chip span, .intent-card p, .principle-copy .label,
  .hero-tag.modality-tag span, .whatsapp-check span, .company-status { color: var(--cz-dark-text-2); } /* #57606d #58616c #59626e #515965 #6a7280 #3f4854 #606975 */
  .eyebrow { color: var(--connectz-color-brand-business-light); }                     /* var(--business) como texto */
  .pill-card small { color: var(--connectz-color-brand-business-light) !important; }  /* var(--business) !important */

  /* Cartões claros: branco/branco translúcido → superfície com o mesmo alfa; bordas brancas/creme → borda; sombra → contorno. */
  .hero-tag { background: color-mix(in srgb, var(--cz-dark-surface) 84%, transparent); box-shadow: var(--cz-dark-ring); }
  .frame { background: var(--connectz-theme-surface-alt); }                           /* #dfe7f2 */
  .glass-orb { border-color: var(--cz-dark-border); }
  .float-card { background: color-mix(in srgb, var(--cz-dark-surface) 76%, transparent); border-color: var(--cz-dark-border); box-shadow: var(--cz-dark-ring); }
  .image-frame { background: linear-gradient(180deg, var(--cz-dark-surface), var(--connectz-theme-surface-alt)); } /* #eff3fb→#e2e5ee */
  .chip { background: var(--cz-dark-surface); box-shadow: var(--cz-dark-ring); }
  .concept-shell { border-color: var(--cz-dark-border); }
  .concept-label { background: color-mix(in srgb, var(--cz-dark-surface) 88%, transparent); box-shadow: var(--cz-dark-ring); }
  .mini-float { background: color-mix(in srgb, var(--cz-dark-surface) 90%, transparent); border-color: var(--cz-dark-border); box-shadow: var(--cz-dark-ring); }
  .caption-card { background: color-mix(in srgb, var(--cz-dark-surface) 78%, transparent); border-color: var(--cz-dark-border); box-shadow: var(--cz-dark-ring); }
  .pill-card { background: color-mix(in srgb, var(--cz-dark-surface) 72%, transparent); box-shadow: var(--cz-dark-ring); }
  .principle-block { background: linear-gradient(180deg, color-mix(in srgb, var(--cz-dark-surface) 74%, transparent), color-mix(in srgb, var(--cz-dark-surface) 58%, transparent)); border-color: var(--cz-dark-border); }
  .stat-card { background: var(--cz-dark-surface); box-shadow: var(--cz-dark-ring); }
  .poster-card { background: linear-gradient(180deg, color-mix(in srgb, var(--cz-dark-surface) 78%, transparent), color-mix(in srgb, var(--cz-dark-bg) 86%, transparent)); border-color: var(--cz-dark-border); }
  .intent-card { background: var(--cz-dark-surface); }
  .intent-card.friend { background: linear-gradient(180deg, var(--friend-soft), var(--cz-dark-surface)); }
  .intent-card.business { background: linear-gradient(180deg, var(--business-soft), var(--cz-dark-surface)); }
  .intent-card.relationship { background: linear-gradient(180deg, var(--relationship-soft), var(--cz-dark-surface)); }
  .context-pill { background: color-mix(in srgb, var(--cz-dark-surface) 93%, transparent) !important; box-shadow: var(--cz-dark-ring) !important; } /* rgba(255,255,255,.93)!important */
  .feature-chip { background: var(--cz-dark-surface); box-shadow: var(--cz-dark-ring) !important; }
  .contact-visual { background: linear-gradient(180deg, color-mix(in srgb, var(--cz-dark-surface) 78%, transparent), color-mix(in srgb, var(--cz-dark-surface) 62%, transparent)); border-color: var(--cz-dark-border); }
  .service-card { background: var(--cz-dark-surface); box-shadow: var(--cz-dark-ring); }
  .outline-btn { background: var(--cz-dark-surface); color: var(--cz-dark-text); }      /* #fff / #1f2733 */
  .form-card { background: linear-gradient(180deg, color-mix(in srgb, var(--cz-dark-surface) 86%, transparent), color-mix(in srgb, var(--cz-dark-surface) 74%, transparent)); border-color: var(--cz-dark-border); }
  .input, .textarea, .select { background: var(--cz-dark-surface); color: var(--cz-dark-text); box-shadow: none; } /* #fff / #111 */
  .whatsapp-check { background: color-mix(in srgb, var(--cz-dark-surface) 90%, transparent); }
  .photo-first-note { background: color-mix(in srgb, var(--cz-dark-bg) 91%, transparent); border-color: var(--cz-dark-border); box-shadow: var(--cz-dark-ring); }
  .soft-break { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--cz-dark-bg) 96%, transparent) 30%, color-mix(in srgb, var(--cz-dark-bg) 96%, transparent) 70%, transparent 100%); }

  /* Cartões com !important no pacote (bloco final de ajustes). */
  .stat-card, .pill-card, .feature-chip {
    border-color: var(--cz-dark-border) !important;
    background: linear-gradient(145deg, var(--cz-dark-surface), var(--connectz-theme-surface-alt)) !important;
    box-shadow: var(--cz-dark-ring) !important;
  }
  .intent-card { box-shadow: var(--cz-dark-ring) !important; }
  .intent-card.friend { background: linear-gradient(135deg, var(--friend-soft), var(--cz-dark-surface)) !important; box-shadow: inset 7px 0 0 var(--connectz-color-brand-friendship-base), var(--cz-dark-ring) !important; }
  .intent-card.business { background: linear-gradient(135deg, var(--business-soft), var(--cz-dark-surface)) !important; box-shadow: inset 7px 0 0 var(--connectz-color-brand-business-base), var(--cz-dark-ring) !important; }
  .intent-card.relationship { background: linear-gradient(135deg, var(--relationship-soft), var(--cz-dark-surface)) !important; box-shadow: inset 7px 0 0 var(--connectz-color-brand-relationship-base), var(--cz-dark-ring) !important; }
  .intent-card.friend h3, .hero-tag.mod-friend b { color: var(--connectz-color-brand-friendship-light); }           /* #126665 */
  .intent-card.business h3, .hero-tag.mod-business b { color: var(--connectz-color-brand-business-light); }         /* #1E326F */
  .intent-card.relationship h3, .hero-tag.mod-relationship b { color: var(--connectz-color-brand-relationship-light); } /* #493993 */
  .hero-tag.mod-friend { background: linear-gradient(135deg, var(--friend-soft), var(--cz-dark-surface)); box-shadow: inset 5px 0 0 var(--connectz-color-brand-friendship-base), var(--cz-dark-ring); }
  .hero-tag.mod-business { background: linear-gradient(135deg, var(--business-soft), var(--cz-dark-surface)); box-shadow: inset 5px 0 0 var(--connectz-color-brand-business-base), var(--cz-dark-ring); }
  .hero-tag.mod-relationship { background: linear-gradient(135deg, var(--relationship-soft), var(--cz-dark-surface)); box-shadow: inset 5px 0 0 var(--connectz-color-brand-relationship-base), var(--cz-dark-ring); }
  .hero-tag.modality-tag { box-shadow: var(--cz-dark-ring); }
  .context-pill:nth-child(4)::before { background: var(--connectz-color-brand-business-light); } /* #1E326F (ponto) */

  /* Palcos de imagem: o pacote funde a borda das imagens no creme da página; no escuro, no fundo do tema. */
  .contain-image { background: var(--cz-dark-bg); }                                  /* #f7f4ee */
  .preserve-full-image, .poster-stage { background: var(--cz-dark-bg) !important; }   /* #fbfaf7→#f3efe7 !important */
  .principle-visual { background: var(--cz-dark-bg) !important; }                     /* #fbfaf7 !important */
  .change-base, .change-frag { background: var(--cz-dark-bg) !important; }            /* #f6f3ed !important */
  .poster-stage::after, .change-base::after, .change-frag::after {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--cz-dark-bg) 96%, transparent) 0%, color-mix(in srgb, var(--cz-dark-bg) 58%, transparent) 1.8%, transparent 6.5%, transparent 93.5%, color-mix(in srgb, var(--cz-dark-bg) 58%, transparent) 98.2%, color-mix(in srgb, var(--cz-dark-bg) 96%, transparent) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--cz-dark-bg) 94%, transparent) 0%, color-mix(in srgb, var(--cz-dark-bg) 48%, transparent) 1.8%, transparent 6.5%, transparent 93.5%, color-mix(in srgb, var(--cz-dark-bg) 48%, transparent) 98.2%, color-mix(in srgb, var(--cz-dark-bg) 94%, transparent) 100%);
  }
  .photo-first-art::after {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--cz-dark-bg) 98%, transparent) 0%, color-mix(in srgb, var(--cz-dark-bg) 50%, transparent) 1.6%, transparent 5.5%, transparent 94.5%, color-mix(in srgb, var(--cz-dark-bg) 50%, transparent) 98.4%, color-mix(in srgb, var(--cz-dark-bg) 98%, transparent) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--cz-dark-bg) 98%, transparent) 0%, color-mix(in srgb, var(--cz-dark-bg) 42%, transparent) 1.6%, transparent 5.5%, transparent 94.5%, color-mix(in srgb, var(--cz-dark-bg) 42%, transparent) 98.4%, color-mix(in srgb, var(--cz-dark-bg) 98%, transparent) 100%);
  }
  .principle-visual::after {
    background:
      linear-gradient(90deg, var(--cz-dark-bg) 0%, color-mix(in srgb, var(--cz-dark-bg) 94%, transparent) 2.5%, color-mix(in srgb, var(--cz-dark-bg) 48%, transparent) 6%, transparent 11%, transparent 89%, color-mix(in srgb, var(--cz-dark-bg) 48%, transparent) 94%, color-mix(in srgb, var(--cz-dark-bg) 94%, transparent) 97.5%, var(--cz-dark-bg) 100%),
      linear-gradient(180deg, var(--cz-dark-bg) 0%, color-mix(in srgb, var(--cz-dark-bg) 92%, transparent) 2.5%, color-mix(in srgb, var(--cz-dark-bg) 44%, transparent) 6%, transparent 11%, transparent 89%, color-mix(in srgb, var(--cz-dark-bg) 44%, transparent) 94%, color-mix(in srgb, var(--cz-dark-bg) 92%, transparent) 97.5%, var(--cz-dark-bg) 100%) !important;
  }
  .blend-frame::before {
    box-shadow:
      inset 34px 0 34px -36px color-mix(in srgb, var(--cz-dark-bg) 95%, transparent),
      inset -34px 0 34px -36px color-mix(in srgb, var(--cz-dark-bg) 95%, transparent),
      inset 0 34px 34px -36px color-mix(in srgb, var(--cz-dark-bg) 95%, transparent),
      inset 0 -34px 34px -36px color-mix(in srgb, var(--cz-dark-bg) 95%, transparent);
  }

  /* Transição para a seção escura do pacote: o creme das bordas vira o fundo do tema. */
  .section-dark::before { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--connectz-color-dark-canvas) 75%, transparent) 65%, var(--connectz-color-dark-canvas)); }
  .section-dark::after { background: linear-gradient(180deg, var(--connectz-color-dark-canvas), color-mix(in srgb, var(--cz-dark-bg) 76%, transparent) 65%, transparent); }

  /* Título com brilho: a tinta #0f1116 do degradê vira o texto do tema; os acentos de modalidade ficam.
     Só background-image: o atalho `background` desfaria o background-clip: text do pacote. */
  .sweep-title {
    background-image: linear-gradient(102deg, var(--cz-dark-text) 0 38%, var(--cz-dark-text) 42%, var(--connectz-color-brand-friendship-base) 47%, var(--connectz-color-brand-business-light) 50%, var(--connectz-color-brand-relationship-base) 53%, var(--cz-dark-text) 59%, var(--cz-dark-text) 100%);
  }
  :focus-visible { outline-color: var(--connectz-theme-focus-ring); }
}