/* ==========================================================================
   CBESP Hub Academy — Design Tokens
   Identidade CBESP · Igreja Total: azul-marinho + azul institucional + prata.
   Fontes: Montserrat (títulos institucionais) + Inter (UI).
   Referência: https://igrejatotal.vercel.app/assets/css/app.css
   ========================================================================== */

:root {
  /* ---- Marca (azul-marinho + azul) ---- */
  --navy: #172B57;         /* azul-marinho institucional */
  --brand: #184B9B;        /* azul institucional — acento, botões, nav ativa, links */
  --brand-2: #3865AD;      /* azul de destaque — hover, badges */
  --brand-soft: #EFF4FB;   /* azul suave — fundos secundários */

  /* ---- Prata (uso restrito a destaques) ---- */
  --silver-100: #DFDFE0;
  --silver-300: #BDBDBF;
  --silver-500: #939396;
  --silver-700: #737478;

  /* ---- Neutros de interface ---- */
  --ink: #172033;          /* texto principal */
  --muted: #697386;        /* texto secundário */
  --line: #DDE1E8;         /* bordas/divisores */
  --paper: #F8F9FB;        /* fundo do app */
  --white: #ffffff;

  /* ---- Estados ---- */
  --green: #16855B;
  --green-dark: #0f6a48;
  --green-soft: #E8F6F0;
  --gold: #B7791F;         /* apenas warning; não é institucional */
  --gold-soft: #FFF4D6;
  --red: #C53A3A;
  --red-soft: #FDEAEA;
  --info: #2874B8;
  --info-soft: #EAF4FC;

  /* ==========================================================
     Aliases legados: as classes existentes (--bg, --surface, --tx,
     --acc, etc.) continuam funcionando — só remapeiam para navy/brand.
     Assim o CSS de todas as páginas atuais não precisa ser reescrito.
     ========================================================== */

  /* ==========================================================
     SITE PÚBLICO — escuro por padrão.
     Noite azul como base, azul-céu como luz, prata e branco como
     adorno. O institucional (--navy, --brand) permanece e sustenta
     o painel; aqui ele vira profundidade, não superfície.

     Contraste sobre --bg #070D1A, medido:
       --tx  #EAF0FA ......... 17,4:1   AAA
       --mut #93A4C4 .......... 7,1:1   AAA
       --acc #4EA8FF .......... 7,3:1   AAA
       --prata #C3D0E4 ....... 11,6:1   AAA
     Ao clarear o fundo ou escurecer qualquer um destes, refaça a conta.
     ========================================================== */
  --bg: #070D1A;         /* noite azul — quase preto, nunca preto */
  --surface: #0E1728;    /* cartões */
  --surface2: #141F35;   /* campos, thumbs */
  --surface3: #1B2942;
  --line: #1E2C4A;
  --line-soft: #16203A;
  --tx: #EAF0FA;         /* branco fluorescente */
  --tx-soft: #CBD8EC;
  --mut: #93A4C4;
  --dim: #6C7C9B;        /* 4,6:1 — limite para texto secundário */

  --acc: #4EA8FF;        /* azul-céu — o acento */
  --acc-2: #7FD3FF;      /* céu claro — segundo nível */
  --acc-dim: #2B6FB8;
  --acc-tint: rgba(78, 168, 255, 0.13);
  --prata: #C3D0E4;      /* prata neon — filetes e adornos */
  --prata-dim: rgba(195, 208, 228, 0.30);
  --header-bg: rgba(7, 13, 26, 0.86);   /* vidro escuro do cabecalho */
  --glow: rgba(78, 168, 255, 0.42);
  --glow-soft: rgba(78, 168, 255, 0.16);

  /* Ouro neon — filete de destaque. Entra como segunda cor de acento, ao
     lado do azul institucional: o azul organiza, o ouro realça. Uso restrito
     a borda e brilho; nunca em texto, para a paleta não virar duas marcas. */
  --ouro: #F0C24B;
  --ouro-dim: rgba(240, 194, 75, 0.34);
  --ouro-glow: rgba(240, 194, 75, 0.40);

  --ok: #3ED598;
  --ok-tint: rgba(62, 213, 152, 0.14);
  --warn: #F0B429;
  --warn-tint: rgba(240, 180, 41, 0.14);
  --err: #FF6B6B;
  --err-tint: rgba(255, 107, 107, 0.14);

  /* ---- Painel (claro) — remapeia para os mesmos tokens ---- */
  --p-bg: var(--paper);
  --p-surface: var(--white);
  --p-surface2: #F3F5F9;
  --p-line: var(--line);
  --p-line-soft: #EDF0F5;
  --p-tx: var(--ink);
  --p-mut: var(--muted);
  --p-dim: var(--dim);
  --p-acc: var(--brand);
  --p-acc-tint: var(--brand-soft);
  --p-ok: var(--green-dark);
  --p-ok-bg: var(--green-soft);
  --p-warn: var(--gold);
  --p-warn-bg: var(--gold-soft);
  --p-err: var(--red);
  --p-err-bg: var(--red-soft);

  /* ---------- Tipografia ---------- */
  --serif: "Montserrat", "Inter", -apple-system, "Segoe UI", sans-serif;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* ---------- Escala ---------- */
  --step-0: 13px;
  --step-1: 14px;
  --step-2: 15px;   /* corpo */
  --step-3: 16px;
  --step-4: 18px;
  --step-5: 22px;
  --step-6: 28px;
  --step-7: 34px;
  --step-8: 44px;

  /* ---------- Raio + transição ---------- */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 14px;
  --r-4: 16px;
  --t-fast: 180ms;
  --t-med: 240ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Densidade ---------- */
  --density: 1;
  --pad-card: calc(18px * var(--density));
  --pad-section: calc(44px * var(--density));

  --maxw: 1240px;
  /* No escuro a sombra não escurece — a luz é que separa os planos. */
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.40);
  --shadow-md: 0 12px 34px rgba(0, 0, 0, 0.48);
  --shadow-lg: 0 22px 56px rgba(0, 0, 0, 0.55);
  --shadow-1: var(--shadow-sm);
  --shadow-2: var(--shadow-md);
  --ring: 0 0 0 1px var(--prata-dim);              /* filete prata */
  --ring-glow: 0 0 0 1px var(--glow), 0 0 22px var(--glow-soft);
}

