/* ============================================================
   theme.css — Journal Design Tokens (single source of truth)
   ------------------------------------------------------------
   Every color used across the site is defined here as a CSS
   variable. The palette block is theme-invariant; light/dark
   switching overrides ONLY the semantic tokens in the
   [data-theme=light] / [data-theme=dark] blocks below.
   Component rules must never hardcode colors — they reference
   these tokens instead.

   Palette: Indigo (primary) + Emerald (secondary) with module
   accents: Journal indigo, Finance Tracker emerald, Market sky,
   Account Vault purple, Cycle Tracker pink.
   ============================================================ */

:root {
  /* ---------------- Primary — Navy Indigo ---------------- */
  --primary: #344095;
  --primary-hover: #2C377E;
  --primary-50: #EEF0F8;
  --primary-100: #DEE1F1;
  --primary-200: #C5CBE4;
  --primary-400: #7F8ABC;
  --primary-500: #5E6AA8;
  --primary-600: #344095;
  --primary-700: #2C377E;
  --primary-800: #272F68;
  --primary-900: #232A55;
  --primary-rgb: 52, 64, 149;
  --primary-500-rgb: 94, 106, 168;
  --primary-600-rgb: 52, 64, 149;
  --primary-700-rgb: 44, 55, 126;

  /* Backward-compatible brand aliases (navy indigo) */
  --brand-400: #7F8ABC;
  --brand-500: #5E6AA8;
  --brand-600: #344095;
  --brand-700: #2C377E;
  --brand-rgb: 94, 106, 168;
  --brand-400-rgb: 127, 138, 188;
  --brand-600-rgb: 52, 64, 149;
  --brand-700-rgb: 44, 55, 126;
  --accent: #344095;
  --accent-light: #5E6AA8;
  --accent-dark: #2C377E;
  --accent-rgb: 52, 64, 149;

  /* ---------------- Secondary — Emerald ---------------- */
  --secondary: #10B981;
  --secondary-hover: #059669;
  --secondary-50: #ECFDF5;
  --secondary-100: #D1FAE5;
  --secondary-400: #34D399;
  --secondary-500: #10B981;
  --secondary-600: #059669;
  --secondary-700: #047857;
  --secondary-rgb: 16, 185, 129;
  --secondary-500-rgb: 16, 185, 129;
  --secondary-600-rgb: 5, 150, 105;
  --success: #10B981;
  --success-rgb: 16, 185, 129;

  /* ---------------- Module colors ---------------- */
  --mod-journal: #5E6AA8;
  --mod-journal-rgb: 94, 106, 168;
  --mod-finance-tracker: #10B981;
  --mod-finance-tracker-rgb: 16, 185, 129;
  --mod-market: #0EA5E9;
  --mod-market-rgb: 14, 165, 233;
  --mod-vault: #8B5CF6;
  --mod-vault-rgb: 139, 92, 246;
  --mod-cycle: #EC4899;
  --mod-cycle-rgb: 236, 72, 153;

  /* ---------------- Tertiary / informational ---------------- */
  --tertiary: #0EA5E9;
  --tertiary-dark: #0369A1;
  --tertiary-rgb: 14, 165, 233;
  --blue-500: #3B82F6;
  --blue-600: #4E73DF;
  --blue-rgb: 59, 130, 246;
  --blue-600-rgb: 78, 115, 223;

  /* ---------------- Status palette ---------------- */
  --emerald: #10B981;
  --emerald-400: #34D399;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-100: #D1FAE5;
  --emerald-rgb: 16, 185, 129;
  --emerald-600-rgb: 5, 150, 105;
  --green-600: #16A34A;
  --green-700: #15803D;

  --teal-500: #14B8A6;
  --teal-rgb: 20, 184, 166;

  --danger: #EF4444;
  --danger-400: #F87171;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;
  --danger-200: #FECACA;
  --danger-100: #FEE2E2;
  --danger-50: #FEF2F2;
  --danger-rgb: 239, 68, 68;
  --danger-600-rgb: 220, 38, 38;

  --warning: #F59E0B;
  --warning-400: #FBBF24;
  --warning-800: #92400E;
  --warning-rgb: 245, 158, 11;
  --warning-400-rgb: 251, 191, 36;

  --orange-500: #F97316;
  --orange-rgb: 249, 115, 22;

  --pink-500: #EC4899;
  --pink-700: #BE185D;
  --pink-rgb: 236, 72, 153;

  --violet-500: #8B5CF6;
  --violet-400: #C084FC;
  --violet-rgb: 139, 92, 246;

  /* ---------------- Neutrals: slate ---------------- */
  --slate-50: #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;
  --slate-950: #020617;
  --slate-400-rgb: 148, 163, 184;
  --slate-500-rgb: 100, 116, 139;
  --slate-950-rgb: 2, 6, 23;

  /* ---------------- Neutrals: gray ---------------- */
  --gray-50: #F9FAFB;
  --gray-100: #F1F3F5;
  --gray-200: #E5E7EB;
  --gray-300: #D1D5DB;
  --gray-400: #9CA3AF;
  --gray-500: #6B7280;
  --gray-700: #374151;
  --gray-900: #333;
  --gray-200-rgb: 235, 231, 231;

  /* ---------------- Neutrals: navy / indigo tints ---------------- */
  --navy-800: #24334A;
  --navy-900: #1A1A2E;
  --navy-950: #0B1120;
  --indigo-50: #F0F2FF;
  --indigo-200: #C7D2FE;

  /* ---------------- Base ---------------- */
  --white: #FFFFFF;
  --white-rgb: 255, 255, 255;
  --black: #000000;
  --black-rgb: 0, 0, 0;

  /* ---------------- Theme variant tokens ---------------- */
  --text-dark: #0F172A;
  --text-light: #F8FAFC;
  --text-muted-dark: #64748B;
  --text-muted-light: #94A3B8;
  --bg-light: #F7F9FC;
  --bg-dark: #0B1120;
  --bg-section-light: #EEF2F8;
  --bg-section-dark: #101828;
  --card-light: #FFFFFF;
  --card-dark: #131C31;
  --card-border-light: #E2E8F0;
  --card-border-dark: #1F2A44;
  --navbar-bg-light: rgba(255, 255, 255, 0.9);
  --navbar-bg-dark: rgba(11, 17, 32, 0.85);
  --footer-bg-light: #EEF2F8;
  --footer-bg-dark: #0B1120;
  --footer-text-light: #475569;
  --footer-text-dark: #94A3B8;

  /* ---------------- Brand gradients ---------------- */
  --gradient-main: linear-gradient(135deg, #344095 0%, #2C377E 50%, #0EA5E9 100%);
  --gradient-accent: linear-gradient(135deg, #344095 0%, #5E6AA8 100%);
  --gradient-primary: linear-gradient(135deg, #344095 0%, #2C377E 100%);
  --gradient-secondary: linear-gradient(135deg, #10B981 0%, #059669 100%);
  --gradient-card: linear-gradient(145deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);

  /* ---------------- Typography ---------------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* ---------------- Radii ---------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;

  /* ---------------- Motion ---------------- */
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------------- Layout ---------------- */
  --container-max: 1280px;
  --header-height: 76px;

  /* ---------------- Dashboard layout ---------------- */
  --dash-sidebar-width: 270px;
  --dash-sidebar-collapsed: -282px;
  --dash-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --dash-radius: 12px;

  /* ---------------- Bootstrap palette alignment ---------------- */
  --bs-primary: #344095;
  --bs-primary-rgb: 52, 64, 149;
  --bs-secondary: #10B981;
  --bs-secondary-rgb: 16, 185, 129;
  --bs-success: #10B981;
  --bs-success-rgb: 16, 185, 129;
  --bs-info: #0EA5E9;
  --bs-info-rgb: 14, 165, 233;
  --bs-warning: #F59E0B;
  --bs-warning-rgb: 245, 158, 11;
  --bs-danger: #EF4444;
  --bs-danger-rgb: 239, 68, 68;
  --bs-link-color: #344095;
  --bs-link-color-rgb: 52, 64, 149;
  --bs-link-hover-color: #2C377E;
  --bs-link-hover-color-rgb: 44, 55, 126;
  --bs-nav-pills-link-active-bg: #344095;
  --bs-pagination-active-bg: #344095;
  --bs-pagination-active-border-color: #344095;
  --bs-pagination-color: #344095;
  --bs-pagination-hover-color: #2C377E;
  --bs-form-check-input-checked-bg-color: #344095;
  --bs-form-check-input-checked-border-color: #344095;
  --bs-form-check-input-focus-border: #7F8ABC;
  --bs-focus-ring-color: rgba(52, 64, 149, 0.25);
  --bs-light: #0F172A;
  --bs-light-rgb: 15, 23, 42;
  --bs-dark: #020617;
  --bs-dark-rgb: 2, 6, 23;
}

/* ==================== LIGHT THEME ==================== */
[data-theme=light] {
  --bg: var(--bg-light);
  --bg-section: var(--bg-section-light);
  --text: var(--text-dark);
  --text-muted: var(--text-muted-dark);
  --text-primary: var(--navy-900);
  --card-bg: var(--card-light);
  --card-border: var(--card-border-light);
  --border: var(--card-border-light);
  --hover-bg: var(--bg-section-light);
  --navbar-bg: var(--navbar-bg-light);
  --navbar-border: rgba(15, 23, 42, 0.06);
  --sidebar-bg: var(--white);
  --sidebar-text: var(--slate-500);
  --sidebar-text-active: var(--primary);
  --sidebar-brand: var(--slate-900);
  --footer-bg: var(--footer-bg-light);
  --footer-text: var(--footer-text-light);
  --input-bg: var(--white);
  --input-border: var(--slate-300);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-glow: 0 0 30px rgba(var(--primary-rgb), 0.28);
  --shadow-color: rgba(15, 23, 42, 0.08);
  --overlay: rgba(15, 23, 42, 0.45);
  --bs-light: #F8FAFC;
  --bs-light-rgb: 248, 250, 252;
}

/* ==================== DARK THEME ==================== */
[data-theme=dark] {
  --bg: var(--bg-dark);
  --bg-section: var(--bg-section-dark);
  --text: #E6EAF5;
  --text-muted: var(--text-muted-light);
  --text-primary: var(--slate-100);
  --card-bg: var(--card-dark);
  --card-border: var(--card-border-dark);
  --border: var(--card-border-dark);
  --hover-bg: rgba(var(--primary-500-rgb), 0.08);
  --navbar-bg: var(--navbar-bg-dark);
  --navbar-border: rgba(94, 106, 168, 0.16);
  --sidebar-bg: var(--slate-900);
  --sidebar-text: #A5B4CF;
  --sidebar-text-active: #FFFFFF;
  --sidebar-brand: var(--slate-50);
  --footer-bg: var(--footer-bg-dark);
  --footer-text: var(--footer-text-dark);
  --input-bg: var(--slate-900);
  --input-border: #26324D;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 30px rgba(var(--primary-500-rgb), 0.35);
  --shadow-color: rgba(0, 0, 0, 0.3);
  --overlay: rgba(2, 6, 23, 0.6);
}

/* ==================== BOOTSTRAP COMPONENT ALIGNMENT ==================== */
/* Realign Bootstrap button components with the brand palette. Loaded after
   bootstrap.min.css on dashboard layouts; harmless on public pages since the
   custom .btn-* styles do not consume these --bs-btn-* variables. */

.btn-primary {
  --bs-btn-bg: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-700);
  --bs-btn-hover-border-color: var(--brand-700);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-disabled-bg: var(--brand-600);
  --bs-btn-disabled-border-color: var(--brand-600);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-600);
  --bs-btn-border-color: var(--brand-600);
  --bs-btn-hover-bg: var(--brand-600);
  --bs-btn-hover-border-color: var(--brand-600);
  --bs-btn-focus-shadow-rgb: var(--primary-rgb);
  --bs-btn-active-bg: var(--brand-700);
  --bs-btn-active-border-color: var(--brand-700);
  --bs-btn-disabled-color: var(--brand-600);
  --bs-btn-disabled-border-color: var(--brand-600);
}

.btn-secondary {
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-bg: var(--emerald-600);
  --bs-btn-hover-border-color: var(--emerald-600);
  --bs-btn-focus-shadow-rgb: var(--emerald-rgb);
  --bs-btn-active-bg: var(--emerald-700);
  --bs-btn-active-border-color: var(--emerald-700);
  --bs-btn-disabled-bg: var(--secondary);
  --bs-btn-disabled-border-color: var(--secondary);
}

.btn-outline-secondary {
  --bs-btn-color: var(--emerald-600);
  --bs-btn-border-color: var(--emerald-600);
  --bs-btn-hover-bg: var(--emerald-600);
  --bs-btn-hover-border-color: var(--emerald-600);
  --bs-btn-focus-shadow-rgb: var(--emerald-rgb);
  --bs-btn-active-bg: var(--emerald-700);
  --bs-btn-active-border-color: var(--emerald-700);
  --bs-btn-disabled-color: var(--emerald-600);
  --bs-btn-disabled-border-color: var(--emerald-600);
}

.btn-success {
  --bs-btn-bg: var(--emerald-600);
  --bs-btn-border-color: var(--emerald-600);
  --bs-btn-hover-bg: var(--emerald-700);
  --bs-btn-hover-border-color: var(--emerald-700);
  --bs-btn-focus-shadow-rgb: var(--emerald-rgb);
  --bs-btn-active-bg: var(--emerald-700);
  --bs-btn-active-border-color: var(--emerald-700);
  --bs-btn-disabled-bg: var(--emerald-600);
  --bs-btn-disabled-border-color: var(--emerald-600);
}