/* ═══════════════════════════════════════════════════════════════
   NANITS - Theme System (6 glass themes)
   Default: milk (warm white frosted glass)
   ═══════════════════════════════════════════════════════════════ */

:root,
html[data-theme="milk"],
html[data-theme="light"] {
  --t-primary: #4B5563;
  --t-primary-dark: #374151;
  --t-primary-light: #6B7280;
  --t-primary-rgb: 75, 85, 99;
  --t-accent: #6B7280;
  --t-accent2: #9CA3AF;
  --t-sidebar-bg-start: #f8f9fa;
  --t-sidebar-bg-end: #f0f1f3;
  --t-sidebar-text: #4B5563;
  --t-sidebar-text-muted: #9CA3AF;
  --t-sidebar-active: #4B5563;
  --t-sidebar-border-rgb: 185, 180, 172;
  --t-page-bg: #faf8f5;
  --t-page-bg-end: #f5f0ea;
  --t-card-bg: #ffffff;
  --t-card-border: rgba(185, 180, 172, 0.35);
  --t-text-primary: #1f2937;
  --t-text-secondary: #6b7280;
  --t-text-muted: #9ca3af;
  --t-unread-bg: rgba(255, 255, 255, 0.4);
  --t-input-bg: rgba(255, 255, 255, 0.6);
  --t-input-border: rgba(185, 180, 172, 0.35);

  /* ── Glass / Background ── */
  --t-glass-bg: rgba(255, 255, 255, 0.6);
  --t-glass-bg-strong: rgba(255, 255, 255, 0.92);
  --t-overlay-bg: #f8fafc;

  /* ── Text (warm grays) ── */
  --t-text-dark: #1a1a1a;
  --t-text-warm: #8b8680;
  --t-text-hint: #b0aaa4;
  --t-text-stone: #a8a29e;

  /* ── Borders / Dividers ── */
  --t-border-light: #e8e4df;
  --t-border-dashed: rgba(185, 180, 172, 0.45);

  /* ── Scrollbar ── */
  --t-scrollbar-thumb: rgba(185, 180, 172, 0.45);

  /* ── Readonly bar ── */
  --t-readonly-bg: rgba(255, 251, 235, 0.9);
  --t-readonly-border: #fde68a;
  --t-readonly-text: #92400e;

  /* ── Nav markers ── */
  --t-nav-question: #3b82f6;
  --t-nav-nanit: #F59E0B;
  --t-nav-selection: #f59e0b;
  --t-nav-block: #84CC16;
  --t-nav-discharge: #8B5CF6;
  --t-nav-line: rgba(185, 180, 172, 0.35);

  /* ── Blob gradients ── */
  --t-blob-mint: #a7f3d0;
  --t-blob-sky: #bfdbfe;
  --t-blob-lemon: #fef9c3;
  --t-blob-amber: #fde68a;
  --t-blob-pink: #fce7f3;
  --t-blob-purple: #ddd6fe;
  --t-blob-slate: #cbd5e1;
  --t-blob-indigo: #c7d2fe;

  /* ── FAB buttons ── */
  --t-fab-success-start: #34D399;
  --t-fab-success-end: #10B981;
  --t-fab-danger-start: #F87171;
  --t-fab-danger-end: #EF4444;

  /* ── Shadows ── */
  --t-shadow-soft: rgba(0, 0, 0, 0.08);
  --t-shadow-faint: rgba(0, 0, 0, 0.04);

  /* ── Toast ── */
  --t-toast-bg: rgba(0, 0, 0, 0.8);
  --t-toast-text: #ffffff;
  --t-toast-success: rgba(5, 150, 105, 0.65);

  /* ── Spinner / Loading ── */
  --t-spinner-border: #e5e7eb;
  --t-spinner-active: #4B5563;

  /* ── Error ── */
  --t-error: #ef4444;

  /* ── Input specifics ── */
  --t-input-bg-solid: #ffffff;
  --t-btn-back-bg: rgba(75, 85, 99, 0.1);

  /* ── Extended palette (gray scale) ── */
  --t-gray-900: #111827;
  --t-gray-800: #1f2937;
  --t-gray-700: #374151;
  --t-gray-600: #4B5563;
  --t-gray-500: #6b7280;
  --t-gray-400: #9ca3af;
  --t-gray-300: #d1d5db;
  --t-gray-200: #e5e7eb;
  --t-gray-100: #f3f4f6;
  --t-gray-50: #f9fafb;

  /* ── Surface colors ── */
  --t-surface: #ffffff;
  --t-surface-dim: #f9fafb;
  --t-surface-subtle: #f3f4f6;
  --t-bg-hover: rgba(0, 0, 0, 0.04);

  /* ── Border extended ── */
  --t-border-medium: #d1d5db;
  --t-border-default: #e5e7eb;

  /* ── Feature accents (stable across themes) ── */
  --t-purple: #7c3aed;
  --t-purple-dark: #6d28d9;
  --t-purple-light: #8b5cf6;
  --t-purple-pale: #c4b5fd;
  --t-purple-bg: #f5f3ff;
  --t-purple-bg-light: #faf5ff;
  --t-purple-bg-dim: #ede9fe;
  --t-green-600: #059669;
  --t-green-700: #15803d;
  --t-green-800: #166534;
  --t-green-bg: #dcfce7;
  --t-green-bg-light: #ecfdf5;
  --t-green-bg-dim: #f0fdf4;
  --t-green-border: #bbf7d0;
  --t-green-border-light: #86efac;
  --t-blue: #3b82f6;
  --t-blue-bg: #e3f2fd;
  --t-indigo: #6366f1;
  --t-amber: #f59e0b;
  --t-amber-bg: #fef3c7;
  --t-amber-border: #fcd34d;
  --t-red: #ef4444;
  --t-red-dark: #dc2626;
  --t-red-bg: #fee2e2;
  --t-red-bg-light: #fef2f2;
  --t-orange-bg: #fff7ed;

  /* ── Brand (nanit-specific) ── */
  --t-brand: #C17B4A;
  --t-brand-light: #D4956A;

  /* ── Teal (VD suggestions) ── */
  --t-teal: #14b8a6;
  --t-teal-dark: #0d9488;
  --t-teal-darker: #0f766e;
  --t-teal-bg: #ccfbf1;
  --t-teal-bg-light: #f0fdfa;
  --t-teal-border: #99f6e4;

  /* ── Misc UI states ── */
  --t-muted-slate: #94a3b8;
  --t-light-red: #fca5a5;
  --t-lighter-red: #fecaca;
  --t-light-purple: #ddd6fe;
  --t-vd-danger: #ff453a;
  --t-indigo-light: #a5b4fc;

  /* ── VD setup/post dark UI ── */
  --t-vd-dark-bg: #1a1a2e;
  --t-vd-btn-start: #667eea;
  --t-vd-btn-end: #764ba2;

  /* ── Status / Alert colors ── */
  --t-success-bg: #d1fae5;
  --t-success-text: #065f46;
  --t-success-text-alt: #047857;
  --t-info-bg: #dbeafe;
  --t-info-text: #1e40af;
  --t-warning-text: #92400e;
  --t-danger-text: #b91c1c;

  /* ── Sidebar light overrides ── */
  --t-sidebar-muted-warm: #b9b4ac;
}


