/* ============================================================
   BAICV — Design tokens e tipografia base
   Fonte única de verdade para cor, tipo, medidas, raios,
   elevação e movimento. Consumido pelo site público e pelo
   backoffice, carregado depois do Bootstrap e antes de site.css.
   ============================================================ */

/* Inter Variable (self-hosted, eixo de peso 100–900) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* --- Cor de marca --- */
  --bai-blue: #223f7f;
  --bai-blue-700: #1b346d;
  --bai-blue-900: #071b3c;
  --bai-aqua: #69c7df;
  --bai-sand: #b98a3d;

  /* --- Neutros e superfícies --- */
  --bai-ink: #111827;
  --bai-muted: #61708a;
  --bai-line: #d9e1ef;
  --bai-soft: #f4f7fb;
  --bai-cloud: #eef4ff;
  --bai-ice: #dceaff;
  --bai-surface: #ffffff;
  /* Tokens antes indefinidos (usados com fallback claro em ~40 sítios). Definidos aqui
     para VIRAREM no tema escuro — senão o fundo/texto ficava claro no escuro (ilegível). */
  --bai-surface-muted: #eef2fb;
  --bai-ink-soft: #55607a;
  --bai-navy: #0b2a5b;
  --bai-success: #1c7c4a;
  --bai-aqua-strong: #2687a5;
  --bai-card: rgba(255, 255, 255, .88);
  --bai-accent: var(--bai-blue);
  --bai-eyebrow: #1d7e9c;
  --bai-strong: var(--bai-blue-900);
  --bai-header-bg: rgba(255, 255, 255, .92);

  /* --- Tipografia --- */
  --bai-font: "Inter", "Segoe UI", Arial, sans-serif;
  --bai-weight-display: 800;
  --bai-weight-bold: 700;
  --bai-weight-semibold: 650;
  --bai-tracking-display: -0.015em;
  --bai-tracking-caps: 0.08em;

  /* --- Espaçamento (base 8pt) --- */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */

  /* --- Raios --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* --- Elevação --- */
  --shadow-sm: 0 1px 2px rgba(7, 27, 60, .06), 0 2px 8px rgba(7, 27, 60, .06);
  --shadow-md: 0 2px 6px rgba(7, 27, 60, .08), 0 10px 28px rgba(7, 27, 60, .10);
  --shadow-lg: 0 6px 18px rgba(7, 27, 60, .12), 0 22px 56px rgba(7, 27, 60, .16);

  /* --- Movimento --- */
  --motion-fast: 150ms;
  --motion-base: 220ms;
  --motion-slow: 420ms;
  --ease-out: cubic-bezier(.22, .8, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);

  /* --- Foco --- */
  --focus-ring: 0 0 0 3px rgba(105, 199, 223, .55);
  --focus-ring-inverse: 0 0 0 3px rgba(255, 255, 255, .6);

  /* --- Medidas partilhadas --- */
  --header-utility-height: 34px;
  --header-nav-height: 76px;
  --header-height: calc(var(--header-utility-height) + var(--header-nav-height));

  /* --- Bootstrap 5.3 — mapear a marca para os tokens globais --- */
  --bs-primary: var(--bai-blue);
  --bs-primary-rgb: 34, 63, 127;
  --bs-body-color: var(--bai-ink);
  --bs-body-font-family: var(--bai-font);
  --bs-link-color: var(--bai-blue);
  --bs-link-hover-color: var(--bai-blue-700);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
}

/* ============================================================
   Padrão de marca — pontos do globo BAI
   Motivo halftone derivado do símbolo, para dar continuidade
   visual entre a marca existente e o portal novo. Duas variantes:
   clara (para secções navy) e ink (para superfícies claras).
   ============================================================ */
