/* 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-blogs (registro de decisões §2.8). Só tokens; cores do pacote → token
   comentadas. Mapeamento: docs/17_TEMA_ESCURO_E_CORES_DESIGN_SYSTEM.md do pacote. */
@media (prefers-color-scheme: dark) {
  :root {
    /* Neutros: coluna "Tema escuro" do docs/17 do pacote = tokens v1.1 do tema escuro. */
    --bg: var(--connectz-theme-background);                 /* #F7F5F0 → #0B1120 */
    --surface: var(--connectz-theme-surface);               /* #FFFFFF → #101828 */
    --surface-rgb: var(--connectz-theme-surface-rgb);       /* 255 255 255 → 16 24 40 (rgb() com alfa do pacote) */
    --subtle: var(--connectz-theme-surface-alt);            /* #EFECE5 → #13243F */
    --ink: var(--connectz-theme-text-primary);              /* #111315 → #F7FBFF */
    --ink-rgb: var(--connectz-theme-shadow-rgb);            /* sombras: no escuro a elevação vem da borda (abaixo) */
    --muted: var(--connectz-theme-text-secondary);          /* #5E6268 → #D5DEEA */
    --border: var(--connectz-theme-border);                 /* #D8D4CB → rgba(123,140,170,.26) */
    --focus: var(--connectz-theme-focus-ring);              /* #3152AD → #DDE5FA */
    --success: var(--connectz-theme-feedback-success);      /* #1F7A53 → #7DD3A8 */
    --warning: var(--connectz-theme-feedback-warning);      /* #8A5A00 → #F0C674 */
    --danger: var(--connectz-theme-feedback-danger);        /* #B3261E → #F2B8B5 */
    /* Modalidades (docs/17 §3): texto/ícone no escuro usa o tom claro; fundo de área ou chip usa o tom escuro. */
    --friend-dark: var(--connectz-color-brand-friendship-light);          /* texto #126665 → #D7F0EF */
    --business-dark: var(--connectz-color-brand-business-light);          /* texto #1E326F → #DDE5FA */
    --relationship-dark: var(--connectz-color-brand-relationship-light);  /* texto #493993 → #E8E3F8 */
    --friend-light: var(--connectz-color-brand-friendship-dark);          /* fundo #D7F0EF → #126665 */
    --business-light: var(--connectz-color-brand-business-dark);          /* fundo #DDE5FA → #1E326F */
    --relationship-light: var(--connectz-color-brand-relationship-dark);  /* fundo #E8E3F8 → #493993 */
  }
  /* Sombra vira borda (design system, tema escuro): contorno por inset, sem mudar dimensões. */
  .post-preview, .timeline-card, .cue-label, .pill:hover, .post-preview:hover, .timeline-card:hover {
    box-shadow: inset 0 0 0 1px var(--connectz-theme-border);
  }
}