/* ═══════════════════════════════════════════════════════════════════
   MoneyIntX — Unified Theme System v3
   4 themes, 1 system. Matte · Flat · Calm · Premium.
   No shine, no glow, no glass. Flat surfaces with subtle layer separation.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Shared Semantic Colors (all themes) ──────────────────────────
   These stay consistent across every theme.                         */

/* ── Classic Dark — DEFAULT ──────────────────────────────────────
   Charcoal editorial dark. Softest dark theme.
   Not blue-black. Not true black. Slightly warmer, more neutral.    */
:root, [data-theme="classic"] {
  --accent: #6366F1;
  --accent-hover: #4F46E5;
  --accent-light: rgba(99,102,241,0.12);

  /* Backgrounds — charcoal, not blue */
  --bg:       #0A0B0E;
  --bg2:      #111318;
  --bg3:      #161920;
  --bg-soft:  #111318;
  --panel:    #111318;
  --panel-2:  #161920;

  /* Text — 4-level hierarchy (muted-2 raised for label readability) */
  --text:     #E7EBF2;
  --text-2:   #B4BDCB;
  --muted:    #8791A2;
  --muted-2:  #7A8394;

  /* Borders — soft, not visible lines */
  --border:   rgba(255,255,255,.05);
  --line:     rgba(255,255,255,.05);
  --line-2:   rgba(255,255,255,.08);

  /* Contact name/avatar */
  --contact:  #D88978;

  /* Semantic: Owed to Me — calm green */
  --green:      #5FD39A;
  --green-bg:   rgba(95,211,154,.12);
  --success:    #5FD39A;
  --success-bg: rgba(95,211,154,.12);

  /* Semantic: I Owe — indigo-violet (not red) */
  --red:        #EF4444;
  --red-bg:     rgba(239,68,68,.10);
  --owe-color:  #8D8CFF;
  --owe-bg:     rgba(141,140,255,.12);

  /* Semantic: Advance / Pending — muted gold */
  --amber:      #D5BA78;
  --gold:       #D5BA78;
  --partial:    #D5BA78;
  --gold-bg:    rgba(213,186,120,.12);
  --partial-bg: rgba(213,186,120,.12);

  /* Semantic: Posted / Neutral — slate blue-grey */
  --blue:       #7B92B0;
  --posted:     #7B92B0;
  --blue-bg:    rgba(123,146,176,.10);
  --posted-bg:  rgba(123,146,176,.10);

  /* User name palette */
  --user-coral:  #D88978;
  --user-purple: #A98AE0;
  --user-teal:   #63C5B7;
  --user-blue:   #71A8DB;
  --user-gold:   #D5BA78;
  --user-rose:   #D98DA0;

  --card-border: 1px solid rgba(255,255,255,.05);

  --radius: 14px;
  --shadow:    none;
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10);
}

/* ── Deep Black — Minimal, serious, almost monochrome ────────────
   Most minimal dark theme. Clean black with layer separation.
   No glow. No blue. Just clean.                                    */
[data-theme="dark"] {
  --accent: #6366F1;
  --accent-hover: #4F46E5;
  --accent-light: rgba(99,102,241,0.12);

  --bg:      #030303;
  --bg2:     #090A0D;
  --bg3:     #101216;
  --bg-soft: #090A0D;
  --panel:   #090A0D;
  --panel-2: #101216;

  --text:    #F1F4F8;
  --text-2:  #C7CED9;
  --muted:   #8C95A5;
  --muted-2: #788296;

  --border:  rgba(255,255,255,.04);
  --line:    rgba(255,255,255,.04);
  --line-2:  rgba(255,255,255,.07);

  --contact:    #D88978;
  --green:      #5FD39A;
  --green-bg:   rgba(95,211,154,.12);
  --success:    #5FD39A;
  --success-bg: rgba(95,211,154,.12);
  --red:        #EF4444;
  --red-bg:     rgba(239,68,68,.10);
  --owe-color:  #8D8CFF;
  --owe-bg:     rgba(141,140,255,.12);
  --amber:      #D5BA78;
  --gold:       #D5BA78;
  --partial:    #D5BA78;
  --gold-bg:    rgba(213,186,120,.12);
  --partial-bg: rgba(213,186,120,.12);
  --blue:       #7B92B0;
  --posted:     #7B92B0;
  --blue-bg:    rgba(123,146,176,.10);
  --posted-bg:  rgba(123,146,176,.10);

  --user-coral:  #D88978;
  --user-purple: #A98AE0;
  --user-teal:   #63C5B7;
  --user-blue:   #71A8DB;
  --user-gold:   #D5BA78;
  --user-rose:   #D98DA0;

  --card-border: 1px solid rgba(255,255,255,.04);

  --sidebar-bg:     #030303;
  --sidebar-active: #090A0D;
  --radius: 14px;
  --shadow:    none;
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10);
}