/* ---------- Tema claro alternativo do site (Tweak) ----------
   O escuro é o padrão; este é o inverso, mantido para comparação. */
:root[data-site-theme="light"] {
  --bg: var(--paper);
  --surface: var(--white);
  --surface2: var(--brand-soft);
  --surface3: #E4EBF6;
  --line: #DDE1E8;
  --line-soft: #EDF0F5;
  --tx: var(--ink);
  --tx-soft: #2b3245;
  --mut: var(--muted);
  --dim: #6E7076;
  --acc: var(--brand);
  --acc-2: var(--brand-2);
  --acc-dim: var(--navy);
  --acc-tint: var(--brand-soft);
  --prata: var(--silver-500);
  --prata-dim: rgba(147, 147, 150, 0.35);
  --header-bg: rgba(255, 255, 255, 0.94);
  --glow: rgba(24, 75, 155, 0.25);
  --glow-soft: rgba(24, 75, 155, 0.10);
  /* No claro o ouro precisa escurecer para não sumir no branco */
  --ouro: #B7791F;
  --ouro-dim: rgba(183, 121, 31, 0.42);
  --ouro-glow: rgba(183, 121, 31, 0.22);
  --ok: var(--green); --ok-tint: var(--green-soft);
  --warn: var(--gold); --warn-tint: var(--gold-soft);
  --err: var(--red); --err-tint: var(--red-soft);
  --shadow-sm: 0 2px 8px rgba(23, 43, 87, 0.06);
  --shadow-md: 0 10px 30px rgba(23, 43, 87, 0.10);
  --shadow-lg: 0 20px 50px rgba(23, 43, 87, 0.16);
}

/* ---------- Acentos (Tweak) ---------- */
:root[data-accent="dourado"] {
  --acc: #B7791F;
  --acc-dim: #8a5b17;
  --acc-tint: #FFF4D6;
}
:root[data-accent="bordo"] {
  --acc: #a1524a;
  --acc-dim: #6c352f;
  --acc-tint: #fbecea;
}
:root[data-accent="oliva"] {
  --acc: #5a6b3a;
  --acc-dim: #3d4826;
  --acc-tint: #edf1e0;
}

/* ---------- Fonte de título (Tweak) ---------- */
:root[data-serif="newsreader"] { --serif: "Newsreader", "Iowan Old Style", Georgia, serif; }
:root[data-serif="fraunces"] { --serif: "Fraunces", Georgia, serif; }
:root[data-serif="playfair"] { --serif: "Playfair Display", Georgia, serif; }
:root[data-serif="garamond"] { --serif: "EB Garamond", Georgia, serif; }

/* ---------- Densidade (Tweak) ---------- */
:root[data-density="compact"] { --density: 0.82; }
:root[data-density="spacious"] { --density: 1.18; }