/* ============================================================
 * Cartorária — Design Tokens
 * ------------------------------------------------------------
 * Fonte única de verdade para as cores theme-aware. O Tailwind
 * lê estas variáveis via utilitários (bg-surface, text-text-muted,
 * border-line, bubble-dani, etc.).
 *
 * Troca de tema: o atributo data-theme="dark" no <html> inverte
 * todos os valores. O hook useTheme() faz isso automaticamente; um
 * script inline no index.html aplica antes do primeiro paint.
 * ============================================================ */

/* As fontes vêm de /static/vendor/fontes.css — auto-hospedadas,
 * porque a CSP desta aplicação fecha em 'self'. */

:root {
  /* ---- Superfícies ---- */
  --c-bg: #FAF7F0;
  --c-surface: #FFFFFF;
  --c-surface-2: #F0E9D6;
  --c-surface-3: #E8DEC6;

  /* ---- Texto ---- */
  --c-text: #0A0A0A;
  --c-text-muted: #6B5B3D;
  --c-text-subtle: #9A8A6A;

  /* ---- Linhas ---- */
  --c-border: #E8DCBA;
  --c-border-soft: #F0E7D0;

  /* ---- Acento / estado ativo ---- */
  --c-active-bg: rgba(212, 179, 106, 0.18);
  --c-gold-soft: #EEE3C2;

  /* ---- Bolhas de conversa ---- */
  --c-bubble-in: #F0E9D6;     /* cidadão */
  --c-bubble-dani: #F6ECCF;   /* IA */
  --c-bubble-out: #FFFFFF;    /* atendente humano */
  --c-bubble-sys: #ECE5D3;    /* sistema */

  /* ---- Backgrounds suaves de status ---- */
  --c-success-soft: #E2EFE4;
  --c-warn-soft: #F6ECCF;
  --c-danger-soft: #F3DAD3;
  --c-info-soft: #DDE6F1;

  /* ---- Sombras (modo claro, leve tom dourado) ---- */
  --s-soft: 0 1px 2px rgba(10, 10, 10, 0.04),
    0 6px 18px rgba(142, 114, 50, 0.07);
  --s-float: 0 2px 6px rgba(10, 10, 10, 0.05),
    0 8px 24px rgba(142, 114, 50, 0.08);
  --s-side: 0 12px 36px rgba(10, 10, 10, 0.1);

  /* ---- Glass (launcher de módulos, cards flutuantes) ---- */
  --c-glass-bg: rgba(255, 255, 255, 0.55);
  --c-glass-bg-hover: rgba(255, 255, 255, 0.78);
  --c-glass-border: rgba(180, 150, 75, 0.32);
  --c-glass-border-hover: rgba(180, 150, 75, 0.65);
  --c-glass-highlight: rgba(255, 255, 255, 0.6);
  --s-glass:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(10, 10, 10, 0.04),
    0 10px 30px rgba(142, 114, 50, 0.10);
  --s-glass-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 4px rgba(10, 10, 10, 0.06),
    0 18px 40px rgba(180, 150, 75, 0.22);
  --g-launcher-bg:
    radial-gradient(1200px 600px at 50% -10%, rgba(180, 150, 75, 0.14), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, rgba(212, 179, 106, 0.10), transparent 55%),
    linear-gradient(180deg, #FAF7F0 0%, #F4EBD1 100%);
}

[data-theme="dark"] {
  --c-bg: #0A0A0A;
  --c-surface: #1A1A1A;
  --c-surface-2: #241F17;
  --c-surface-3: #2E2820;

  --c-text: #FAF7F0;
  --c-text-muted: #D4B36A;
  --c-text-subtle: #8A7E63;

  --c-border: rgba(212, 179, 106, 0.18);
  --c-border-soft: rgba(212, 179, 106, 0.10);

  --c-active-bg: rgba(212, 179, 106, 0.12);
  --c-gold-soft: rgba(180, 150, 75, 0.18);

  --c-bubble-in: #241F17;
  --c-bubble-dani: rgba(180, 150, 75, 0.15);
  --c-bubble-out: #1F1B14;
  --c-bubble-sys: #201C15;

  --c-success-soft: rgba(63, 122, 77, 0.22);
  --c-warn-soft: rgba(181, 134, 42, 0.20);
  --c-danger-soft: rgba(162, 58, 42, 0.24);
  --c-info-soft: rgba(58, 92, 140, 0.24);

  --s-soft: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.3);
  --s-float: 0 2px 6px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --s-side: 0 12px 36px rgba(0, 0, 0, 0.5);

  /* ---- Glass (dark) ---- */
  --c-glass-bg: rgba(36, 31, 23, 0.55);
  --c-glass-bg-hover: rgba(46, 40, 32, 0.75);
  --c-glass-border: rgba(212, 179, 106, 0.28);
  --c-glass-border-hover: rgba(232, 213, 142, 0.55);
  --c-glass-highlight: rgba(255, 244, 200, 0.08);
  --s-glass:
    inset 0 1px 0 rgba(255, 244, 200, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 14px 34px rgba(0, 0, 0, 0.45);
  --s-glass-hover:
    inset 0 1px 0 rgba(255, 244, 200, 0.14),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 22px 44px rgba(212, 179, 106, 0.24);
  --g-launcher-bg:
    radial-gradient(1200px 600px at 50% -10%, rgba(212, 179, 106, 0.18), transparent 60%),
    radial-gradient(700px 500px at 90% 100%, rgba(180, 150, 75, 0.10), transparent 55%),
    linear-gradient(180deg, #0A0A0A 0%, #17130B 100%);
}

/* Transição suave de tema nas superfícies de body */
html,
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  transition: background-color 0.25s ease, color 0.25s ease;
}