/* ── MoneyIntX Navy — THE branded reference ──────────────────────
   Deep navy background. Core blue shade preserved.
   Matte: no glow, no shiny gradients, reduced border brightness.   */
[data-theme="navy"] {
  --accent: #3B82F6;
  --accent-hover: #2563EB;
  --accent-light: rgba(59,130,246,0.12);

  --bg:      #020617;
  --bg2:     #06122b;   /* THE MoneyIntx blue — preserved */
  --bg3:     #0A1733;
  --bg-soft: #06122b;
  --panel:   #06122b;
  --panel-2: #0A1733;

  --text:    #E6EDF7;
  --text-2:  #A4B3CC;
  --muted:   #72819B;
  --muted-2: #6E7D94;

  --border:  rgba(255,255,255,.05);
  --line:    rgba(255,255,255,.05);
  --line-2:  rgba(255,255,255,.08);

  --contact:    #D88978;
  --green:      #5FD39A;
  --green-bg:   rgba(95,211,154,.12);
  --success:    #5FD39A;
  --success-bg: rgba(95,211,154,.12);
  --red:        #EF4444;
  --red-bg:     rgba(239,68,68,.10);
  --owe-color:  #8D8CFF;
  --owe-bg:     rgba(141,140,255,.12);
  --amber:      #D5BA78;
  --gold:       #D5BA78;
  --partial:    #D5BA78;
  --gold-bg:    rgba(213,186,120,.12);
  --partial-bg: rgba(213,186,120,.12);
  --blue:       #7B92B0;
  --posted:     #7B92B0;
  --blue-bg:    rgba(123,146,176,.10);
  --posted-bg:  rgba(123,146,176,.10);

  --user-coral:  #D88978;
  --user-purple: #A98AE0;
  --user-teal:   #63C5B7;
  --user-blue:   #71A8DB;
  --user-gold:   #D5BA78;
  --user-rose:   #D98DA0;

  --card-border: 1px solid rgba(255,255,255,.05);

  --sidebar-bg:     #020617;
  --sidebar-active: #06122b;
  --radius: 14px;
  --shadow:    none;
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10);
}

/* ── Light — Soft, clear, modern ─────────────────────────────────
   One reference light theme. Lightly tinted off-white, not sterile.
   Soft grey-blue borders, no harsh colors.                          */
[data-theme="light"] {
  --accent: #6366F1;
  --accent-hover: #4F46E5;
  --accent-light: rgba(99,102,241,0.08);

  --bg:      #F5F7FB;
  --bg2:     #FFFFFF;
  --bg3:     #EEF3FA;
  --bg-soft: #EEF3FA;
  --panel:   #FFFFFF;
  --panel-2: #EEF3FA;

  --text:    #182033;
  --text-2:  #3A4760;
  --muted:   #566378;
  --muted-2: #6E7D94;

  --border:  rgba(24,32,51,.18);
  --line:    rgba(24,32,51,.16);
  --line-2:  rgba(24,32,51,.22);

  --contact:    #6366F1;

  /* Semantic — slightly saturated for light bg */
  --green:      #16a34a;
  --green-bg:   rgba(22,163,74,.08);
  --success:    #16a34a;
  --success-bg: rgba(22,163,74,.08);
  --red:        #dc2626;
  --red-bg:     rgba(220,38,38,.08);
  --owe-color:  #6366F1;
  --owe-bg:     rgba(99,102,241,.08);
  --amber:      #d97706;
  --gold:       #d97706;
  --partial:    #d97706;
  --gold-bg:    rgba(217,119,6,.08);
  --partial-bg: rgba(217,119,6,.08);
  --blue:       #3b82f6;
  --posted:     #3b82f6;
  --blue-bg:    rgba(59,130,246,.08);
  --posted-bg:  rgba(59,130,246,.08);

  --user-coral:  #C47060;
  --user-purple: #7C5EC4;
  --user-teal:   #0d9488;
  --user-blue:   #3B82F6;
  --user-gold:   #b45309;
  --user-rose:   #be123c;

  --card-border: 1px solid rgba(24,32,51,.18);

  --radius: 14px;
  --shadow:    none;
  --shadow-lg: 0 8px 24px rgba(0,0,0,.06);
}

