/* ═══════════════════════════════════════════════════════════════════════════
   md-flow — Dark Theme (Twilight)
   Cool blue-purple palette inspired by classic twilight/night IDE themes.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* ── Surface Hierarchy (blue-tinted grays) ───────────────────────────── */
  --surface:                   #141620;
  --surface-dim:               #0f1118;
  --surface-container-lowest:  #0c0e14;
  --surface-container-low:     #1a1d2a;
  --surface-container:         #212434;
  --surface-container-high:    #2a2d40;
  --surface-container-highest: #33374c;

  /* ── Content Colors ──────────────────────────────────────────────────── */
  --on-surface:         #e0e2f0;
  --on-surface-variant: #b4b8ce;
  --on-surface-muted:   #6e7494;
  --surface-tint:       rgba(130, 140, 220, 0.06);

  /* ── Primary (Soft Lavender) ─────────────────────────────────────────── */
  --primary:              #b8a0f0;
  --primary-muted:        #8668d8;
  --primary-container:    #352870;
  --on-primary:           #28185a;
  --on-primary-container: #ddd0ff;

  /* ── Secondary (Muted Steel Blue) ────────────────────────────────────── */
  --secondary:              #90b0d0;
  --secondary-container:    #2a4060;
  --on-secondary:           #162840;
  --on-secondary-container: #c8e0f8;

  /* ── Tertiary (Soft Cyan) ────────────────────────────────────────────── */
  --tertiary:              #70d8e8;
  --tertiary-container:    #004858;
  --on-tertiary:           #003540;
  --on-tertiary-container: #b8f0ff;

  /* ── Outline ─────────────────────────────────────────────────────────── */
  --outline:         #7880a0;
  --outline-variant: #3c4060;

  /* ── Status & Priority ───────────────────────────────────────────────── */
  --priority-high:   #f07070;
  --priority-medium: #f0c060;
  --priority-low:    #80c878;

  --status-todo:        var(--on-surface-muted);
  --status-in-progress: var(--tertiary);
  --status-done:        var(--secondary);

  /* ── Error ───────────────────────────────────────────────────────────── */
  --error:              #ffb0a8;
  --error-container:    #601818;
  --on-error-container: #ffd8d4;

  /* ── Elevation (cool-tinted shadows) ─────────────────────────────────── */
  --shadow-sm:  0px 2px 8px rgba(10, 12, 20, 0.35);
  --shadow-md:  0px 6px 20px rgba(10, 12, 20, 0.45);
  --shadow-lg:  0px 16px 40px rgba(10, 12, 20, 0.55);

  /* ── Gradient ────────────────────────────────────────────────────────── */
  --gradient-primary: linear-gradient(135deg, #b8a0f0 0%, #8668d8 100%);

  /* ── Frosted / Overlay ───────────────────────────────────────────────── */
  --frosted-bg:       rgba(20, 22, 32, 0.70);
  --overlay-bg:       rgba(10, 12, 20, 0.8);
  --overlay-bg-light: rgba(10, 12, 20, 0.5);
  --panel-glow:       0 0 24px rgba(130, 140, 220, 0.06), 0 0 60px rgba(100, 110, 200, 0.03);
  --panel-outline:    rgba(130, 140, 220, 0.08);
  --highlight-bg:     rgba(130, 140, 220, 0.20);
  --on-primary-btn:   #fff;
  --date-focus-shadow: 0 0 0 2px rgba(134, 104, 216, 0.20);

  /* ── Legacy compat ───────────────────────────────────────────────────── */
  --border:        rgba(60, 64, 96, 0.30);
  --surface-hover: var(--surface-container-low);
}