/* ============================================================
   CLAREIA · TEMA v18 — "Revolução visual"
   Camada carregada depois dos estilos-base. As fontes de produção são
   auto-hospedadas em /fonts/; este arquivo não contém dependências externas.
   ============================================================ */

:root {
  /* Cor — paleta da marca, inalterada */
  --cl-petrol: #173b4d;
  --cl-forest: #073f3c;
  --cl-forest-deep: #0b3634;
  --cl-teal: #169b8a;
  --cl-teal-dark: #0e7a6c;
  --cl-teal-deep: #0b4a44;
  --cl-mint: #dff4ed;
  --cl-mint-strong: #8fe0ce;
  --cl-paper: #fbfaf6;
  --cl-cream: #f3eee2;
  --cl-coral: #e4573f;        /* coral de interface (contraste AA sobre papel) */
  --cl-coral-brand: #ff7966;  /* coral da marca (só decorativo) */
  --cl-coral-ink: #b3402b;
  --cl-yellow: #f3ba36;
  --cl-yellow-ink: #7a5a11;
  --cl-ink: var(--cl-petrol);
  --cl-muted: #5c7774;
  --cl-line: rgba(23, 59, 77, .16);
  --cl-line-strong: var(--cl-petrol);

  /* Tipografia */
  --cl-serif: 'Instrument Serif', Georgia, serif;
  --cl-sans: 'Public Sans', system-ui, sans-serif;
  --cl-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Geometria */
  --cl-radius-s: 10px;
  --cl-radius: 13px;
  --cl-radius-l: 18px;
  --cl-radius-xl: 22px;

  /* Sombra dura (assinatura da linguagem ousada) */
  --cl-pop: 4px 4px 0 var(--cl-line-strong);
  --cl-pop-hover: 6px 6px 0 var(--cl-line-strong);
  --cl-pop-press: 1px 1px 0 var(--cl-line-strong);

  /* Movimento — 80–120ms resposta, 160–220ms controles, 240–320ms painéis */
  --cl-ease: cubic-bezier(.2, .7, .3, 1);
  --cl-fast: 160ms;
  --cl-panel: 280ms;
}

[data-theme="dark"] {
  --cl-paper: #101d23;
  --cl-cream: #16292f;
  --cl-ink: #e5f1ef;
  --cl-muted: #a7bbbf;
  --cl-line: rgba(229, 241, 239, .18);
  --cl-line-strong: #e5f1ef;
}

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
body {
  font-family: var(--cl-sans);
  background: var(--cl-paper);
  color: var(--cl-ink);
}
h1, h2, h3, .hello,
.app-studio .card .section-title,
.brand-name {
  font-family: var(--cl-serif);
  font-weight: 400;
  letter-spacing: -.015em;
}
.hello { color: var(--cl-ink); }
.eyebrow {
  font: 500 11px/1 var(--cl-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cl-teal-dark);
}
.muted { color: var(--cl-muted); }
a { color: var(--cl-teal-dark); }
a:hover { color: var(--cl-teal); }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--cl-teal);
  outline-offset: 2px;
  border-radius: var(--cl-radius-s);
}

/* ------------------------------------------------------------
   Botões — 4 papéis × estados (hover, active, foco, loading, disabled)
   Alvo mínimo de toque: 46px.
   ------------------------------------------------------------ */
.primary, .secondary {
  min-height: 46px;
  border-radius: var(--cl-radius);
  font: 700 15px/1 var(--cl-sans);
  transition: transform var(--cl-fast) var(--cl-ease),
              box-shadow var(--cl-fast) var(--cl-ease),
              background var(--cl-fast) var(--cl-ease),
              border-color var(--cl-fast) var(--cl-ease);
}
.primary {
  padding: 12px 20px;
  border: 2px solid var(--cl-line-strong);
  background: var(--cl-teal);
  color: var(--cl-paper);
  box-shadow: var(--cl-pop);
}
.primary:hover { background: var(--cl-teal); transform: translate(-2px, -2px); box-shadow: var(--cl-pop-hover); }
.primary:active { transform: translate(2px, 2px); box-shadow: var(--cl-pop-press); }
.primary.inverted { background: var(--cl-paper); color: var(--cl-forest); }