/* ── Light Sage — Warm olive-green, earthy ────────────────────────
   Nature-inspired light theme. Sage and olive tones.                   */
[data-theme="light-sage"] {
  --accent: #5B8C5A;
  --accent-hover: #4A7A49;
  --accent-light: rgba(91,140,90,0.08);

  --bg:      #F4F7F2;
  --bg2:     #FFFFFF;
  --bg3:     #EAF0E6;
  --bg-soft: #EAF0E6;
  --panel:   #FFFFFF;
  --panel-2: #EAF0E6;

  --text:    #1E2B1A;
  --text-2:  #384D30;
  --muted:   #546B4A;
  --muted-2: #6E8462;

  --border:  rgba(30,43,26,.18);
  --line:    rgba(30,43,26,.16);
  --line-2:  rgba(30,43,26,.22);

  --contact:    #5B8C5A;
  --green:      #2D8A4E;
  --green-bg:   rgba(45,138,78,.08);
  --success:    #2D8A4E;
  --success-bg: rgba(45,138,78,.08);
  --red:        #C23B22;
  --red-bg:     rgba(194,59,34,.08);
  --owe-color:  #7B6BA6;
  --owe-bg:     rgba(123,107,166,.08);
  --amber:      #A67C37;
  --gold:       #A67C37;
  --partial:    #A67C37;
  --gold-bg:    rgba(166,124,55,.08);
  --partial-bg: rgba(166,124,55,.08);
  --blue:       #4A7BA5;
  --posted:     #4A7BA5;
  --blue-bg:    rgba(74,123,165,.08);
  --posted-bg:  rgba(74,123,165,.08);

  --user-coral:  #B06650;
  --user-purple: #7B6BA6;
  --user-teal:   #3D8B80;
  --user-blue:   #4A7BA5;
  --user-gold:   #A67C37;
  --user-rose:   #A65068;

  --card-border: 1px solid rgba(30,43,26,.18);
  --radius: 14px;
  --shadow:    none;
  --shadow-lg: 0 8px 24px rgba(0,0,0,.06);
}

/* ── Light Rose — Warm blush, soft pink undertones ───────────────
   Elegant feminine light theme. Blush pinks and warm greys.           */
[data-theme="light-rose"] {
  --accent: #C06078;
  --accent-hover: #A84E66;
  --accent-light: rgba(192,96,120,0.08);

  --bg:      #FBF5F6;
  --bg2:     #FFFFFF;
  --bg3:     #F5EAED;
  --bg-soft: #F5EAED;
  --panel:   #FFFFFF;
  --panel-2: #F5EAED;

  --text:    #2D1A22;
  --text-2:  #53343F;
  --muted:   #7A5B6A;
  --muted-2: #8E6E7E;

  --border:  rgba(45,26,34,.18);
  --line:    rgba(45,26,34,.16);
  --line-2:  rgba(45,26,34,.22);

  --contact:    #C06078;
  --green:      #3A8A5C;
  --green-bg:   rgba(58,138,92,.08);
  --success:    #3A8A5C;
  --success-bg: rgba(58,138,92,.08);
  --red:        #C43B3B;
  --red-bg:     rgba(196,59,59,.08);
  --owe-color:  #8B6BAA;
  --owe-bg:     rgba(139,107,170,.08);
  --amber:      #B88A3A;
  --gold:       #B88A3A;
  --partial:    #B88A3A;
  --gold-bg:    rgba(184,138,58,.08);
  --partial-bg: rgba(184,138,58,.08);
  --blue:       #5580A8;
  --posted:     #5580A8;
  --blue-bg:    rgba(85,128,168,.08);
  --posted-bg:  rgba(85,128,168,.08);

  --user-coral:  #C47060;
  --user-purple: #8B6BAA;
  --user-teal:   #3D8B80;
  --user-blue:   #5580A8;
  --user-gold:   #B88A3A;
  --user-rose:   #C06078;

  --card-border: 1px solid rgba(45,26,34,.18);
  --radius: 14px;
  --shadow:    none;
  --shadow-lg: 0 8px 24px rgba(0,0,0,.06);
}

