/* ==========================================================================
   Minty — Personal Smart Expense, Credit Card & Bill Splitter Design System
   Light Mode: Warm Alabaster & Ink (#f6f6f3 / #ffffff / #141416)
   Dark Mode:  Neutral Carbon & Obsidian Charcoal (#121214 / #1a1a1e / #f4f4f6)
   ========================================================================== */

:root,
[data-theme="light"] {
  --bg-canvas: #f6f6f3;
  --bg-surface: #ffffff;
  --bg-surface-hover: #f2f2ee;
  --bg-elevated: #f0f0ec;
  --bg-subtle: #fafaf8;
  --bg-glass: rgba(255, 255, 255, 0.88);

  --text-primary: #141416;
  --text-secondary: #52525b;
  --text-muted: #71717a;

  --border-subtle: #e4e4e0;
  --border-strong: #d4d4ce;

  --accent-primary: #0d9488;
  --accent-primary-hover: #0f766e;
  --accent-primary-soft: rgba(13, 148, 136, 0.10);

  --status-success: #15803d;
  --status-success-bg: rgba(21, 128, 61, 0.10);
  --status-warning: #b45309;
  --status-warning-bg: rgba(180, 83, 9, 0.11);
  --status-danger: #b91c1c;
  --status-danger-bg: rgba(185, 28, 28, 0.10);
  --status-info: #0369a1;
  --status-info-bg: rgba(3, 105, 161, 0.10);

  --shadow-card: 0 1px 3px rgba(20, 20, 22, 0.05), 0 1px 2px rgba(20, 20, 22, 0.03);
  --shadow-modal: 0 20px 40px rgba(20, 20, 22, 0.16);
}

[data-theme="dark"] {
  --bg-canvas: #121214;
  --bg-surface: #1a1a1e;
  --bg-surface-hover: #222227;
  --bg-elevated: #232329;
  --bg-subtle: #161619;
  --bg-glass: rgba(26, 26, 30, 0.90);

  --text-primary: #f4f4f6;
  --text-secondary: #a1a1aa;
  --text-muted: #8b8b94;

  --border-subtle: #2a2a30;
  --border-strong: #3a3a42;

  --accent-primary: #14b8a6;
  --accent-primary-hover: #2dd4bf;
  --accent-primary-soft: rgba(20, 184, 166, 0.14);

  --status-success: #4ade80;
  --status-success-bg: rgba(74, 222, 128, 0.13);
  --status-warning: #fbbf24;
  --status-warning-bg: rgba(251, 191, 36, 0.13);
  --status-danger: #f87171;
  --status-danger-bg: rgba(248, 113, 113, 0.13);
  --status-info: #38bdf8;
  --status-info-bg: rgba(56, 189, 248, 0.13);

  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.32);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.65);
}

[data-theme="coconut"] {
  --bg-canvas: #f5efe6;
  --bg-surface: #fbf8f3;
  --bg-surface-hover: #efe6d8;
  --bg-elevated: #ece2d2;
  --bg-subtle: #f8f3eb;
  --bg-glass: rgba(251, 248, 243, 0.90);

  --text-primary: #2c1e16;
  --text-secondary: #5c4333;
  --text-muted: #8a6f5a;

  --border-subtle: #e2d5c3;
  --border-strong: #cbb89f;

  --accent-primary: #8b5a2b;
  --accent-primary-hover: #6f451e;
  --accent-primary-soft: rgba(139, 90, 43, 0.12);

  --status-success: #2e6f40;
  --status-success-bg: rgba(46, 111, 64, 0.11);
  --status-warning: #b45309;
  --status-warning-bg: rgba(180, 83, 9, 0.12);
  --status-danger: #a82424;
  --status-danger-bg: rgba(168, 36, 36, 0.10);
  --status-info: #6b4c35;
  --status-info-bg: rgba(107, 76, 53, 0.11);

  --shadow-card: 0 2px 5px rgba(44, 30, 22, 0.06);
  --shadow-modal: 0 20px 40px rgba(44, 30, 22, 0.18);
}

[data-theme="botanical"] {
  --bg-canvas: #f1f4ec;
  --bg-surface: #fafbf7;
  --bg-surface-hover: #e7ece0;
  --bg-elevated: #e3e9da;
  --bg-subtle: #f5f7f1;
  --bg-glass: rgba(250, 251, 247, 0.90);

  --text-primary: #1f291c;
  --text-secondary: #46543f;
  --text-muted: #6e7d65;

  --border-subtle: #d6dfd0;
  --border-strong: #bcc8b4;

  --accent-primary: #4a6b3b;
  --accent-primary-hover: #3a562d;
  --accent-primary-soft: rgba(74, 107, 59, 0.12);

  --status-success: #2d6a4f;
  --status-success-bg: rgba(45, 106, 79, 0.11);
  --status-warning: #9c6615;
  --status-warning-bg: rgba(156, 102, 21, 0.12);
  --status-danger: #a42828;
  --status-danger-bg: rgba(164, 40, 40, 0.10);
  --status-info: #3b6254;
  --status-info-bg: rgba(59, 98, 84, 0.11);

  --shadow-card: 0 2px 5px rgba(31, 41, 28, 0.06);
  --shadow-modal: 0 20px 40px rgba(31, 41, 28, 0.18);
}

[data-theme="espresso"] {
  --bg-canvas: #16120e;
  --bg-surface: #211b15;
  --bg-surface-hover: #2b231c;
  --bg-elevated: #2e251d;
  --bg-subtle: #1b1611;
  --bg-glass: rgba(33, 27, 21, 0.90);

  --text-primary: #f3ebe1;
  --text-secondary: #c4b5a5;
  --text-muted: #948270;

  --border-subtle: #332920;
  --border-strong: #47392d;

  --accent-primary: #d4955a;
  --accent-primary-hover: #e0a66e;
  --accent-primary-soft: rgba(212, 149, 90, 0.15);

  --status-success: #52b788;
  --status-success-bg: rgba(82, 183, 136, 0.14);
  --status-warning: #f4a261;
  --status-warning-bg: rgba(244, 162, 97, 0.14);
  --status-danger: #e76f51;
  --status-danger-bg: rgba(231, 111, 81, 0.14);
  --status-info: #d4955a;
  --status-info-bg: rgba(212, 149, 90, 0.14);

  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.40);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.72);
}

[data-theme="pine"] {
  --bg-canvas: #111612;
  --bg-surface: #18201a;
  --bg-surface-hover: #202a23;
  --bg-elevated: #222d25;
  --bg-subtle: #141a15;
  --bg-glass: rgba(24, 32, 26, 0.90);

  --text-primary: #e9f0e8;
  --text-secondary: #adc0ab;
  --text-muted: #7c907a;

  --border-subtle: #263329;
  --border-strong: #354739;

  --accent-primary: #6ba368;
  --accent-primary-hover: #7fb57c;
  --accent-primary-soft: rgba(107, 163, 104, 0.15);

  --status-success: #52b788;
  --status-success-bg: rgba(82, 183, 136, 0.14);
  --status-warning: #e9c46a;
  --status-warning-bg: rgba(233, 196, 106, 0.14);
  --status-danger: #e76f51;
  --status-danger-bg: rgba(231, 111, 81, 0.14);
  --status-info: #6ba368;
  --status-info-bg: rgba(107, 163, 104, 0.14);

  --shadow-card: 0 2px 6px rgba(0, 0, 0, 0.40);
  --shadow-modal: 0 24px 48px rgba(0, 0, 0, 0.72);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg-canvas);
  color: var(--text-primary);
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: 5.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}