/* Theme Oceano (ocean): tokens only. Material: frosted. */
@layer themes {
/* Component tokens: the theme values of hooks that base rules read. */
html[data-theme="ocean"],
html[data-theme="ocean"] body {
  --comp-chat-bg-orbs-filter: hue-rotate(-40deg);
  --comp-login-bg-orbs-filter: hue-rotate(-40deg);
  --comp-chat-bg-orbs-opacity: 0.45;
  --comp-login-bg-orbs-opacity: 0.45;
}
/* ─── 3. Oceano (Azul Profundo & Ciano) ─── */
html[data-theme="ocean"] {
  --sys-bg-base: #06131f;
  --comp-panel-on-accent: var(--sys-bg-base);
  --sys-bg-raised: #0a1b2a;
  --sys-bg-high: #0f2538;
  --sys-bg-overlay: rgba(12, 31, 48, 0.82);
  --sys-border: rgba(56, 189, 248, 0.16);
  --sys-border-strong: rgba(6, 182, 212, 0.34);
  --sys-surface-shell: linear-gradient(135deg, rgba(12, 34, 52, 0.78), rgba(8, 22, 36, 0.72));
  --sys-surface-plate: linear-gradient(145deg, rgba(14, 38, 58, 0.92), rgba(9, 24, 38, 0.88));
  --sys-surface-control: rgba(16, 43, 66, 0.65);
  --sys-accent: #06b6d4;
  --sys-accent-strong: #0284c7;
  --sys-accent-alt: #38bdf8;
  --sys-accent-gradient: linear-gradient(135deg, #0284c7, #06b6d4);
  --sys-accent-gradient-hover: linear-gradient(135deg, #0369a1, #0891b2);
  --sys-on-surface: #f0f9ff;
  --sys-on-surface-variant: #93c5fd;
  --sys-on-surface-muted: #60a5fa;
  --comp-bubble-own-bg: linear-gradient(135deg, rgba(2, 132, 199, 0.28), rgba(6, 182, 212, 0.18));
  --comp-bubble-own-border: rgba(56, 189, 248, 0.38);
  --comp-bubble-other-bg: linear-gradient(135deg, rgba(14, 38, 58, 0.72), rgba(10, 27, 42, 0.62));
  --comp-bubble-other-border: rgba(56, 189, 248, 0.16);
}
}