/* 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-geral (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): creme/frios claros do pacote → fundo do tema escuro
   com o mesmo alfa; branco → superfície; azul-marinho/cinzas de texto → texto do tema; texto de modalidade → tom
   claro; área de modalidade → tom escuro; sombra → contorno. Ficam como estão: cartões de contexto (foto com véu
   escuro), selo 18+, símbolo de proibido (#E53935) e ícone do Instagram (#C13584), que não dependem do fundo. */
@media (prefers-color-scheme: dark) {
  :root {
    --warm: var(--connectz-theme-background);                 /* #F7F5F0 */
    --warm2: var(--connectz-theme-surface-alt);               /* #EFECE5 */
    --ink: var(--connectz-theme-text-primary);                /* #0C1730 */
    --text: var(--connectz-theme-text-primary);               /* #2B3340 */
    --muted: var(--connectz-theme-text-secondary);            /* #626A74 */
    --line: var(--connectz-theme-border);                     /* rgba(12,23,48,.12) */
    --navy: var(--connectz-theme-text-primary);               /* #071833 (títulos) */
    --green-soft: var(--connectz-color-brand-friendship-dark); /* #E8F7F5 */
    --cz-dark-bg: var(--connectz-theme-background);
    --cz-dark-surface: var(--connectz-theme-surface);
    --cz-dark-border: var(--connectz-theme-border);
    --cz-dark-ring: inset 0 0 0 1px var(--connectz-theme-border);
    --cz-dark-text: var(--connectz-theme-text-primary);
    --cz-dark-text-2: var(--connectz-theme-text-secondary);
    --cz-business-text: var(--connectz-color-brand-business-light);
  }

  body { background: var(--cz-dark-bg); }                                             /* #F7F5F0→#F8F6F2→#F4F7FA */
  ::selection { background: var(--connectz-color-brand-business-dark); color: var(--cz-dark-text); } /* #DDE5FA / #071833 */
  .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) 86%, transparent); border-bottom-color: var(--cz-dark-border); box-shadow: none; }
  .desktop-nav a { color: var(--cz-dark-text-2); }                                    /* #596170 */
  .desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--cz-dark-text); box-shadow: var(--cz-dark-ring); }
  .eyebrow, .hero-proof b, .download-kicker strong, .world-line strong { color: var(--cz-business-text); } /* var(--business) como texto */
  p, .world-line { color: var(--cz-dark-text-2); }                                     /* #454D59 */
  .lead, .hero-proof, .highlight-note { color: var(--cz-dark-text-2); }               /* #434C59 #323A48 #26344E */
  .benefit small, .benefit-emphasis small, .concept-note, .footer-inner, .trust-link, .tools-intro, .tools-desc { color: var(--cz-dark-text-2); } /* #55606A #4E5A66 #7A818A #68707A #4B5668 */
  .tool-label, .final-real, .instagram-link .handle { color: var(--cz-dark-text); }   /* #0C1730 */
  .instagram-link .insta-lead, .instagram-link .tail, .instagram-link { color: var(--cz-business-text); } /* #3152AD */
  .hero-proof b { color: var(--cz-business-text); }

  /* Título com brilho (#0C1730 → texto do tema). Só background-image: preserva o background-clip: text do pacote. */
  .tech-heading { background-image: linear-gradient(102deg, var(--cz-dark-text) 0 38%, var(--cz-dark-text) 43%, var(--connectz-color-brand-friendship-base) 48%, var(--connectz-color-brand-business-light) 51%, var(--connectz-color-brand-relationship-base) 54%, var(--cz-dark-text) 60%, var(--cz-dark-text) 100%); }

  /* Modalidades: texto no tom claro; área do tom escuro para a superfície. */
  .modality { background: var(--cz-dark-surface); box-shadow: var(--cz-dark-ring); }
  .friend { color: var(--connectz-color-brand-friendship-light); background: linear-gradient(135deg, var(--connectz-color-brand-friendship-dark), var(--cz-dark-surface)); }     /* #16706E; #E1F5F3→#fff */
  .business { color: var(--connectz-color-brand-business-light); background: linear-gradient(135deg, var(--connectz-color-brand-business-dark), var(--cz-dark-surface)); }       /* #28468F; #E4EAFB→#fff */
  .relationship { color: var(--connectz-color-brand-relationship-light); background: linear-gradient(135deg, var(--connectz-color-brand-relationship-dark), var(--cz-dark-surface)); } /* #5B49B8; #ECE8FA→#fff */

  /* Superfícies brancas translúcidas → superfície com o mesmo alfa; sombras → contorno. */
  .hero-diff span { background: color-mix(in srgb, var(--cz-dark-surface) 76%, transparent); border-color: var(--cz-dark-border); }
  .hero-diff .diff-item { background: color-mix(in srgb, var(--cz-dark-surface) 91%, transparent); border-color: var(--cz-dark-border); box-shadow: var(--cz-dark-ring); }
  .hero-photo { box-shadow: var(--cz-dark-ring); }
  .hero-orb { background: color-mix(in srgb, var(--cz-dark-surface) 80%, transparent); box-shadow: var(--cz-dark-ring); }
  .transition-chip { background: color-mix(in srgb, var(--cz-dark-bg) 93%, transparent); box-shadow: var(--cz-dark-ring); color: var(--cz-dark-text-2); }
  .step { background: color-mix(in srgb, var(--cz-dark-surface) 92%, transparent); border-color: var(--cz-dark-border); box-shadow: var(--cz-dark-ring); }
  .benefit { background: linear-gradient(135deg, var(--connectz-color-brand-friendship-dark), var(--cz-dark-surface)); box-shadow: none; } /* #E4F7F5→#F8FFFE */
  .benefit-emphasis { box-shadow: none; }
  .anti-card { background: color-mix(in srgb, var(--cz-dark-surface) 90%, transparent); border-color: var(--cz-dark-border); box-shadow: var(--cz-dark-ring); }
  .anti-media { background: var(--connectz-theme-surface-alt); }                      /* #EEF3F7 */
  .final-card { background: linear-gradient(135deg, color-mix(in srgb, var(--cz-dark-surface) 93%, transparent), color-mix(in srgb, var(--connectz-theme-surface-alt) 88%, transparent)); box-shadow: var(--cz-dark-ring); }
  .instagram-link { background: var(--cz-dark-surface); box-shadow: var(--cz-dark-ring); }
  .instagram-link .insta-pill { background: var(--cz-dark-surface); border-color: var(--cz-dark-border); box-shadow: none; }
  .orbit-icon { background: color-mix(in srgb, var(--cz-dark-surface) 78%, transparent); box-shadow: var(--cz-dark-ring); }
  .tools-showcase { background: linear-gradient(135deg, color-mix(in srgb, var(--cz-dark-surface) 92%, transparent), color-mix(in srgb, var(--connectz-theme-surface-alt) 72%, transparent)); box-shadow: var(--cz-dark-ring); }
  .tool-chip { background: var(--cz-dark-surface); border-color: var(--cz-dark-border); box-shadow: none; }
  .tool-orb { background: color-mix(in srgb, var(--cz-dark-surface) 84%, transparent); }
  .world-copy .highlight-note { background: color-mix(in srgb, var(--cz-dark-surface) 82%, transparent); }

  /* Fundos de seção e fusões das fotos: creme/frio claro → fundo do tema com o mesmo alfa. */
  .event-section { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--cz-dark-bg) 72%, transparent) 16%, color-mix(in srgb, var(--cz-dark-bg) 96%, transparent) 88%, transparent); }
  .world-section, .contexts-section, .trust-section { background: var(--cz-dark-bg); }
  .hero-photo::after { background: linear-gradient(90deg, var(--cz-dark-bg) 0%, color-mix(in srgb, var(--cz-dark-bg) 78%, transparent) 6%, color-mix(in srgb, var(--cz-dark-bg) 15%, transparent) 17%, transparent 32%), linear-gradient(180deg, var(--cz-dark-bg) 0%, transparent 12%, transparent 87%, var(--cz-dark-bg) 100%); }
  .fade-all::after { background: linear-gradient(90deg, var(--cz-dark-bg) 0%, transparent 10%, transparent 90%, var(--cz-dark-bg) 100%), linear-gradient(180deg, var(--cz-dark-bg) 0%, transparent 10%, transparent 90%, var(--cz-dark-bg) 100%); } /* #F1F6F8 */
  .world-copy::before { background: radial-gradient(ellipse at 80% 40%, color-mix(in srgb, var(--cz-dark-bg) 96%, transparent) 0%, color-mix(in srgb, var(--cz-dark-bg) 84%, transparent) 52%, color-mix(in srgb, var(--cz-dark-bg) 30%, transparent) 78%, transparent 100%); }
  .world-visual::after { background: linear-gradient(270deg, color-mix(in srgb, var(--cz-dark-bg) 99.5%, transparent) 0%, color-mix(in srgb, var(--cz-dark-bg) 97%, transparent) 25%, color-mix(in srgb, var(--cz-dark-bg) 84%, transparent) 44%, color-mix(in srgb, var(--cz-dark-bg) 46%, transparent) 61%, color-mix(in srgb, var(--cz-dark-bg) 10%, transparent) 75%, transparent 86%), linear-gradient(180deg, var(--cz-dark-bg) 0%, transparent 13%, transparent 87%, var(--cz-dark-bg) 100%); }
  :focus-visible { outline-color: var(--connectz-theme-focus-ring); }
}
@media (prefers-color-scheme: dark) and (max-width: 720px) {
  .site-header { background: color-mix(in srgb, var(--cz-dark-bg) 92%, transparent); }
  .mobile-close { border-color: var(--cz-dark-border); background: color-mix(in srgb, var(--cz-dark-surface) 82%, transparent); color: var(--cz-dark-text-2); }
  .mobile-tabs { border-top-color: var(--cz-dark-border); }
  .mobile-tabs a { color: var(--cz-dark-text-2); border-right-color: var(--cz-dark-border); }
  .hero-photo::after { background: linear-gradient(90deg, var(--cz-dark-bg) 0%, color-mix(in srgb, var(--cz-dark-bg) 70%, transparent) 4%, transparent 25%), linear-gradient(180deg, var(--cz-dark-bg) 0%, transparent 12%, transparent 88%, var(--cz-dark-bg) 100%); }
  .fade-all::after { background: linear-gradient(90deg, var(--cz-dark-bg) 0%, transparent 10%, transparent 90%, var(--cz-dark-bg) 100%), linear-gradient(180deg, var(--cz-dark-bg) 0%, transparent 13%, transparent 87%, var(--cz-dark-bg) 100%); }
  .world-copy::before { background: linear-gradient(270deg, color-mix(in srgb, var(--cz-dark-bg) 98%, transparent), color-mix(in srgb, var(--cz-dark-bg) 88%, transparent) 52%, color-mix(in srgb, var(--cz-dark-bg) 30%, transparent) 82%, transparent); }
  .world-visual::after { background: linear-gradient(270deg, color-mix(in srgb, var(--cz-dark-bg) 99%, transparent) 0%, color-mix(in srgb, var(--cz-dark-bg) 95%, transparent) 34%, color-mix(in srgb, var(--cz-dark-bg) 68%, transparent) 56%, color-mix(in srgb, var(--cz-dark-bg) 20%, transparent) 75%, transparent 88%), linear-gradient(180deg, var(--cz-dark-bg) 0%, transparent 12%, transparent 88%, var(--cz-dark-bg) 100%); }
}