/* Theme Modo Claro (light): its tokens, then 4 rule(s) that decorate or still
   target components without a token. Material: paper. */
@layer themes {
/* Component tokens: the theme values of hooks that base rules read. */
html[data-theme="light"],
html[data-theme="light"] body {
  --ref-light-message-text-color: #0f172a;
  --ref-light-message-reply-reference-border: rgba(15, 23, 42, 0.16);
  --ref-light-message-reply-reference-border-left: #4f46e5;
  --ref-light-message-reply-reference-color: #334155;
  --ref-light-message-mention-border: rgba(79, 70, 229, 0.3);
  --ref-light-poll-option-border: rgba(15, 23, 42, 0.18);
  --comp-chat-bg-orbs-opacity: 0.2;
  --comp-login-bg-orbs-opacity: 0.2;
  --comp-message-user-filter: brightness(0.62) saturate(1.3);
  --comp-message-reply-reference-background: rgba(79, 70, 229, 0.08);
  --comp-message-reply-reference-strong-color: #1e1b4b;
  --comp-message-link-color: #4338ca;
  --comp-message-mention-color: #312e81;
  --comp-message-mention-background: rgba(79, 70, 229, 0.15);
  --comp-modal-close-hover-color: #0f172a;
  --comp-poll-option-background: rgba(241, 245, 249, 0.92);
}
/* ─── 2. Modo Claro (Cristal Pérola Translúcido) ─── */
html[data-theme="light"] {
  --sys-bg-base: #e8eef6;
  --sys-bg-raised: #dbe4f0;
  --sys-bg-high: #cbd5e1;
  --sys-bg-overlay: rgba(255, 255, 255, 0.92);
  --sys-surface: rgba(255, 255, 255, 0.78);
  --sys-border: rgba(15, 23, 42, 0.16);
  --sys-border-strong: rgba(79, 70, 229, 0.34);
  --sys-surface-hover: rgba(15, 23, 42, 0.06);
  --sys-surface-shell: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.84));
  --sys-surface-plate: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(241, 245, 249, 0.95));
  --sys-surface-control: rgba(241, 245, 249, 0.92);
  --sys-elevation-2:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.95),
    0 14px 36px rgba(15, 23, 42, 0.12);
  --sys-elevation-1:
    inset 0 1px 0 0 rgba(255, 255, 255, 0.9),
    0 4px 12px rgba(15, 23, 42, 0.08);
  --sys-accent: #4f46e5;
  --sys-accent-strong: #4338ca;
  --sys-accent-alt: #0284c7;
  --sys-accent-gradient: linear-gradient(135deg, #4f46e5, #3b82f6);
  --sys-accent-gradient-hover: linear-gradient(135deg, #4338ca, #2563eb);
  --sys-on-surface: #0f172a;
  --sys-on-surface-variant: #1e293b;
  --sys-on-surface-muted: #475569;
  --comp-bubble-own-bg: linear-gradient(135deg, rgba(224, 231, 255, 0.95), rgba(219, 234, 254, 0.92));
  --comp-bubble-own-border: rgba(79, 70, 229, 0.42);
  --comp-bubble-other-bg: rgba(255, 255, 255, 0.92);
  --comp-bubble-other-border: rgba(15, 23, 42, 0.16);
  --sys-refraction: blur(16px) saturate(140%);
  --sys-refraction-subtle: blur(12px) saturate(130%);
}
html[data-theme="light"] .message-text { color: var(--ref-light-message-text-color); font-weight: 450; }
html[data-theme="light"] .message-reply-reference {
  border-color: var(--ref-light-message-reply-reference-border);
  border-left-color: var(--ref-light-message-reply-reference-border-left);
  color: var(--ref-light-message-reply-reference-color);
}
html[data-theme="light"] .message-mention { border-color: var(--ref-light-message-mention-border); }
html[data-theme="light"] .poll-option { border-color: var(--ref-light-poll-option-border); }
}