/* Drops — color system.
   Six themes: 3 dark (Nocturne default, Deep Teal, Ember), 3 light (Porcelain, Sea Glass, Warm Paper).
   Apply a theme by setting [data-theme="…"] on any container; :root defaults to Nocturne dark. */

:root {
  /* Nocturne (default, dark) */
  --bg: #161826;
  --surface: #232532;
  --text: #e9e9ed;
  --text-2: #cfd3e5;
  --muted: #9397ab;
  --soft: #75798c;
  --faint: #595d6c;
  --accent: #9184d9;
  --accent-hi: #d2cefd;

  /* Semantic aliases */
  --surface-card: var(--surface);
  --text-body: var(--text-2);
  --text-heading: var(--text);
  --text-caption: var(--soft);
  --text-footnote: var(--faint);
  --border-hairline: color-mix(in srgb, var(--text) 16%, transparent);
  --border-hairline-soft: color-mix(in srgb, var(--text) 12%, transparent);
  --accent-wash: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-wash-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --selection: rgba(145, 132, 217, 0.35);

  color-scheme: dark;
}

[data-theme="deep-teal"] {
  color-scheme: dark;
  --bg: #0f1d1c; --surface: #1b2b29; --text: #e6edec; --text-2: #c8d6d3;
  --muted: #8fa5a2; --soft: #6f8582; --faint: #566a67;
  --accent: #54c2ad; --accent-hi: #b9ebdf;
}

[data-theme="ember"] {
  color-scheme: dark;
  --bg: #1f1613; --surface: #2c211c; --text: #efe9e5; --text-2: #ddd1c9;
  --muted: #a8988e; --soft: #87776d; --faint: #6b5d54;
  --accent: #dd8c58; --accent-hi: #f6d4bb;
}

[data-theme="porcelain"] {
  color-scheme: light;
  --bg: #f4f4f8; --surface: #e8e8f0; --text: #20212f; --text-2: #3c3e52;
  --muted: #5c5e76; --soft: #83859e; --faint: #9d9fb4;
  --accent: #6c5cc9; --accent-hi: #4a3fa3;
}

[data-theme="sea-glass"] {
  color-scheme: light;
  --bg: #f1f6f5; --surface: #e2edea; --text: #182220; --text-2: #31423f;
  --muted: #526663; --soft: #7a8f8b; --faint: #94a7a3;
  --accent: #1e8a75; --accent-hi: #0f6353;
}

[data-theme="warm-paper"] {
  color-scheme: light;
  --bg: #f7f3ee; --surface: #efe6dc; --text: #251d17; --text-2: #443930;
  --muted: #65584d; --soft: #8b7d70; --faint: #a3968a;
  --accent: #b96a2e; --accent-hi: #8a4c1e;
}

::selection { background: var(--selection); }