.secondary {
  padding: 12px 18px;
  border: 1.5px solid rgba(23, 59, 77, .25);
  background: transparent;
  color: var(--cl-ink);
}
.secondary:hover { border-color: var(--cl-teal); color: var(--cl-teal-dark); background: rgba(223, 244, 237, .45); }
.secondary:active { background: var(--cl-mint); transform: translateY(1px); }
.secondary.subtle { border-color: transparent; color: var(--cl-teal-dark); }
.secondary.subtle:hover { background: var(--cl-mint); }
.secondary.danger-soft { border-color: rgba(179, 64, 43, .4); color: var(--cl-coral-ink); }
.secondary.danger-soft:hover { background: #fdebe7; border-color: var(--cl-coral-ink); }

.primary[disabled], .secondary[disabled] {
  background: #dde6e3; border-color: transparent; color: #9aafac;
  box-shadow: none; transform: none; cursor: not-allowed;
}

/* Estado carregando: <button class="primary is-loading" aria-busy="true"> */
.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.is-loading::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(251, 249, 246, .35);
  border-top-color: var(--cl-paper);
  animation: cl-spin 700ms linear infinite;
}
.secondary.is-loading::after { border-color: var(--cl-line); border-top-color: var(--cl-teal); }
@keyframes cl-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   Campos — 48px, foco 4px, erro que preserva o digitado
   ------------------------------------------------------------ */
