/* ============================================================
 * theme-khaki.css — Galaxy ERP V2.0.0-alpha palette overlay
 * CSS-only; no markup or JS changes. Overrides Tailwind CDN utilities.
 * Approved by Andrew 2026-04-19.
 * ============================================================ */

:root {
    --bg: #FAF5F2;
    --surface: #FFFFFF;
    --text: #2D2926;
    --text-muted: #78716C;
    --gold: #D4A44A;
    --cocoa: #6B4E3D;
    --cocoa-hover: #55412F;
    --cocoa-disabled: #C7B8AC;
    --border: #E8DDD4;
}

/* ---------- Page background (flip login/dashboard off dark) ---------- */
html, body {
    background: var(--bg) !important;
    background-image:
        radial-gradient(at 20% 30%, rgba(212, 164, 74, 0.08) 0px, transparent 60%),
        radial-gradient(at 80% 70%, rgba(107, 78, 61, 0.06) 0px, transparent 60%) !important;
    color: var(--text) !important;
}

/* ---------- Surface (cards, modals, header) ---------- */
.bg-white { background-color: var(--surface) !important; }
.bg-gray-50 { background-color: var(--bg) !important; }
.bg-gray-100 { background-color: #F1E9E1 !important; } /* soft khaki tab bar / chip */
.bg-gray-200 { background-color: #E8DDD4 !important; }

/* ---------- Dark surfaces → cocoa (primary buttons, totals panel, logo tile) ---------- */
.bg-gray-900 { background-color: var(--cocoa) !important; }
.bg-gray-800 { background-color: var(--cocoa-hover) !important; }

/* ---------- Text ---------- */
.text-gray-900 { color: var(--text) !important; }
.text-gray-800 { color: var(--text) !important; }
.text-gray-700 { color: var(--text) !important; }
.text-gray-600 { color: var(--text) !important; }
.text-gray-500 { color: var(--text-muted) !important; }
.text-gray-400 { color: var(--text-muted) !important; }
.text-gray-300 { color: var(--text-muted) !important; }

/* White text (inside cocoa buttons / totals) stays white */

/* ---------- Borders ---------- */
.border-gray-300 { border-color: var(--border) !important; }
.border-gray-200 { border-color: var(--border) !important; }
.border-gray-100 { border-color: var(--border) !important; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
.divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }

/* ---------- Hover states ---------- */
.hover\:bg-gray-50:hover { background-color: #F3EBE3 !important; }
.hover\:bg-gray-100:hover { background-color: #EFE5DB !important; }
.hover\:bg-gray-200:hover { background-color: #E8DDD4 !important; }
.hover\:bg-gray-800:hover { background-color: var(--cocoa-hover) !important; }
.hover\:bg-gray-700:hover { background-color: var(--cocoa-hover) !important; }
.hover\:text-gray-900:hover { color: var(--cocoa) !important; }
.hover\:text-gray-600:hover { color: var(--text) !important; }
.hover\:text-gray-700:hover { color: var(--text) !important; }
.hover\:border-gray-400:hover { border-color: var(--cocoa) !important; }

/* ---------- Focus rings (cocoa accent) ---------- */
.focus\:ring-gray-900:focus { --tw-ring-color: var(--cocoa) !important; box-shadow: 0 0 0 2px var(--cocoa) !important; }
.focus\:border-gray-900:focus { border-color: var(--cocoa) !important; }

/* ---------- Disabled ---------- */
.disabled\:bg-gray-400:disabled { background-color: var(--cocoa-disabled) !important; }

/* ---------- Slate palette (used on accounting/project-budget.html) ---------- */
.bg-slate-50 { background-color: var(--bg) !important; }
.bg-slate-100 { background-color: #F1E9E1 !important; }
.bg-slate-800 { background-color: var(--cocoa) !important; }
.bg-slate-900 { background-color: var(--cocoa) !important; }
.text-slate-900 { color: var(--text) !important; }
.text-slate-800 { color: var(--text) !important; }
.text-slate-600 { color: var(--text) !important; }
.text-slate-500 { color: var(--text-muted) !important; }
.text-slate-400 { color: var(--text-muted) !important; }
.text-slate-300 { color: var(--text-muted) !important; }
.border-slate-300 { border-color: var(--border) !important; }
.border-slate-200 { border-color: var(--border) !important; }
.hover\:bg-slate-50:hover { background-color: #F3EBE3 !important; }
.hover\:bg-slate-100:hover { background-color: #EFE5DB !important; }

/* ---------- Accent tints kept subtle (blue info banner → gold info banner) ---------- */
.bg-blue-50 { background-color: rgba(212, 164, 74, 0.10) !important; }
.border-blue-200 { border-color: rgba(212, 164, 74, 0.35) !important; }
.text-blue-700 { color: var(--cocoa) !important; }