/* =============================================
   THEMES — TimeTrack
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Sora:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&family=Libre+Franklin:wght@400;500;600;700&display=swap');

/* --- Ocean (default) — Teal, Poppins --- */
[data-theme="teal"], :root {
    --primary-50: #f0fdfa; --primary-100: #ccfbf1; --primary-200: #99f6e4;
    --primary-300: #5eead4; --primary-400: #2dd4bf; --primary-500: #14b8a6;
    --primary-600: #0d9488; --primary-700: #0f766e; --primary-800: #115e59; --primary-900: #134e4a;
    --nav-bg: #fff; --nav-border: #e5e7eb; --nav-text: #0f766e; --body-bg: #f5fafa;
    --font-body: 'Poppins', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* --- Forest — Emerald, Inter --- */
[data-theme="emerald"] {
    --primary-50: #f0fdf4; --primary-100: #dcfce7; --primary-200: #bbf7d0;
    --primary-300: #6ee7b7; --primary-400: #34d399; --primary-500: #10b981;
    --primary-600: #059669; --primary-700: #047857; --primary-800: #065f46; --primary-900: #064e3b;
    --nav-bg: #fff; --nav-border: #e5e7eb; --nav-text: #047857; --body-bg: #f8faf9;
    --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* --- Iris — Indigo, DM Sans --- */
[data-theme="indigo"] {
    --primary-50: #eef2ff; --primary-100: #e0e7ff; --primary-200: #c7d2fe;
    --primary-300: #a5b4fc; --primary-400: #818cf8; --primary-500: #6366f1;
    --primary-600: #4f46e5; --primary-700: #4338ca; --primary-800: #3730a3; --primary-900: #312e81;
    --nav-bg: #fff; --nav-border: #e5e7eb; --nav-text: #4f46e5; --body-bg: #f5f3ff;
    --font-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
}

/* --- Velvet — Violet, Sora --- */
[data-theme="violet"] {
    --primary-50: #f5f3ff; --primary-100: #ede9fe; --primary-200: #ddd6fe;
    --primary-300: #c4b5fd; --primary-400: #a78bfa; --primary-500: #8b5cf6;
    --primary-600: #7c3aed; --primary-700: #6d28d9; --primary-800: #5b21b6; --primary-900: #4c1d95;
    --nav-bg: #fff; --nav-border: #ede9fe; --nav-text: #6d28d9; --body-bg: #faf8ff;
    --font-body: 'Sora', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;
}

/* --- Graphite — Slate, Source Sans, dark nav --- */
[data-theme="slate"] {
    --primary-50: #f8fafc; --primary-100: #f1f5f9; --primary-200: #e2e8f0;
    --primary-300: #cbd5e1; --primary-400: #94a3b8; --primary-500: #64748b;
    --primary-600: #475569; --primary-700: #334155; --primary-800: #1e293b; --primary-900: #0f172a;
    --nav-bg: #1e293b; --nav-border: #334155; --nav-text: #f1f5f9; --body-bg: #f1f5f9;
    --font-body: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'Source Sans 3', ui-sans-serif, system-ui, sans-serif;
}
[data-theme="slate"] #main-nav { background-color: var(--nav-bg) !important; border-color: var(--nav-border) !important; }
[data-theme="slate"] #main-nav a, [data-theme="slate"] #main-nav button, [data-theme="slate"] #main-nav span { color: #94a3b8; }
[data-theme="slate"] #main-nav a:hover, [data-theme="slate"] #main-nav button:hover { color: #f1f5f9 !important; background-color: #334155 !important; }
[data-theme="slate"] #main-nav .text-primary-700 { color: #f1f5f9 !important; }
[data-theme="slate"] .dropdown-menu { background-color: #1e293b !important; border-color: #475569 !important; }
[data-theme="slate"] .dropdown-menu a, [data-theme="slate"] .dropdown-menu p, [data-theme="slate"] .dropdown-menu span { color: #cbd5e1 !important; }
[data-theme="slate"] .dropdown-menu a:hover { background-color: #334155 !important; }
[data-theme="slate"] .dropdown-menu .border-gray-200 { border-color: #475569 !important; }

/* --- Royal — Navy + gold, Playfair headings --- */
[data-theme="navy"] {
    --primary-50: #faf8f0; --primary-100: #f5f0d8; --primary-200: #ebe0b0;
    --primary-300: #d4c47a; --primary-400: #c9a84c; --primary-500: #b8942e;
    --primary-600: #1a365d; --primary-700: #153050; --primary-800: #0f2440; --primary-900: #0a1a30;
    --nav-bg: #0f2440; --nav-border: #1a365d; --nav-text: #c9a84c; --body-bg: #f7f8fa;
    --font-body: 'Libre Franklin', ui-sans-serif, system-ui, sans-serif;
    --font-heading: 'Playfair Display', ui-serif, Georgia, serif;
}
[data-theme="navy"] #main-nav { background-color: var(--nav-bg) !important; border-color: var(--nav-border) !important; }
[data-theme="navy"] #main-nav a, [data-theme="navy"] #main-nav button, [data-theme="navy"] #main-nav span { color: #8ba4c4; }
[data-theme="navy"] #main-nav a:hover, [data-theme="navy"] #main-nav button:hover { color: #c9a84c !important; background-color: #1a365d !important; }
[data-theme="navy"] #main-nav .text-primary-700 { color: #c9a84c !important; }
[data-theme="navy"] .dropdown-menu { background-color: #0f2440 !important; border-color: #1a365d !important; }
[data-theme="navy"] .dropdown-menu a, [data-theme="navy"] .dropdown-menu p, [data-theme="navy"] .dropdown-menu span { color: #8ba4c4 !important; }
[data-theme="navy"] .dropdown-menu a:hover { background-color: #1a365d !important; color: #c9a84c !important; }
[data-theme="navy"] .dropdown-menu .border-gray-200 { border-color: #1a365d !important; }
[data-theme="navy"] .bg-primary-600 { background-color: #c9a84c !important; color: #0f2440 !important; }
[data-theme="navy"] .hover\:bg-primary-700:hover { background-color: #b8942e !important; }
[data-theme="navy"] .text-primary-600, [data-theme="navy"] .text-primary-700 { color: #1a365d; }

/* =============================================
   DARK MODE — applies on top of any theme
   ============================================= */
[data-dark] body { background-color: #0b1120; color: #e2e8f0; }
[data-dark] #main-nav { background-color: #111827 !important; border-color: #1f2937 !important; }
[data-dark] #main-nav a, [data-dark] #main-nav button, [data-dark] #main-nav span { color: #94a3b8 !important; }
[data-dark] #main-nav a:hover, [data-dark] #main-nav button:hover { color: var(--primary-400) !important; background-color: #1f2937 !important; }
[data-dark] #main-nav .text-primary-700 { color: var(--primary-400) !important; }
[data-dark] .bg-white { background-color: #111827 !important; }
[data-dark] .bg-gray-50 { background-color: #0b1120 !important; }
[data-dark] .shadow, [data-dark] .shadow-sm, [data-dark] .shadow-lg { box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.03) !important; }
[data-dark] .text-gray-900 { color: #f1f5f9 !important; }
[data-dark] .text-gray-800 { color: #e2e8f0 !important; }
[data-dark] .text-gray-700 { color: #cbd5e1 !important; }
[data-dark] .text-gray-600 { color: #94a3b8 !important; }
[data-dark] .text-gray-500 { color: #64748b !important; }
[data-dark] .text-gray-400 { color: #475569 !important; }
[data-dark] .text-black { color: #f1f5f9 !important; }
[data-dark] .border-gray-200, [data-dark] .border-gray-300 { border-color: #374151 !important; }
[data-dark] .border-gray-100 { border-color: #111827 !important; }
[data-dark] .divide-gray-200 > :not(:last-child) { border-color: #1f2937 !important; }
[data-dark] .divide-gray-100 > :not(:last-child) { border-color: #111827 !important; }
[data-dark] .hover\:bg-gray-50:hover, [data-dark] .hover\:bg-gray-100:hover { background-color: #1f2937 !important; }
[data-dark] input, [data-dark] select, [data-dark] textarea { background-color: #0f172a !important; border-color: #374151 !important; color: #e2e8f0 !important; }
[data-dark] .dropdown-menu { background-color: #111827 !important; border-color: #374151 !important; }
[data-dark] .dropdown-menu a, [data-dark] .dropdown-menu p, [data-dark] .dropdown-menu span { color: #cbd5e1 !important; }
[data-dark] .dropdown-menu a:hover { background-color: #1f2937 !important; }
[data-dark] .bg-green-50 { background-color: #052e16 !important; }
[data-dark] .bg-red-50 { background-color: #2a0a0a !important; }
[data-dark] .bg-yellow-50 { background-color: #2a2008 !important; }
[data-dark] .bg-blue-50 { background-color: #0a1a2a !important; }
[data-dark] .border-dashed { border-color: #374151 !important; }
[data-dark] .hover\:bg-gray-100:hover { background-color: #1f2937 !important; }

/* =============================================
   FONTS
   ============================================= */
body { font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); }

/* =============================================
   UTILITY CLASSES (CSS variable-driven)
   ============================================= */
.text-primary-500 { color: var(--primary-500); }
.text-primary-600 { color: var(--primary-600); }
.text-primary-700 { color: var(--primary-700); }
.text-primary-800 { color: var(--primary-800); }
.text-primary-900 { color: var(--primary-900); }
.bg-primary-50 { background-color: var(--primary-50); }
.bg-primary-100 { background-color: var(--primary-100); }
.bg-primary-500 { background-color: var(--primary-500); }
.bg-primary-600 { background-color: var(--primary-600); }
.bg-primary-700 { background-color: var(--primary-700); }
.hover\:bg-primary-700:hover { background-color: var(--primary-700); }
.hover\:bg-primary-50:hover { background-color: var(--primary-50); }
.hover\:text-primary-600:hover { color: var(--primary-600); }
.hover\:text-primary-700:hover { color: var(--primary-700); }
.hover\:text-primary-800:hover { color: var(--primary-800); }
.hover\:text-primary-900:hover { color: var(--primary-900); }
.hover\:border-primary-400:hover { border-color: var(--primary-400); }
.border-primary-500 { border-color: var(--primary-500); }
.border-l-primary-500 { border-left-color: var(--primary-500); }
.ring-primary-500 { --tw-ring-color: var(--primary-500); }
.focus\:border-primary-500:focus { border-color: var(--primary-500); }
.focus\:ring-primary-500:focus { --tw-ring-color: var(--primary-500); }