/* ═══════════════════════════════════════════════════════════════
   MINT — cool green frosted glass
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="mint"] {
  --t-primary: #2d6a4f;
  --t-primary-dark: #1b4332;
  --t-primary-light: #40916c;
  --t-primary-rgb: 45, 106, 79;
  --t-accent: #40916c;
  --t-accent2: #74c69d;
  --t-sidebar-bg-start: #f0fdf4;
  --t-sidebar-bg-end: #e6f7ed;
  --t-sidebar-text: #2d6a4f;
  --t-sidebar-text-muted: #74c69d;
  --t-sidebar-active: #1b4332;
  --t-sidebar-border-rgb: 116, 198, 157;
  --t-page-bg: #ecfdf5;
  --t-page-bg-end: #d1fae5;
  --t-card-bg: rgba(255, 255, 255, 0.85);
  --t-card-border: rgba(116, 198, 157, 0.35);
  --t-text-primary: #1b4332;
  --t-text-secondary: #2d6a4f;
  --t-text-muted: #74c69d;
  --t-unread-bg: rgba(255, 255, 255, 0.5);
  --t-input-bg: rgba(255, 255, 255, 0.65);
  --t-input-border: rgba(116, 198, 157, 0.35);
  --t-glass-bg: rgba(255, 255, 255, 0.55);
  --t-glass-bg-strong: rgba(255, 255, 255, 0.9);
  --t-overlay-bg: #f0fdf4;
  --t-text-dark: #14532d;
  --t-text-warm: #40916c;
  --t-text-hint: #95d5b2;
  --t-text-stone: #74c69d;
  --t-border-light: #d1fae5;
  --t-border-dashed: rgba(116, 198, 157, 0.45);
  --t-scrollbar-thumb: rgba(116, 198, 157, 0.45);
  --t-shadow-soft: rgba(0, 0, 0, 0.06);
  --t-shadow-faint: rgba(0, 0, 0, 0.03);
  --t-surface: rgba(255, 255, 255, 0.85);
  --t-surface-dim: #f0fdf4;
  --t-surface-subtle: #ecfdf5;
  --t-bg-hover: rgba(45, 106, 79, 0.06);
  --t-border-medium: #a7f3d0;
  --t-border-default: #d1fae5;
  --t-brand: #2d6a4f;
  --t-brand-light: #40916c;
  --t-sidebar-muted-warm: #95d5b2;
}


/* ═══════════════════════════════════════════════════════════════
   ROSE — warm pink frosted glass
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="rose"] {
  --t-primary: #9f1239;
  --t-primary-dark: #881337;
  --t-primary-light: #be123c;
  --t-primary-rgb: 159, 18, 57;
  --t-accent: #be123c;
  --t-accent2: #f9a8d4;
  --t-sidebar-bg-start: #fff1f2;
  --t-sidebar-bg-end: #ffe4e6;
  --t-sidebar-text: #9f1239;
  --t-sidebar-text-muted: #f9a8d4;
  --t-sidebar-active: #881337;
  --t-sidebar-border-rgb: 249, 168, 212;
  --t-page-bg: #fff1f2;
  --t-page-bg-end: #fce7f3;
  --t-card-bg: rgba(255, 255, 255, 0.85);
  --t-card-border: rgba(249, 168, 212, 0.35);
  --t-text-primary: #881337;
  --t-text-secondary: #9f1239;
  --t-text-muted: #f9a8d4;
  --t-unread-bg: rgba(255, 255, 255, 0.5);
  --t-input-bg: rgba(255, 255, 255, 0.65);
  --t-input-border: rgba(249, 168, 212, 0.35);
  --t-glass-bg: rgba(255, 255, 255, 0.55);
  --t-glass-bg-strong: rgba(255, 255, 255, 0.9);
  --t-overlay-bg: #fff1f2;
  --t-text-dark: #4c0519;
  --t-text-warm: #be123c;
  --t-text-hint: #fda4af;
  --t-text-stone: #f9a8d4;
  --t-border-light: #ffe4e6;
  --t-border-dashed: rgba(249, 168, 212, 0.45);
  --t-scrollbar-thumb: rgba(249, 168, 212, 0.45);
  --t-shadow-soft: rgba(0, 0, 0, 0.06);
  --t-shadow-faint: rgba(0, 0, 0, 0.03);
  --t-surface: rgba(255, 255, 255, 0.85);
  --t-surface-dim: #fff1f2;
  --t-surface-subtle: #ffe4e6;
  --t-bg-hover: rgba(159, 18, 57, 0.06);
  --t-border-medium: #fecdd3;
  --t-border-default: #ffe4e6;
  --t-brand: #9f1239;
  --t-brand-light: #be123c;
  --t-sidebar-muted-warm: #fda4af;
}


/* ═══════════════════════════════════════════════════════════════
   NAVY — deep blue frosted glass
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="navy"] {
  --t-primary: #a1a1aa;
  --t-primary-dark: #d4d4d8;
  --t-primary-light: #71717a;
  --t-primary-rgb: 161, 161, 170;
  --t-accent: #93c5fd;
  --t-accent2: #60a5fa;
  --t-sidebar-bg-start: #0f172a;
  --t-sidebar-bg-end: #1e293b;
  --t-sidebar-text: #e2e8f0;
  --t-sidebar-text-muted: #64748b;
  --t-sidebar-active: #f1f5f9;
  --t-sidebar-border-rgb: 51, 65, 85;
  --t-page-bg: #0f172a;
  --t-page-bg-end: #1e293b;
  --t-card-bg: rgba(30, 41, 59, 0.8);
  --t-card-border: rgba(51, 65, 85, 0.6);
  --t-text-primary: #f1f5f9;
  --t-text-secondary: #cbd5e1;
  --t-text-muted: #64748b;
  --t-unread-bg: rgba(30, 41, 59, 0.6);
  --t-input-bg: rgba(30, 41, 59, 0.6);
  --t-input-border: rgba(51, 65, 85, 0.6);
  --t-glass-bg: rgba(30, 41, 59, 0.6);
  --t-glass-bg-strong: rgba(15, 23, 42, 0.95);
  --t-overlay-bg: #0f172a;
  --t-text-dark: #f8fafc;
  --t-text-warm: #94a3b8;
  --t-text-hint: #475569;
  --t-text-stone: #64748b;
  --t-border-light: #1e293b;
  --t-border-dashed: rgba(51, 65, 85, 0.6);
  --t-scrollbar-thumb: rgba(100, 116, 139, 0.4);
  --t-readonly-bg: rgba(113, 63, 18, 0.2);
  --t-readonly-border: #92400e;
  --t-readonly-text: #fbbf24;
  --t-nav-question: #60a5fa;
  --t-nav-nanit: #fbbf24;
  --t-nav-selection: #fbbf24;
  --t-nav-block: #a3e635;
  --t-nav-discharge: #a78bfa;
  --t-nav-line: rgba(51, 65, 85, 0.5);
  --t-fab-success-start: #059669;
  --t-fab-success-end: #047857;
  --t-fab-danger-start: #dc2626;
  --t-fab-danger-end: #b91c1c;
  --t-shadow-soft: rgba(0, 0, 0, 0.3);
  --t-shadow-faint: rgba(0, 0, 0, 0.2);
  --t-toast-bg: rgba(241, 245, 249, 0.9);
  --t-toast-text: #0f172a;
  --t-toast-success: rgba(5, 150, 105, 0.75);
  --t-spinner-border: #1e293b;
  --t-spinner-active: #94a3b8;
  --t-error: #f87171;
  --t-input-bg-solid: #1e293b;
  --t-btn-back-bg: rgba(148, 163, 184, 0.12);
  --t-gray-900: #f8fafc;
  --t-gray-800: #f1f5f9;
  --t-gray-700: #e2e8f0;
  --t-gray-600: #cbd5e1;
  --t-gray-500: #94a3b8;
  --t-gray-400: #64748b;
  --t-gray-300: #475569;
  --t-gray-200: #334155;
  --t-gray-100: #1e293b;
  --t-gray-50: #0f172a;
  --t-surface: #1e293b;
  --t-surface-dim: #0f172a;
  --t-surface-subtle: #334155;
  --t-bg-hover: rgba(255, 255, 255, 0.06);
  --t-border-medium: #334155;
  --t-border-default: #1e293b;
  --t-purple: #a78bfa;
  --t-purple-dark: #8b5cf6;
  --t-purple-light: #c4b5fd;
  --t-purple-pale: #4c1d95;
  --t-purple-bg: rgba(139, 92, 246, 0.12);
  --t-purple-bg-light: rgba(139, 92, 246, 0.08);
  --t-purple-bg-dim: rgba(139, 92, 246, 0.15);
  --t-green-600: #34d399;
  --t-green-700: #10b981;
  --t-green-800: #059669;
  --t-green-bg: rgba(16, 185, 129, 0.15);
  --t-green-bg-light: rgba(16, 185, 129, 0.08);
  --t-green-bg-dim: rgba(16, 185, 129, 0.12);
  --t-green-border: #064e3b;
  --t-green-border-light: #065f46;
  --t-blue: #60a5fa;
  --t-blue-bg: rgba(59, 130, 246, 0.12);
  --t-indigo: #818cf8;
  --t-amber: #fbbf24;
  --t-amber-bg: rgba(245, 158, 11, 0.15);
  --t-amber-border: #92400e;
  --t-red: #f87171;
  --t-red-dark: #ef4444;
  --t-red-bg: rgba(239, 68, 68, 0.15);
  --t-red-bg-light: rgba(239, 68, 68, 0.08);
  --t-orange-bg: rgba(249, 115, 22, 0.1);
  --t-brand: #D4956A;
  --t-brand-light: #E8B28A;
  --t-teal: #2dd4bf;
  --t-teal-dark: #14b8a6;
  --t-teal-darker: #0d9488;
  --t-teal-bg: rgba(20, 184, 166, 0.15);
  --t-teal-bg-light: rgba(20, 184, 166, 0.08);
  --t-teal-border: #115e59;
  --t-muted-slate: #64748b;
  --t-light-red: #991b1b;
  --t-lighter-red: #7f1d1d;
  --t-light-purple: #4c1d95;
  --t-vd-danger: #ff6961;
  --t-indigo-light: #6366f1;
  --t-vd-dark-bg: #0a0a14;
  --t-vd-btn-start: #818cf8;
  --t-vd-btn-end: #a78bfa;
  --t-success-bg: rgba(16, 185, 129, 0.15);
  --t-success-text: #6ee7b7;
  --t-success-text-alt: #34d399;
  --t-info-bg: rgba(59, 130, 246, 0.15);
  --t-info-text: #93c5fd;
  --t-warning-text: #fbbf24;
  --t-danger-text: #fca5a5;
  --t-sidebar-muted-warm: #475569;
}


/* ═══════════════════════════════════════════════════════════════
   LAVENDER — soft purple frosted glass
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="lavender"] {
  --t-primary: #6d28d9;
  --t-primary-dark: #5b21b6;
  --t-primary-light: #7c3aed;
  --t-primary-rgb: 109, 40, 217;
  --t-accent: #7c3aed;
  --t-accent2: #c4b5fd;
  --t-sidebar-bg-start: #faf5ff;
  --t-sidebar-bg-end: #f3e8ff;
  --t-sidebar-text: #6d28d9;
  --t-sidebar-text-muted: #c4b5fd;
  --t-sidebar-active: #5b21b6;
  --t-sidebar-border-rgb: 196, 181, 253;
  --t-page-bg: #faf5ff;
  --t-page-bg-end: #ede9fe;
  --t-card-bg: rgba(255, 255, 255, 0.85);
  --t-card-border: rgba(196, 181, 253, 0.35);
  --t-text-primary: #3b0764;
  --t-text-secondary: #6d28d9;
  --t-text-muted: #c4b5fd;
  --t-unread-bg: rgba(255, 255, 255, 0.5);
  --t-input-bg: rgba(255, 255, 255, 0.65);
  --t-input-border: rgba(196, 181, 253, 0.35);
  --t-glass-bg: rgba(255, 255, 255, 0.55);
  --t-glass-bg-strong: rgba(255, 255, 255, 0.9);
  --t-overlay-bg: #faf5ff;
  --t-text-dark: #3b0764;
  --t-text-warm: #7c3aed;
  --t-text-hint: #c4b5fd;
  --t-text-stone: #a78bfa;
  --t-border-light: #ede9fe;
  --t-border-dashed: rgba(196, 181, 253, 0.45);
  --t-scrollbar-thumb: rgba(196, 181, 253, 0.45);
  --t-shadow-soft: rgba(0, 0, 0, 0.06);
  --t-shadow-faint: rgba(0, 0, 0, 0.03);
  --t-surface: rgba(255, 255, 255, 0.85);
  --t-surface-dim: #faf5ff;
  --t-surface-subtle: #f3e8ff;
  --t-bg-hover: rgba(109, 40, 217, 0.06);
  --t-border-medium: #ddd6fe;
  --t-border-default: #ede9fe;
  --t-brand: #6d28d9;
  --t-brand-light: #7c3aed;
  --t-sidebar-muted-warm: #c4b5fd;
}


/* ═══════════════════════════════════════════════════════════════
   PEACH — warm amber/peach frosted glass
   ═══════════════════════════════════════════════════════════════ */