:root {
  --bai-dots-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168'%3E%3Cg fill='%23ffffff' fill-opacity='.07'%3E%3Ccircle cx='14' cy='16' r='7'/%3E%3Ccircle cx='44' cy='12' r='5.4'/%3E%3Ccircle cx='72' cy='18' r='6.4'/%3E%3Ccircle cx='102' cy='10' r='4.6'/%3E%3Ccircle cx='130' cy='16' r='6'/%3E%3Ccircle cx='158' cy='12' r='4.2'/%3E%3Ccircle cx='28' cy='44' r='6.2'/%3E%3Ccircle cx='58' cy='40' r='4.4'/%3E%3Ccircle cx='88' cy='46' r='6.8'/%3E%3Ccircle cx='118' cy='40' r='5'/%3E%3Ccircle cx='146' cy='44' r='6.2'/%3E%3Ccircle cx='12' cy='72' r='4.6'/%3E%3Ccircle cx='42' cy='70' r='6.6'/%3E%3Ccircle cx='74' cy='74' r='5'/%3E%3Ccircle cx='104' cy='68' r='6.4'/%3E%3Ccircle cx='134' cy='74' r='4.4'/%3E%3Ccircle cx='160' cy='70' r='5.8'/%3E%3Ccircle cx='26' cy='100' r='5.6'/%3E%3Ccircle cx='56' cy='102' r='6.8'/%3E%3Ccircle cx='86' cy='98' r='4.4'/%3E%3Ccircle cx='116' cy='104' r='6'/%3E%3Ccircle cx='146' cy='98' r='5'/%3E%3Ccircle cx='14' cy='130' r='6.6'/%3E%3Ccircle cx='44' cy='128' r='4.6'/%3E%3Ccircle cx='72' cy='132' r='6.2'/%3E%3Ccircle cx='102' cy='126' r='5.2'/%3E%3Ccircle cx='132' cy='132' r='6.6'/%3E%3Ccircle cx='160' cy='128' r='4.2'/%3E%3Ccircle cx='28' cy='158' r='4.8'/%3E%3Ccircle cx='58' cy='156' r='6'/%3E%3Ccircle cx='88' cy='160' r='5.4'/%3E%3Ccircle cx='118' cy='154' r='4.4'/%3E%3Ccircle cx='148' cy='160' r='6.4'/%3E%3C/g%3E%3C/svg%3E");
  --bai-dots-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='168' viewBox='0 0 168 168'%3E%3Cg fill='%23223f7f' fill-opacity='.05'%3E%3Ccircle cx='14' cy='16' r='7'/%3E%3Ccircle cx='44' cy='12' r='5.4'/%3E%3Ccircle cx='72' cy='18' r='6.4'/%3E%3Ccircle cx='102' cy='10' r='4.6'/%3E%3Ccircle cx='130' cy='16' r='6'/%3E%3Ccircle cx='158' cy='12' r='4.2'/%3E%3Ccircle cx='28' cy='44' r='6.2'/%3E%3Ccircle cx='58' cy='40' r='4.4'/%3E%3Ccircle cx='88' cy='46' r='6.8'/%3E%3Ccircle cx='118' cy='40' r='5'/%3E%3Ccircle cx='146' cy='44' r='6.2'/%3E%3Ccircle cx='12' cy='72' r='4.6'/%3E%3Ccircle cx='42' cy='70' r='6.6'/%3E%3Ccircle cx='74' cy='74' r='5'/%3E%3Ccircle cx='104' cy='68' r='6.4'/%3E%3Ccircle cx='134' cy='74' r='4.4'/%3E%3Ccircle cx='160' cy='70' r='5.8'/%3E%3Ccircle cx='26' cy='100' r='5.6'/%3E%3Ccircle cx='56' cy='102' r='6.8'/%3E%3Ccircle cx='86' cy='98' r='4.4'/%3E%3Ccircle cx='116' cy='104' r='6'/%3E%3Ccircle cx='146' cy='98' r='5'/%3E%3Ccircle cx='14' cy='130' r='6.6'/%3E%3Ccircle cx='44' cy='128' r='4.6'/%3E%3Ccircle cx='72' cy='132' r='6.2'/%3E%3Ccircle cx='102' cy='126' r='5.2'/%3E%3Ccircle cx='132' cy='132' r='6.6'/%3E%3Ccircle cx='160' cy='128' r='4.2'/%3E%3Ccircle cx='28' cy='158' r='4.8'/%3E%3Ccircle cx='58' cy='156' r='6'/%3E%3Ccircle cx='88' cy='160' r='5.4'/%3E%3Ccircle cx='118' cy='154' r='4.4'/%3E%3Ccircle cx='148' cy='160' r='6.4'/%3E%3C/g%3E%3C/svg%3E");
}

