/*
  Voice — design tokens
  Fonte única de verdade para cor, tipografia, espaçamento, raio e sombra.
  Consumido por admin.html, onboarding.html e tester.html via <link>.
  Não redefine seletores de componente — cada página mantém sua própria
  árvore de classes; isto só fornece as variáveis que elas devem usar.
*/

:root {
  /* Neutros — canvas com o menor sopro de calor, estrutura em cinza verdadeiro */
  --canvas: #f3f1f5;
  --surface: #ffffff;
  --surface-2: #f6f4f7;
  --surface-3: #ece9ee;
  --border: #e9e6eb;
  --border-strong: #d8d4db;
  --ink: #161319;
  --ink-muted: #6f6c76;
  --ink-faint: #868190; /* só ícone, placeholder e estado inativo — ver seção Diretrizes */

  /* Roxo — escala 50→950, acento único do produto */
  --purple-50: #fbf0ff;
  --purple-100: #f5dffe;
  --purple-200: #eac0fc;
  --purple-300: #d791f9;
  --purple-400: #be5ef2;
  --purple-500: #a238e0;
  --purple-600: #8a24c4;
  --purple-700: #701ca0;
  --purple-800: #591880;
  --purple-900: #481667;
  --purple-950: #2a0c3d;

  /* Esfera — gradiente vidrado usado no orb de presença/marca */
  --orb-1: #fdebff;
  --orb-2: #e3a6fa;
  --orb-3: #c355ea;
  --orb-4: #9333ea;
  --orb-5: #5b189b;

  /* Papéis semânticos — roxo é presença, não ação */
  --accent: var(--purple-600);
  --accent-soft: var(--purple-50);
  --accent-ring: rgba(138, 36, 196, 0.24);
  --action: #161319; /* botão primário: tinta neutra, nunca roxo preenchido */
  --action-on: #ffffff;

  --success: #197e56;
  --success-soft: #e3f7ee;
  --warning: #976109;
  --warning-soft: #fcf0dc;
  --danger: #c7322d;
  --danger-soft: #fce7e6;

  --shadow-sm: 0 2px 10px -4px rgba(30, 20, 40, 0.1);
  --shadow-md: 0 18px 40px -18px rgba(30, 20, 40, 0.2);
  --shadow-lg: 0 34px 80px -26px rgba(30, 20, 40, 0.28);
  --shadow-orb: 0 26px 54px -18px rgba(147, 51, 234, 0.45);

  --font-serif: "Fraunces", ui-serif, Georgia, serif;
  --font-display: "Geist", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-xs: 6px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-full: 999px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #151319;
    --surface: #1d1a22;
    --surface-2: #252129;
    --surface-3: #2f2a34;
    --border: #332e3b;
    --border-strong: #463f4f;
    --ink: #f3f0f5;
    --ink-muted: #a9a4b2;
    --ink-faint: #726c7c;

    --accent: var(--purple-300);
    --accent-soft: #2a1f42;
    --accent-ring: rgba(215, 145, 249, 0.28);
    --action: #f3f0f5;
    --action-on: #171420;

    --success: #3fdb9b;
    --success-soft: #132c22;
    --warning: #f0ac3e;
    --warning-soft: #302207;
    --danger: #f2685f;
    --danger-soft: #341715;

    --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 20px 46px -18px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 36px 90px -26px rgba(0, 0, 0, 0.65);
    --shadow-orb: 0 30px 64px -16px rgba(190, 94, 242, 0.4);

    color-scheme: dark;
  }
}

/* Ganchos para um futuro alternador manual de tema — sem UI própria ainda,
   mas já corretos nos dois sentidos caso um data-theme seja adicionado. */
:root[data-theme="dark"] {
  --canvas: #151319;
  --surface: #1d1a22;
  --surface-2: #252129;
  --surface-3: #2f2a34;
  --border: #332e3b;
  --border-strong: #463f4f;
  --ink: #f3f0f5;
  --ink-muted: #a9a4b2;
  --ink-faint: #726c7c;
  --accent: var(--purple-300);
  --accent-soft: #2a1f42;
  --accent-ring: rgba(215, 145, 249, 0.28);
  --action: #f3f0f5;
  --action-on: #171420;
  --success: #3fdb9b;
  --success-soft: #132c22;
  --warning: #f0ac3e;
  --warning-soft: #302207;
  --danger: #f2685f;
  --danger-soft: #341715;
  --shadow-sm: 0 2px 10px -4px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 20px 46px -18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 36px 90px -26px rgba(0, 0, 0, 0.65);
  --shadow-orb: 0 30px 64px -16px rgba(190, 94, 242, 0.4);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --canvas: #f3f1f5;
  --surface: #ffffff;
  --surface-2: #f6f4f7;
  --surface-3: #ece9ee;
  --border: #e9e6eb;
  --border-strong: #d8d4db;
  --ink: #161319;
  --ink-muted: #6f6c76;
  --ink-faint: #868190;
  --accent: var(--purple-600);
  --accent-soft: var(--purple-50);
  --accent-ring: rgba(138, 36, 196, 0.24);
  --action: #161319;
  --action-on: #ffffff;
  --success: #197e56;
  --success-soft: #e3f7ee;
  --warning: #976109;
  --warning-soft: #fcf0dc;
  --danger: #c7322d;
  --danger-soft: #fce7e6;
  --shadow-sm: 0 2px 10px -4px rgba(30, 20, 40, 0.1);
  --shadow-md: 0 18px 40px -18px rgba(30, 20, 40, 0.2);
  --shadow-lg: 0 34px 80px -26px rgba(30, 20, 40, 0.28);
  --shadow-orb: 0 26px 54px -18px rgba(147, 51, 234, 0.45);
  color-scheme: light;
}

/* Orb de presença — reutilizado em qualquer página como indicador "isto está vivo" */
.voice-orb {
  border-radius: 50%;
  position: relative;
  background: radial-gradient(
    circle at 30% 24%,
    var(--orb-1) 0%,
    var(--orb-2) 18%,
    var(--orb-3) 42%,
    var(--orb-4) 68%,
    var(--orb-5) 100%
  );
  box-shadow:
    inset -10px -12px 26px rgba(60, 10, 90, 0.4),
    inset 6px 8px 18px rgba(255, 255, 255, 0.55),
    var(--shadow-orb);
  flex: none;
}
.voice-orb::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 21%;
  width: 32%;
  height: 24%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 72%);
  filter: blur(0.5px);
}
@keyframes voice-orb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: no-preference) {
  .voice-orb.is-live { animation: voice-orb-float 5s ease-in-out infinite; }
}

/* Saudação em serifa — reservada ao momento pessoal, nunca a dado ou UI de rotina */
.voice-greeting {
  font-family: var(--font-serif);
  font-weight: 440;
  letter-spacing: -0.01em;
  line-height: 1.14;
}
.voice-greeting em {
  font-style: italic;
  color: var(--accent);
}