html[data-theme="peach"] {
  --t-primary: #c2410c;
  --t-primary-dark: #9a3412;
  --t-primary-light: #ea580c;
  --t-primary-rgb: 194, 65, 12;
  --t-accent: #ea580c;
  --t-accent2: #fdba74;
  --t-sidebar-bg-start: #fff7ed;
  --t-sidebar-bg-end: #ffedd5;
  --t-sidebar-text: #c2410c;
  --t-sidebar-text-muted: #fdba74;
  --t-sidebar-active: #9a3412;
  --t-sidebar-border-rgb: 253, 186, 116;
  --t-page-bg: #fff7ed;
  --t-page-bg-end: #fed7aa;
  --t-card-bg: rgba(255, 255, 255, 0.85);
  --t-card-border: rgba(253, 186, 116, 0.35);
  --t-text-primary: #7c2d12;
  --t-text-secondary: #c2410c;
  --t-text-muted: #fdba74;
  --t-unread-bg: rgba(255, 255, 255, 0.5);
  --t-input-bg: rgba(255, 255, 255, 0.65);
  --t-input-border: rgba(253, 186, 116, 0.35);
  --t-glass-bg: rgba(255, 255, 255, 0.55);
  --t-glass-bg-strong: rgba(255, 255, 255, 0.9);
  --t-overlay-bg: #fff7ed;
  --t-text-dark: #431407;
  --t-text-warm: #ea580c;
  --t-text-hint: #fdba74;
  --t-text-stone: #fb923c;
  --t-border-light: #ffedd5;
  --t-border-dashed: rgba(253, 186, 116, 0.45);
  --t-scrollbar-thumb: rgba(253, 186, 116, 0.45);
  --t-shadow-soft: rgba(0, 0, 0, 0.06);
  --t-shadow-faint: rgba(0, 0, 0, 0.03);
  --t-surface: rgba(255, 255, 255, 0.85);
  --t-surface-dim: #fff7ed;
  --t-surface-subtle: #ffedd5;
  --t-bg-hover: rgba(194, 65, 12, 0.06);
  --t-border-medium: #fed7aa;
  --t-border-default: #ffedd5;
  --t-brand: #c2410c;
  --t-brand-light: #ea580c;
  --t-sidebar-muted-warm: #fdba74;
}