.search, .auth-card .search, .wellbeing-dialog .search {
  min-height: 48px;
  padding: 12px 14px;
  border: 1.5px solid rgba(23, 59, 77, .22);
  border-radius: var(--cl-radius);
  background: #fff;
  font: 400 16px/1.4 var(--cl-sans);
  color: var(--cl-ink);
  transition: border-color var(--cl-fast) ease, box-shadow var(--cl-fast) ease;
}
.search:focus { outline: none; border-color: var(--cl-teal); box-shadow: 0 0 0 4px rgba(22, 155, 138, .16); }
.search[aria-invalid="true"] { border-color: var(--cl-coral-ink); box-shadow: 0 0 0 4px rgba(179, 64, 43, .12); }
.search[disabled] { background: #f1efe9; color: #9aafac; border-color: rgba(23, 59, 77, .1); }
.field-error { display: flex; gap: 6px; font: 400 12px/1.4 var(--cl-sans); color: var(--cl-coral-ink); }
.field-ok { display: flex; gap: 6px; font: 400 12px/1.4 var(--cl-sans); color: var(--cl-teal-dark); }

/* ------------------------------------------------------------
   Cards e avisos
   ------------------------------------------------------------ */
.card {
  border: 1.5px solid var(--cl-line);
  border-radius: var(--cl-radius-l);
  background: #fff;
  box-shadow: none;
}
.card.pop { border: 2px solid var(--cl-line-strong); box-shadow: var(--cl-pop-hover); }

/* .notice deixa de ser o "aviso amarelo para tudo": vira família de estado.
   Padrão (info) fica calmo; use os modificadores. */
.notice {
  border: 1px solid var(--cl-line);
  border-radius: var(--cl-radius);
  background: var(--cl-cream);
  color: var(--cl-muted);
  font-size: 13px;
}
.notice--wait { background: #fdf3de; border-color: rgba(243, 186, 54, .5); color: #6b5b28; }
.notice--error { background: #fdebe7; border-color: rgba(179, 64, 43, .3); color: #7a3020; }
.notice--success { background: var(--cl-mint); border-color: rgba(22, 155, 138, .35); color: var(--cl-teal-deep); }

/* Skeleton — substitui textos "Carregando…" soltos.
   <div class="cl-skeleton" style="width:60%;height:14px"></div> */
.cl-skeleton {
  border-radius: 7px;
  background: linear-gradient(90deg, #edeae2 0%, #f7f5ef 50%, #edeae2 100%);
  background-size: 420px 100%;
  animation: cl-shimmer 1.4s ease-in-out infinite;
}
@keyframes cl-shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }

/* Situação da fonte — nunca só cor: cada estado tem forma própria do ponto.
   <span class="source-badge source-badge--approved"><i></i>Aprovado</span> */
.source-badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 999px;
  font: 700 11px/1 var(--cl-sans);
}
.source-badge i { width: 8px; height: 8px; flex: none; }
.source-badge--approved { background: var(--cl-mint); border: 1px solid rgba(22,155,138,.35); color: var(--cl-teal-deep); }
.source-badge--approved i { border-radius: 50%; background: var(--cl-teal); }
.source-badge--review { background: #fdf3de; border: 1px solid rgba(243,186,54,.55); color: var(--cl-yellow-ink); }
.source-badge--review i { background: var(--cl-yellow); transform: rotate(45deg); }
.source-badge--draft { background: #f1efe9; border: 1px solid var(--cl-line); color: #3f5c59; }
.source-badge--draft i { border-radius: 2px; border: 1.5px solid var(--cl-muted); }
.source-badge--blocked { background: #fdebe7; border: 1px solid rgba(179,64,43,.32); color: #8f3122; }
.source-badge--blocked i { height: 2px; background: var(--cl-coral-ink); }

.tag { background: var(--cl-mint); color: var(--cl-teal-deep); font-weight: 700; }
.progress { height: 10px; background: #edeae2; }
.progress span { background: linear-gradient(90deg, var(--cl-teal), var(--cl-mint-strong)); }

/* ------------------------------------------------------------
   Shell autenticado — navegação agrupada
   ------------------------------------------------------------ */
.app-studio { background: var(--cl-paper); }
.app-studio .sidebar { background: var(--cl-petrol); }
.app-studio .nav button {
  min-height: 42px;
  border-radius: var(--cl-radius-s);
  color: rgba(251, 249, 246, .8);
  font: 500 14px/1 var(--cl-sans);
  transition: background var(--cl-fast) ease, color var(--cl-fast) ease;
}
.app-studio .nav button:hover { background: rgba(223, 244, 237, .1); color: var(--cl-paper); }
.app-studio .nav button.active { background: var(--cl-teal); color: var(--cl-paper); font-weight: 700; box-shadow: none; }
.app-studio .nav-group { color: rgba(223, 244, 237, .45); font: 500 9px/1 var(--cl-mono); letter-spacing: .18em; }
.app-studio .topbar { background: rgba(251, 250, 246, .92); border-color: var(--cl-line); }
.app-studio .topbar .hello { font: 400 32px/1 var(--cl-serif); letter-spacing: -.01em; }
.app-studio .card.hero { background: var(--cl-petrol); border: 2px solid var(--cl-line-strong); }
.app-studio .notice { border-radius: var(--cl-radius); }

/* Contador de não lidas na navegação:
   <button data-go="duos">Conexões <b class="nav-unread">3</b></button> */
.nav-unread {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; margin-left: auto; padding: 0 6px;
  border-radius: 999px; background: var(--cl-yellow);
  color: var(--cl-petrol); font: 700 11px/1 var(--cl-sans);
}

/* Feedback contextual (substitui alert()) */
.feedback-message {
  border: 1.5px solid var(--cl-line);
  border-radius: var(--cl-radius-l);
  font-family: var(--cl-sans);
}
.feedback-message > span { background: var(--cl-mint); color: var(--cl-teal-deep); }
.feedback-message.error > span { background: #fdebe7; color: var(--cl-coral-ink); }

/* ------------------------------------------------------------
   Scroll reveal — seguro contra "conteúdo que demora a aparecer":
   1) Sem JS, nada fica oculto (estado padrão = visível).
   2) O JS marca <html class="cl-io"> só quando o observer existe.
   3) rootMargin POSITIVO expande a área observada: dispara ~15%
      antes de o elemento entrar na viewport (nunca atrasa).
   Uso: class="cl-reveal" (+ cl-reveal-d1/d2/d3 para escalonar).
   ------------------------------------------------------------ */
html.cl-io .cl-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 480ms var(--cl-ease), transform 480ms var(--cl-ease);
  will-change: opacity, transform;
}
html.cl-io .cl-reveal.is-in { opacity: 1; transform: none; }
html.cl-io .cl-reveal-d1.is-in { transition-delay: 70ms; }
html.cl-io .cl-reveal-d2.is-in { transition-delay: 140ms; }
html.cl-io .cl-reveal-d3.is-in { transition-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  html.cl-io .cl-reveal { opacity: 1; transform: none; transition: none; }
}

/*
   JS (colar no fim de app.js ou em <script> próprio):
   (function () {
     if (!('IntersectionObserver' in window)) return;
     document.documentElement.classList.add('cl-io');
     var io = new IntersectionObserver(function (es) {
       es.forEach(function (e) {
         if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); }
       });
     }, { threshold: 0, rootMargin: '0px 0px 15% 0px' });
     var arm = function (el) { if (!el.classList.contains('is-in')) io.observe(el); };
     document.querySelectorAll('.cl-reveal').forEach(arm);
     new MutationObserver(function (ms) {
       ms.forEach(function (m) {
         m.addedNodes.forEach(function (n) {
           if (n.nodeType !== 1) return;
           if (n.classList && n.classList.contains('cl-reveal')) arm(n);
           if (n.querySelectorAll) n.querySelectorAll('.cl-reveal').forEach(arm);
         });
       });
     }).observe(document.body, { childList: true, subtree: true });
   })();
   Elementos JÁ visíveis no load entram sem atraso (isIntersecting
   dispara no primeiro frame). Nunca aplicar .cl-reveal no hero.
*/

/* ------------------------------------------------------------
   Acessibilidade e preferências
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cl-skeleton, .is-loading::after { animation: none; }
  .primary, .secondary { transition: none; }
  .primary:hover, .primary:active { transform: none; }
}
/* ============================================================
   MODO MODERNO v19 — linguagem final aprovada (vidro + gradiente)
   Substitui a assinatura de sombra dura nas superfícies visíveis.
   ============================================================ */
:root {
  --cl-grad-action: linear-gradient(135deg, #169b8a, #12b49b);
  --cl-action-ink: #032725;
  --cl-grad-warm: linear-gradient(135deg, #f3ba36, #e9922e);
  --cl-grad-hot: linear-gradient(135deg, #ff7966, #e4573f);
  --cl-glass: rgba(251, 250, 246, .06);
  --cl-glass-border: rgba(251, 250, 246, .14);
}
.primary {
  border: none;
  border-radius: 999px;
  background: var(--cl-grad-action);
  box-shadow: 0 12px 26px rgba(22, 155, 138, .4);
}
.primary:hover { transform: translateY(-3px); box-shadow: 0 18px 36px rgba(22, 155, 138, .5); background: var(--cl-grad-action); }
.primary:active { transform: scale(.97); box-shadow: 0 8px 18px rgba(22, 155, 138, .35); }
.secondary { border-radius: 999px; }

/* Cartão de vidro para superfícies escuras (Praças, campus, heros):
   <article class="cl-glass-card">… (variantes de brilho: --warm / --hot / --mint) */
.cl-glass-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--cl-glass-border);
  border-radius: 26px;
  background: var(--cl-glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform 240ms var(--cl-ease), border-color 240ms ease, background 240ms ease, box-shadow 240ms var(--cl-ease);
}
.cl-glass-card:hover { transform: translateY(-6px); background: rgba(251, 250, 246, .08); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); }
.cl-glass-card--mint:hover { border-color: rgba(143, 224, 206, .45); }
.cl-glass-card--warm:hover { border-color: rgba(243, 186, 54, .5); }
.cl-glass-card--hot:hover { border-color: rgba(255, 121, 102, .5); }
.cl-glow { position: absolute; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; }
.cl-glow--warm { background: radial-gradient(circle, rgba(243, 186, 54, .32), transparent 70%); }
.cl-glow--hot { background: radial-gradient(circle, rgba(228, 87, 63, .35), transparent 70%); }
.cl-glow--mint { background: radial-gradient(circle, rgba(22, 155, 138, .28), transparent 70%); }

/* Ícone em chip gradiente: <span class="cl-icon-chip cl-icon-chip--warm">🎉</span> */
.cl-icon-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 16px;
  background: var(--cl-grad-action);
  box-shadow: 0 8px 20px rgba(22, 155, 138, .35);
  font: 400 21px/1 var(--cl-sans);
}
.cl-icon-chip--warm { background: var(--cl-grad-warm); box-shadow: 0 8px 20px rgba(243, 186, 54, .35); }
.cl-icon-chip--hot { background: var(--cl-grad-hot); box-shadow: 0 8px 20px rgba(228, 87, 63, .4); }

/* Pílula de vidro sobre foto: <span class="cl-photo-pill">🔥 3 mesas acesas</span> */
.cl-photo-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px;
  background: rgba(11, 54, 52, .72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(143, 224, 206, .4);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
  font: 700 13px/1 var(--cl-sans); color: var(--cl-paper);
}

/* Texto em gradiente: <em class="cl-grad-text">claro.</em> */
.cl-grad-text { background: linear-gradient(90deg, #8fe0ce, #12b49b); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: inherit; }
.cl-grad-text--warm { background: linear-gradient(90deg, #f3ba36, #ff9c8c); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Contrato final da landing — seletores de alta especificidade da página
   pública (design-studio / campus-gate) alinhados ao MODO MODERNO v19:
   pílula gradiente, sem borda dura, hover que flutua. Manter no FIM do arquivo. */
.design-studio .primary,
.campus-gate .primary,
.campus-gate .hero-copy .primary {
  border: none;
  border-radius: 999px;
  background: var(--cl-grad-action);
  color: var(--cl-action-ink);
  box-shadow: 0 12px 26px rgba(22, 155, 138, .4);
}
.design-studio .primary span,
.campus-gate .primary span,
.campus-gate .hero-copy .primary span {
  color: currentColor;
}
.design-studio .primary:hover,
.campus-gate .primary:hover,
.campus-gate .hero-copy .primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(22, 155, 138, .5);
}
.design-studio .primary:active,
.campus-gate .primary:active,
.campus-gate .hero-copy .primary:active {
  transform: scale(.97);
  box-shadow: 0 8px 18px rgba(22, 155, 138, .35);
}
.design-studio .secondary.button-link,
.campus-gate .secondary.button-link {
  border: 1px solid rgba(23, 59, 77, .3);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}
.design-studio .secondary.button-link:hover,
.campus-gate .secondary.button-link:hover {
  transform: none;
  border-color: var(--cl-teal);
  color: var(--cl-teal-dark);
  background: rgba(223, 244, 237, .45);
  box-shadow: none;
}
.design-studio .secondary.button-link:active,
.campus-gate .secondary.button-link:active {
  transform: translateY(1px);
  background: var(--cl-mint);
  box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
  .cl-glass-card:hover, .primary:hover,
  .design-studio .primary:hover, .campus-gate .primary:hover { transform: none; }
}

/* Palavra rotativa do hero — altura em em (não corta em telas menores) */
.cl-word-tick { display: inline-block; height: 1.06em; overflow: hidden; vertical-align: bottom; }
.cl-word-tick > span { display: flex; flex-direction: column; animation: cl-tick 9s var(--cl-ease) infinite; }
.cl-word-tick em { display: block; height: 1.06em; }
@keyframes cl-tick {
  0%, 18% { transform: translateY(0); }
  25%, 43% { transform: translateY(-1.06em); }
  50%, 68% { transform: translateY(-2.12em); }
  75%, 93% { transform: translateY(-3.18em); }
  100% { transform: translateY(-4.24em); }
}
@media (prefers-reduced-motion: reduce) { .cl-word-tick > span { animation: none; } }