/* Theme Escuro Discreto (dark): tokens only. Material: frosted. */
@layer themes {
/* Component tokens: the theme values of hooks that base rules read. */
html[data-theme="dark"],
html[data-theme="dark"] body {
  --comp-chat-bg-orbs-opacity: 0.12;
  --comp-login-bg-orbs-opacity: 0.12;
}
/* ─── 1. Dark Discreto (Grafite Translúcido) ─── */
html[data-theme="dark"] {
  --sys-bg-base: #0d1017;
  --sys-bg-raised: #121620;
  --sys-bg-high: #181d2a;
  --sys-bg-overlay: rgba(24, 29, 42, 0.88);
  --sys-surface: rgba(255, 255, 255, 0.03);
  --sys-border: rgba(148, 163, 184, 0.14);
  --sys-border-strong: rgba(148, 163, 184, 0.24);
  --sys-surface-hover: rgba(148, 163, 184, 0.08);
  --sys-surface-shell: rgba(18, 22, 32, 0.84);
  --sys-surface-plate: rgba(22, 27, 39, 0.94);
  --sys-surface-control: rgba(30, 36, 51, 0.72);
  --sys-accent: #6366f1;
  --sys-accent-strong: #4f46e5;
  --sys-accent-alt: #475569;
  --sys-accent-gradient: linear-gradient(135deg, #4f46e5, #4338ca);
  --sys-accent-gradient-hover: linear-gradient(135deg, #6366f1, #4f46e5);
  --sys-on-surface: #e2e8f0;
  --sys-on-surface-variant: #94a3b8;
  --sys-on-surface-muted: #64748b;
  --comp-bubble-own-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.22), rgba(51, 65, 85, 0.35));
  --comp-bubble-own-border: rgba(99, 102, 241, 0.35);
  --comp-bubble-other-bg: rgba(24, 29, 42, 0.78);
  --comp-bubble-other-border: rgba(148, 163, 184, 0.14);
  --sys-refraction: blur(16px) saturate(120%);
  --sys-refraction-subtle: blur(12px) saturate(115%);
}
}