:root[data-bs-theme="dark"] {
  --bai-dots-ink: var(--bai-dots-light);
}

/* ============================================================
   Fundações globais derivadas dos tokens
   ============================================================ */

/* Foco visível consistente em todo o site (teclado) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Contextos escuros usam anel claro */
:where(.utility-bar, .site-footer, .people-hero, .campaign-strip, .baidirecto-feature, .admin-sidebar)
  :where(a, button):focus-visible {
  box-shadow: var(--focus-ring-inverse);
}

/* ============================================================
   Tema escuro (data-bs-theme no <html>; o backoffice fica claro)
   Os azuis de marca (--bai-blue*) não mudam: são também as
   superfícies das secções escuras. O que muda são as superfícies
   claras, o texto e o acento de leitura.
   ============================================================ */
:root[data-bs-theme="dark"] {
  color-scheme: dark;
  --bai-ink: #e8eef8;
  --bai-muted: #9fb2cd;
  --bai-line: #24344f;
  --bai-soft: #111f38;
  --bai-cloud: #16294a;
  --bai-ice: #1b3156;
  --bai-surface: #0d1930;
  --bai-card: #13233f;
  --bai-accent: #8fb0e8;
  --bai-eyebrow: var(--bai-aqua);
  --bai-strong: #dce8fb;
  --bai-header-bg: rgba(9, 18, 36, .88);
  /* No tema escuro o header fica escuro → o texto do menu tem de ser claro. Sem isto, o
     nav usava a tinta escura (fallback) e ficava invisível no header escuro (só o dropdown
     aberto, de fundo claro, se via). */
  --bai-header-ink: #e8eef8;
  /* Variantes escuras dos tokens que antes só tinham fallback claro (chips, cabeçalhos de
     grupo, texto secundário) — evitam fundos/texto claros ilegíveis no escuro. */
  --bai-surface-muted: #16294a;
  --bai-ink-soft: #9fb2cd;
  --bai-navy: #16294a;
  --bai-success: #4ccf8e;
  --bai-aqua-strong: #69c7df;
  --bs-body-bg: var(--bai-surface);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .3);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .38);
  --shadow-lg: 0 6px 18px rgba(0, 0, 0, .45), 0 22px 56px rgba(0, 0, 0, .5);
}

[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #2c56af;
  --bs-btn-border-color: #2c56af;
  --bs-btn-hover-bg: #3a67c4;
  --bs-btn-hover-border-color: #3a67c4;
  --bs-btn-active-bg: #3a67c4;
  --bs-btn-active-border-color: #3a67c4;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #9db9ec;
  --bs-btn-border-color: rgba(157, 185, 236, .45);
  --bs-btn-hover-bg: #2c56af;
  --bs-btn-hover-border-color: #2c56af;
}

[data-bs-theme="dark"] .site-header .brand-mark img {
  filter: brightness(0) invert(1);
}

/* Transições entre páginas (progressive enhancement, Chromium 126+) */
@media not (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--motion-base);
  }
}

/* ============================================================
   Motor de entrada — vocabulário de movimento único do site.
   Elementos [data-animate] entram ao surgir no viewport; grupos
   [data-animate-group] escalonam os filhos. Tudo usa os mesmos
   tokens de easing/duração. Sob reduced-motion nada é escondido.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* Só escondemos quando o JS está presente (.js-ready no <head>):
     sem JS, o conteúdo aparece imediatamente — nunca fica preso invisível. */
  .js-ready [data-animate] {
    opacity: 0;
    transform: translateY(22px);
    transition:
      opacity var(--motion-slow) var(--ease-out),
      transform var(--motion-slow) var(--ease-out);
  }
  .js-ready [data-animate="fade"] { transform: none; }
  .js-ready [data-animate="scale"] { transform: scale(.96); }
  .js-ready [data-animate="left"] { transform: translateX(-26px); }
  .js-ready [data-animate="right"] { transform: translateX(26px); }

  .js-ready [data-animate].is-in {
    opacity: 1;
    transform: none;
  }
}

/* Movimento reduzido: desligar animações e suavizações decorativas */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}