/* 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-modo-universidade (registro de decisões §2.8). Só tokens; cada regra comenta
   a cor do pacote → token, com os critérios das demais landings. Ficam como estão: botões em degradê com texto
   branco, selos de loja, selo 18+, cartões "mais" (foto com véu escuro) e ícone do Instagram. */
@media (prefers-color-scheme: dark) {
  :root {
    --warm: var(--connectz-theme-background);                              /* #F7F5F0 */
    --warm2: var(--connectz-theme-background-alt);                         /* #F0F4F7 */
    --ink: var(--connectz-theme-text-primary);                             /* #0C1730 */
    --text: var(--connectz-theme-text-primary);                            /* #3F4857 */
    --muted: var(--connectz-theme-text-secondary);                         /* #687180 */
    --friendL: var(--connectz-color-brand-friendship-dark);                /* área #D7F0EF */
    --relationshipL: var(--connectz-color-brand-relationship-dark);        /* área #E8E3F8 */
    --surface: var(--connectz-theme-surface);                              /* #fff */
    --shadow: inset 0 0 0 1px var(--connectz-theme-border);                /* sombra → contorno */
    --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→#F8F7F4→#F2F7FA */
  ::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); } /* #0C1730 */
  .site-header { background: color-mix(in srgb, var(--cz-dark-bg) 88%, transparent); border-bottom-color: var(--cz-dark-border); box-shadow: none; }
  .nav a { color: var(--cz-dark-text-2); }                                            /* #596170 */
  .nav a:hover, .nav a:focus-visible { background: var(--cz-dark-surface); box-shadow: var(--cz-dark-ring); }
  .section::before { background: linear-gradient(180deg, var(--cz-dark-bg), transparent); }
  .section::after { background: linear-gradient(0deg, var(--cz-dark-bg), transparent); }
  .eyebrow, .campus-copy .highlight, .other-note strong, .more-note strong, .hero-callout::after, .instagram-link, .instagram-link .insta-lead, .instagram-link .tail { color: var(--cz-business-text); } /* var(--business) como texto */
  .step p, .campus-copy .small, .diff-card p, .mode-card p, .other-note, .more-note, footer, .university-note { color: var(--cz-dark-text-2); } /* #616A78 #596575 #606A78 #626B78 #69717F #344052 */
  .mode-card svg { stroke: var(--cz-business-text); }
  :focus-visible { outline-color: var(--connectz-theme-focus-ring); }

  /* Título com brilho (#0C1730 → texto do tema); só background-image (preserva o background-clip: text). */
  .tech-heading { background-image: linear-gradient(102deg, var(--cz-dark-text) 0 37%, var(--cz-dark-text) 42%, var(--connectz-color-brand-friendship-base) 47%, var(--connectz-color-brand-business-light) 51%, var(--connectz-color-brand-relationship-base) 55%, var(--cz-dark-text) 61%, var(--cz-dark-text) 100%); }
  .btn:hover, .store:hover, .header-cta:hover, .instagram-link:hover, .mobile-close:hover,
  .btn:focus-visible, .store:focus-visible, .header-cta:focus-visible, .instagram-link:focus-visible, .mobile-close:focus-visible { box-shadow: 0 0 0 1px var(--connectz-color-brand-business-light); }

  /* Modalidades: texto no tom claro; área do tom escuro para a superfície. */
  .modality { background: var(--cz-dark-surface); border-color: var(--cz-dark-border); box-shadow: none; }
  .modality.friend { color: var(--connectz-color-brand-friendship-light); background: linear-gradient(135deg, var(--friendL), var(--cz-dark-surface)); }           /* #166F6D */
  .modality.relationship { color: var(--connectz-color-brand-relationship-light); background: linear-gradient(135deg, var(--relationshipL), var(--cz-dark-surface)); } /* #5A48B6 */

  /* Superfícies e cartões: branco translúcido → superfície com o mesmo alfa; sombra → contorno. */
  .hero-copy .support, .availability { background: color-mix(in srgb, var(--cz-dark-surface) 88%, transparent); border-color: var(--cz-dark-border); box-shadow: var(--cz-dark-ring); color: var(--cz-dark-text-2); text-shadow: none; } /* #3F4857 / #5D6571 */
  .btn-outline { background: color-mix(in srgb, var(--cz-dark-surface) 90%, transparent); border-color: var(--cz-dark-border); box-shadow: none; }
  .btn-primary, .store { box-shadow: none; }
  .hero-orb { background: color-mix(in srgb, var(--cz-dark-surface) 78%, transparent); box-shadow: var(--cz-dark-ring); }
  .university-note { background: linear-gradient(135deg, var(--connectz-color-brand-friendship-dark), var(--connectz-color-brand-relationship-dark)); border-color: var(--cz-dark-border); }
  .context-point, .step, .diff-card, .mode-card { background: color-mix(in srgb, var(--cz-dark-surface) 92%, transparent); border-color: var(--cz-dark-border); box-shadow: none; }
  .campus-chip { background: color-mix(in srgb, var(--cz-dark-surface) 85%, transparent); border-color: var(--cz-dark-border); box-shadow: none; }
  .mode-card .icon { border-color: var(--cz-dark-border); }
  .cta-card, .open-app-cta { background: linear-gradient(135deg, color-mix(in srgb, var(--cz-dark-surface) 95%, transparent), color-mix(in srgb, var(--connectz-theme-surface-alt) 90%, transparent)); border-color: var(--cz-dark-border); box-shadow: none; }
  .final-box { background: linear-gradient(135deg, color-mix(in srgb, var(--cz-dark-surface) 96%, transparent), color-mix(in srgb, var(--connectz-theme-surface-alt) 90%, transparent)); border-color: var(--cz-dark-border); box-shadow: none; }
  .instagram-link { background: var(--cz-dark-surface); border-color: var(--cz-dark-border); box-shadow: none; }
  .instagram-link .insta-pill { border-color: var(--cz-dark-border); }
  .more-card { box-shadow: var(--cz-dark-ring); }

  /* Fundos de seção e fusões das fotos: creme/frio claro → fundo do tema com o mesmo alfa. */
  .hero { background: linear-gradient(180deg, var(--cz-dark-bg) 0%, var(--cz-dark-bg) 7%, color-mix(in srgb, var(--cz-dark-bg) 15%, transparent) 18%, color-mix(in srgb, var(--cz-dark-bg) 6%, transparent) 80%, var(--cz-dark-bg) 100%); }
  .hero-bg::after { background: linear-gradient(90deg, color-mix(in srgb, var(--cz-dark-bg) 10%, transparent) 0%, color-mix(in srgb, var(--cz-dark-bg) 8%, transparent) 37%, color-mix(in srgb, var(--cz-dark-bg) 56%, transparent) 62%, color-mix(in srgb, var(--cz-dark-bg) 95%, transparent) 100%); }
  .intro, .how, .diffs, .other, .final, .campus-band { background: var(--cz-dark-bg); }
  .mid-cta { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--connectz-theme-surface-alt) 58%, transparent) 45%, transparent); }
  .campus-bg::after { background: linear-gradient(90deg, color-mix(in srgb, var(--cz-dark-bg) 96%, transparent) 0%, color-mix(in srgb, var(--cz-dark-bg) 88%, transparent) 32%, color-mix(in srgb, var(--cz-dark-bg) 44%, transparent) 50%, color-mix(in srgb, var(--cz-dark-bg) 8%, transparent) 66%, transparent 78%); }
  .secondary-visual::after {
    background:
      linear-gradient(90deg, var(--cz-dark-bg) 0%, color-mix(in srgb, var(--cz-dark-bg) 72%, transparent) 5%, transparent 15%, transparent 85%, color-mix(in srgb, var(--cz-dark-bg) 72%, transparent) 95%, var(--cz-dark-bg) 100%),
      linear-gradient(180deg, var(--cz-dark-bg) 0%, color-mix(in srgb, var(--cz-dark-bg) 72%, transparent) 5%, transparent 15%, transparent 85%, color-mix(in srgb, var(--cz-dark-bg) 72%, transparent) 95%, var(--cz-dark-bg) 100%);
  }
  .more-card::after { background: linear-gradient(90deg, color-mix(in srgb, var(--cz-dark-bg) 6%, transparent) 0%, transparent 12%, transparent 88%, color-mix(in srgb, var(--cz-dark-bg) 6%, transparent) 100%), linear-gradient(180deg, color-mix(in srgb, var(--connectz-color-dark-canvas) 2%, transparent) 0%, color-mix(in srgb, var(--connectz-color-dark-canvas) 5%, transparent) 34%, color-mix(in srgb, var(--connectz-color-dark-canvas) 66%, transparent) 67%, color-mix(in srgb, var(--connectz-color-dark-canvas) 94%, transparent) 100%); }
}
@media (prefers-color-scheme: dark) and (max-width: 900px) {
  .hero-bg::after { background: linear-gradient(90deg, color-mix(in srgb, var(--cz-dark-bg) 22%, transparent), color-mix(in srgb, var(--cz-dark-bg) 38%, transparent) 35%, color-mix(in srgb, var(--cz-dark-bg) 83%, transparent) 70%, color-mix(in srgb, var(--cz-dark-bg) 97%, transparent)); }
}
@media (prefers-color-scheme: dark) and (max-width: 720px) {
  .mobile-close { border-color: var(--cz-dark-border); background: color-mix(in srgb, var(--cz-dark-surface) 84%, transparent); color: var(--cz-dark-text-2); }
  .hero-bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--cz-dark-bg) 97%, transparent) 0%, color-mix(in srgb, var(--cz-dark-bg) 44%, transparent) 21%, color-mix(in srgb, var(--cz-dark-bg) 4%, transparent) 55%, color-mix(in srgb, var(--cz-dark-bg) 18%, transparent) 82%, var(--cz-dark-bg) 100%); }
  .campus-bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--cz-dark-bg) 98%, transparent) 0%, color-mix(in srgb, var(--cz-dark-bg) 90%, transparent) 34%, color-mix(in srgb, var(--cz-dark-bg) 43%, transparent) 58%, color-mix(in srgb, var(--cz-dark-bg) 6%, transparent) 78%, var(--cz-dark-bg) 100%); }
  .secondary-visual::after {
    background:
      linear-gradient(90deg, var(--cz-dark-bg) 0%, color-mix(in srgb, var(--cz-dark-bg) 62%, transparent) 5%, transparent 16%, transparent 84%, color-mix(in srgb, var(--cz-dark-bg) 62%, transparent) 95%, var(--cz-dark-bg) 100%),
      linear-gradient(180deg, var(--cz-dark-bg) 0%, color-mix(in srgb, var(--cz-dark-bg) 62%, transparent) 5%, transparent 16%, transparent 84%, color-mix(in srgb, var(--cz-dark-bg) 62%, transparent) 95%, var(--cz-dark-bg) 100%);
  }
}