/* ── Light Ocean — Cool blue tones, coastal calm ─────────────────
   Breezy ocean-inspired light theme. Cool blues and teals.             */
[data-theme="light-ocean"] {
  --accent: #2E7D9B;
  --accent-hover: #236A85;
  --accent-light: rgba(46,125,155,0.08);

  --bg:      #F2F8FB;
  --bg2:     #FFFFFF;
  --bg3:     #E4F0F6;
  --bg-soft: #E4F0F6;
  --panel:   #FFFFFF;
  --panel-2: #E4F0F6;

  --text:    #122A34;
  --text-2:  #2E4E5C;
  --muted:   #4A6E80;
  --muted-2: #5F8494;

  --border:  rgba(18,42,52,.18);
  --line:    rgba(18,42,52,.16);
  --line-2:  rgba(18,42,52,.22);

  --contact:    #2E7D9B;
  --green:      #1E8A5E;
  --green-bg:   rgba(30,138,94,.08);
  --success:    #1E8A5E;
  --success-bg: rgba(30,138,94,.08);
  --red:        #C0392B;
  --red-bg:     rgba(192,57,43,.08);
  --owe-color:  #6E5BAE;
  --owe-bg:     rgba(110,91,174,.08);
  --amber:      #C4881D;
  --gold:       #C4881D;
  --partial:    #C4881D;
  --gold-bg:    rgba(196,136,29,.08);
  --partial-bg: rgba(196,136,29,.08);
  --blue:       #2E7D9B;
  --posted:     #2E7D9B;
  --blue-bg:    rgba(46,125,155,.08);
  --posted-bg:  rgba(46,125,155,.08);

  --user-coral:  #C2705E;
  --user-purple: #6E5BAE;
  --user-teal:   #26897A;
  --user-blue:   #2E7D9B;
  --user-gold:   #C4881D;
  --user-rose:   #B0566A;

  --card-border: 1px solid rgba(18,42,52,.18);
  --radius: 14px;
  --shadow:    none;
  --shadow-lg: 0 8px 24px rgba(0,0,0,.06);
}

/* ── Light Sand — Warm neutral beige, desert warmth ──────────────
   Sandy, warm-toned light theme. Terracotta and warm greys.           */
[data-theme="light-sand"] {
  --accent: #B07845;
  --accent-hover: #9A6638;
  --accent-light: rgba(176,120,69,0.08);

  --bg:      #FAF7F3;
  --bg2:     #FFFFFF;
  --bg3:     #F2ECE4;
  --bg-soft: #F2ECE4;
  --panel:   #FFFFFF;
  --panel-2: #F2ECE4;

  --text:    #2C2218;
  --text-2:  #4A3D2F;
  --muted:   #6B5D4C;
  --muted-2: #806E5C;

  --border:  rgba(44,34,24,.18);
  --line:    rgba(44,34,24,.16);
  --line-2:  rgba(44,34,24,.22);

  --contact:    #B07845;
  --green:      #3B874E;
  --green-bg:   rgba(59,135,78,.08);
  --success:    #3B874E;
  --success-bg: rgba(59,135,78,.08);
  --red:        #BF3A30;
  --red-bg:     rgba(191,58,48,.08);
  --owe-color:  #7A68A8;
  --owe-bg:     rgba(122,104,168,.08);
  --amber:      #B07845;
  --gold:       #B07845;
  --partial:    #B07845;
  --gold-bg:    rgba(176,120,69,.08);
  --partial-bg: rgba(176,120,69,.08);
  --blue:       #4E7FA0;
  --posted:     #4E7FA0;
  --blue-bg:    rgba(78,127,160,.08);
  --posted-bg:  rgba(78,127,160,.08);

  --user-coral:  #C06848;
  --user-purple: #7A68A8;
  --user-teal:   #3A8878;
  --user-blue:   #4E7FA0;
  --user-gold:   #B07845;
  --user-rose:   #A8526A;

  --card-border: 1px solid rgba(44,34,24,.18);
  --radius: 14px;
  --shadow:    none;
  --shadow-lg: 0 8px 24px rgba(0,0,0,.06);
}

