/* ==========================================================================
   Dark Theme & Color Modes
   ========================================================================== */

[data-theme="dark"] {
  --bg-body: #090d16;
  --bg-surface: #111827;
  --bg-elevated: #1f293d;
  --bg-subtle: #1e293b;
  --bg-subtle-hover: #334155;
  --bg-glass: rgba(17, 24, 39, 0.85);

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  --border-color: #243048;
  --border-subtle: #1e293b;
  --border-focus: #60a5fa;

  /* Primary Brand */
  --primary: #3b82f6;
  --primary-hover: #60a5fa;
  --primary-light: rgba(59, 130, 246, 0.15);
  --primary-border: rgba(59, 130, 246, 0.3);
  --primary-text: #93c5fd;

  /* Morpheme Accent Colors - Dark Mode */
  --color-root: #14b8a6;
  --color-root-hover: #2dd4bf;
  --color-root-bg: rgba(20, 184, 166, 0.12);
  --color-root-border: rgba(20, 184, 166, 0.3);
  --color-root-text: #5eead4;
  --color-root-glow: rgba(20, 184, 166, 0.25);

  --color-prefix: #f59e0b;
  --color-prefix-hover: #fbbf24;
  --color-prefix-bg: rgba(245, 158, 11, 0.12);
  --color-prefix-border: rgba(245, 158, 11, 0.3);
  --color-prefix-text: #fcd34d;
  --color-prefix-glow: rgba(245, 158, 11, 0.25);

  --color-suffix: #8b5cf6;
  --color-suffix-hover: #a78bfa;
  --color-suffix-bg: rgba(139, 92, 246, 0.12);
  --color-suffix-border: rgba(139, 92, 246, 0.3);
  --color-suffix-text: #c4b5fd;
  --color-suffix-glow: rgba(139, 92, 246, 0.25);

  --color-base: #60a5fa;
  --color-base-bg: rgba(96, 165, 250, 0.12);
  --color-base-border: rgba(96, 165, 250, 0.3);
  --color-base-text: #93c5fd;

  /* Shadows for Dark Mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------------------
   Morandi light palettes — muted, dusty, low-chroma
   -------------------------------------------------------------------------- */

[data-theme="morandi-fog"] {
  --bg-body: #f3f5f7;
  --bg-surface: #fafbfc;
  --bg-elevated: #ffffff;
  --bg-subtle: #e8edf1;
  --bg-subtle-hover: #dce3e9;
  --bg-glass: rgba(250, 251, 252, 0.88);

  --text-primary: #3d4650;
  --text-secondary: #5c6772;
  --text-muted: #8b959e;
  --text-inverse: #fafbfc;

  --border-color: #d5dde4;
  --border-subtle: #e8edf1;
  --border-focus: #6e8799;

  --primary: #6e8799;
  --primary-hover: #5a7386;
  --primary-light: #eef2f5;
  --primary-border: #c5d1da;
  --primary-text: #4e6576;

  --color-root: #7d9a8e;
  --color-root-hover: #6b877c;
  --color-root-bg: #eef4f1;
  --color-root-border: #c5d6ce;
  --color-root-text: #5d766b;
  --color-root-glow: rgba(125, 154, 142, 0.18);

  --color-prefix: #c2a07a;
  --color-prefix-hover: #ad8c68;
  --color-prefix-bg: #f6f0e8;
  --color-prefix-border: #e4d3bb;
  --color-prefix-text: #8e704d;
  --color-prefix-glow: rgba(194, 160, 122, 0.18);

  --color-suffix: #9b8aa8;
  --color-suffix-hover: #877595;
  --color-suffix-bg: #f3f0f5;
  --color-suffix-border: #d5ccd9;
  --color-suffix-text: #6f627a;
  --color-suffix-glow: rgba(155, 138, 168, 0.18);

  --color-base: #7a93a8;
  --color-base-bg: #eef2f5;
  --color-base-border: #c5d1da;
  --color-base-text: #4e6576;
}

[data-theme="morandi-rose"] {
  --bg-body: #f6f1ee;
  --bg-surface: #fbf8f6;
  --bg-elevated: #fffdfb;
  --bg-subtle: #efe6e1;
  --bg-subtle-hover: #e5d8d1;
  --bg-glass: rgba(251, 248, 246, 0.88);

  --text-primary: #4a3f3c;
  --text-secondary: #6d5f5a;
  --text-muted: #a0908a;
  --text-inverse: #fbf8f6;

  --border-color: #e2d6d0;
  --border-subtle: #efe6e1;
  --border-focus: #b08986;

  --primary: #b08986;
  --primary-hover: #99726f;
  --primary-light: #f6eeed;
  --primary-border: #e0cbc8;
  --primary-text: #7d5c59;

  --color-root: #8a9b8c;
  --color-root-hover: #748575;
  --color-root-bg: #eef2ee;
  --color-root-border: #cdd6ce;
  --color-root-text: #5f7062;
  --color-root-glow: rgba(138, 155, 140, 0.18);

  --color-prefix: #c4a484;
  --color-prefix-hover: #ae8e6e;
  --color-prefix-bg: #f6efe6;
  --color-prefix-border: #e6d4be;
  --color-prefix-text: #8d6e4e;
  --color-prefix-glow: rgba(196, 164, 132, 0.18);

  --color-suffix: #b08986;
  --color-suffix-hover: #99726f;
  --color-suffix-bg: #f6eeed;
  --color-suffix-border: #e0cbc8;
  --color-suffix-text: #7d5c59;
  --color-suffix-glow: rgba(176, 137, 134, 0.18);

  --color-base: #8fa0ad;
  --color-base-bg: #eef2f4;
  --color-base-border: #cdd6dc;
  --color-base-text: #5e717e;
}

[data-theme="morandi-sage"] {
  --bg-body: #f2f4ef;
  --bg-surface: #f8f9f5;
  --bg-elevated: #fcfdfb;
  --bg-subtle: #e6ebe1;
  --bg-subtle-hover: #d8e0d0;
  --bg-glass: rgba(248, 249, 245, 0.88);

  --text-primary: #3e463c;
  --text-secondary: #5c6559;
  --text-muted: #8d9588;
  --text-inverse: #f8f9f5;

  --border-color: #d5ddd0;
  --border-subtle: #e6ebe1;
  --border-focus: #7f9278;

  --primary: #7f9278;
  --primary-hover: #6a7c64;
  --primary-light: #eef2eb;
  --primary-border: #c5d0bf;
  --primary-text: #54634e;

  --color-root: #6f8b7a;
  --color-root-hover: #5b7566;
  --color-root-bg: #eaf1ed;
  --color-root-border: #c3d4ca;
  --color-root-text: #4d6558;
  --color-root-glow: rgba(111, 139, 122, 0.18);

  --color-prefix: #c4a07a;
  --color-prefix-hover: #ad8b66;
  --color-prefix-bg: #f6efe6;
  --color-prefix-border: #e4d2bb;
  --color-prefix-text: #8d6e4c;
  --color-prefix-glow: rgba(196, 160, 122, 0.18);

  --color-suffix: #8e8aa3;
  --color-suffix-hover: #787492;
  --color-suffix-bg: #f1f0f5;
  --color-suffix-border: #d2cfdc;
  --color-suffix-text: #65627a;
  --color-suffix-glow: rgba(142, 138, 163, 0.18);

  --color-base: #7d92a0;
  --color-base-bg: #eef2f4;
  --color-base-border: #c8d3da;
  --color-base-text: #546774;
}

[data-theme="morandi-sand"] {
  --bg-body: #f5f1e8;
  --bg-surface: #faf7f0;
  --bg-elevated: #fffdf8;
  --bg-subtle: #eee6d8;
  --bg-subtle-hover: #e4d9c6;
  --bg-glass: rgba(250, 247, 240, 0.88);

  --text-primary: #4a4338;
  --text-secondary: #6b6356;
  --text-muted: #9a9184;
  --text-inverse: #faf7f0;

  --border-color: #e2d8c6;
  --border-subtle: #eee6d8;
  --border-focus: #b59a6d;

  --primary: #b59a6d;
  --primary-hover: #9d8459;
  --primary-light: #f5efe3;
  --primary-border: #e0d1b3;
  --primary-text: #7d6844;

  --color-root: #7a9b8e;
  --color-root-hover: #658578;
  --color-root-bg: #eaf2ee;
  --color-root-border: #c5d6ce;
  --color-root-text: #547266;
  --color-root-glow: rgba(122, 155, 142, 0.18);

  --color-prefix: #c08b74;
  --color-prefix-hover: #a97661;
  --color-prefix-bg: #f6ebe6;
  --color-prefix-border: #e4cbbf;
  --color-prefix-text: #8c5e4b;
  --color-prefix-glow: rgba(192, 139, 116, 0.18);

  --color-suffix: #8f8aa0;
  --color-suffix-hover: #78738a;
  --color-suffix-bg: #f1f0f4;
  --color-suffix-border: #d3cfd9;
  --color-suffix-text: #656178;
  --color-suffix-glow: rgba(143, 138, 160, 0.18);

  --color-base: #7d91a3;
  --color-base-bg: #eef2f5;
  --color-base-border: #c8d3dc;
  --color-base-text: #546677;
}