/* ============================================
   Soulmark App-aligned theme system
   Modes: Day / Night
   Accents: Cyan / Pink
   ============================================ */

:root,
[data-mode="day"] {
  --color-bg: #F2F4F7;
  --color-bg-warm: #F7F8FA;
  --color-surface: #FFFFFF;
  --rgb-bg: 242, 244, 247;
  --rgb-bg-warm: 247, 248, 250;
  --rgb-surface: 255, 255, 255;
  --rgb-nav: 250, 251, 252;
  --rgb-hover: 225, 229, 235;
  --rgb-sun: 255, 255, 255;

  --color-brown-900: #101217;
  --color-brown-800: #1A1D24;
  --color-brown-700: #30343D;
  --color-brown-600: #424752;
  --color-brown-500: #626874;
  --color-brown-300: #A7ADB7;
  --color-brown-100: #E2E5EA;
  --color-brown-50: #EEF0F4;
  --color-text: #17191F;
  --color-text-muted: #626874;
  --color-text-light: #9298A3;
  --rgb-theme: 18, 21, 27;
  --rgb-text: 23, 25, 31;
  --rgb-mid: 145, 152, 164;

  --grid-line: rgba(36, 42, 52, 0.045);
  --shadow-soft: 0 6px 24px rgba(18, 21, 27, 0.06);
  --shadow-md: 0 12px 36px rgba(18, 21, 27, 0.09);
  --shadow-lg: 0 24px 64px rgba(18, 21, 27, 0.13);
  --border-subtle: rgba(62, 69, 82, 0.13);
  --border-medium: rgba(62, 69, 82, 0.22);
  --overlay-modal: rgba(7, 9, 13, 0.46);
  --footer-bg: #111319;
}

[data-mode="night"] {
  --color-bg: #080A0E;
  --color-bg-warm: #0D0F14;
  --color-surface: #17191F;
  --rgb-bg: 8, 10, 14;
  --rgb-bg-warm: 13, 15, 20;
  --rgb-surface: 23, 25, 31;
  --rgb-nav: 12, 14, 19;
  --rgb-hover: 38, 42, 50;
  --rgb-sun: 23, 25, 31;

  --color-brown-900: #F7F8FA;
  --color-brown-800: #EEF0F4;
  --color-brown-700: #D4D7DD;
  --color-brown-600: #C0C4CC;
  --color-brown-500: #A5AAB5;
  --color-brown-300: #686E79;
  --color-brown-100: #2B2F38;
  --color-brown-50: #20232B;
  --color-text: #F4F6F8;
  --color-text-muted: #A9AEB8;
  --color-text-light: #737985;
  --rgb-theme: 241, 244, 248;
  --rgb-text: 244, 246, 248;
  --rgb-mid: 111, 118, 131;

  --grid-line: rgba(210, 220, 235, 0.045);
  --shadow-soft: 0 8px 26px rgba(0, 0, 0, 0.26);
  --shadow-md: 0 16px 42px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.46);
  --border-subtle: rgba(190, 198, 210, 0.11);
  --border-medium: rgba(190, 198, 210, 0.2);
  --overlay-modal: rgba(0, 0, 0, 0.72);
  --footer-bg: #05070A;
}

:root,
[data-accent="blue"],
[data-accent="cyan"] {
  --color-accent: #10C9C5;
  --color-accent-strong: #168CF4;
  --rgb-accent: 16, 201, 197;
  --theme-swatch: #10C9C5;
  --accent-bg: linear-gradient(135deg, #10C9C5 0%, #168CF4 100%);
  --accent-bg-hover: linear-gradient(135deg, #0EB5B2 0%, #1178D5 100%);
  --accent-banner: linear-gradient(135deg, #0D9F9C 0%, #126EC4 100%);
  --accent-tint: rgba(16, 201, 197, 0.1);
  --accent-tint-strong: rgba(16, 201, 197, 0.2);
  --accent-glow: rgba(16, 201, 197, 0.28);
}

[data-accent="pink"] {
  --color-accent: #F04491;
  --color-accent-strong: #FF3D8D;
  --rgb-accent: 240, 68, 145;
  --theme-swatch: #F04491;
  --accent-bg: linear-gradient(135deg, #F06AA7 0%, #FF3D8D 100%);
  --accent-bg-hover: linear-gradient(135deg, #D95791 0%, #E82979 100%);
  --accent-banner: linear-gradient(135deg, #C9427E 0%, #E32978 100%);
  --accent-tint: rgba(240, 68, 145, 0.1);
  --accent-tint-strong: rgba(240, 68, 145, 0.2);
  --accent-glow: rgba(240, 68, 145, 0.3);
}