/* ── Light Lavender — Cool purple tones, dreamy ──────────────────
   Soft lavender-inspired light theme. Violet and cool greys.           */
[data-theme="light-lavender"] {
  --accent: #7C5CBA;
  --accent-hover: #6849A4;
  --accent-light: rgba(124,92,186,0.08);

  --bg:      #F7F5FB;
  --bg2:     #FFFFFF;
  --bg3:     #EDEBF5;
  --bg-soft: #EDEBF5;
  --panel:   #FFFFFF;
  --panel-2: #EDEBF5;

  --text:    #1E1830;
  --text-2:  #3A3258;
  --muted:   #5C5278;
  --muted-2: #706690;

  --border:  rgba(30,24,48,.18);
  --line:    rgba(30,24,48,.16);
  --line-2:  rgba(30,24,48,.22);

  --contact:    #7C5CBA;
  --green:      #2E8A52;
  --green-bg:   rgba(46,138,82,.08);
  --success:    #2E8A52;
  --success-bg: rgba(46,138,82,.08);
  --red:        #C43B46;
  --red-bg:     rgba(196,59,70,.08);
  --owe-color:  #7C5CBA;
  --owe-bg:     rgba(124,92,186,.08);
  --amber:      #B5892E;
  --gold:       #B5892E;
  --partial:    #B5892E;
  --gold-bg:    rgba(181,137,46,.08);
  --partial-bg: rgba(181,137,46,.08);
  --blue:       #4C78B0;
  --posted:     #4C78B0;
  --blue-bg:    rgba(76,120,176,.08);
  --posted-bg:  rgba(76,120,176,.08);

  --user-coral:  #C06E5C;
  --user-purple: #7C5CBA;
  --user-teal:   #35887C;
  --user-blue:   #4C78B0;
  --user-gold:   #B5892E;
  --user-rose:   #AD5272;

  --card-border: 1px solid rgba(30,24,48,.18);
  --radius: 14px;
  --shadow:    none;
  --shadow-lg: 0 8px 24px rgba(0,0,0,.06);
}

/* ── Light theme form input overrides (all light variants) ───────── */
[data-theme="light"] .form-input,
[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light"] textarea,
[data-theme="light"] select,
[data-theme="light-sage"] .form-input,
[data-theme="light-sage"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light-sage"] textarea,
[data-theme="light-sage"] select,
[data-theme="light-rose"] .form-input,
[data-theme="light-rose"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light-rose"] textarea,
[data-theme="light-rose"] select,
[data-theme="light-ocean"] .form-input,
[data-theme="light-ocean"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light-ocean"] textarea,
[data-theme="light-ocean"] select,
[data-theme="light-sand"] .form-input,
[data-theme="light-sand"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light-sand"] textarea,
[data-theme="light-sand"] select,
[data-theme="light-lavender"] .form-input,
[data-theme="light-lavender"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light-lavender"] textarea,
[data-theme="light-lavender"] select {
  background: #FFFFFF !important;
  color: var(--text, #182033) !important;
  border-color: var(--border, rgba(24,32,51,.18)) !important;
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus,
[data-theme="light-sage"] .form-input:focus,
[data-theme="light-sage"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light-sage"] textarea:focus,
[data-theme="light-sage"] select:focus,
[data-theme="light-rose"] .form-input:focus,
[data-theme="light-rose"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light-rose"] textarea:focus,
[data-theme="light-rose"] select:focus,
[data-theme="light-ocean"] .form-input:focus,
[data-theme="light-ocean"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light-ocean"] textarea:focus,
[data-theme="light-ocean"] select:focus,
[data-theme="light-sand"] .form-input:focus,
[data-theme="light-sand"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light-sand"] textarea:focus,
[data-theme="light-sand"] select:focus,
[data-theme="light-lavender"] .form-input:focus,
[data-theme="light-lavender"] input:focus:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
[data-theme="light-lavender"] textarea:focus,
[data-theme="light-lavender"] select:focus {
  border-color: var(--accent, rgba(99,102,241,.35)) !important;
  box-shadow: 0 0 0 2px var(--accent-light, rgba(99,102,241,.10)) !important;
}