/* Token tema dari DashOM, mengikuti sumber PWA_DashOM/style.css. */
:root {
    --font-ui: 'Inter', system-ui, -apple-system, sans-serif;
    
    /* Common Colors */
    --color-success: #22c55e;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
}

/* --- THEME 1: TECH BLUE (DEFAULT) --- */
body.theme-tech.light-theme {
    --bg-color: #f8fafc;
    --card-bg: #ffffff;
    --text-color: #0f172a;
    --text-muted: #64748b;
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --primary-bg: rgba(37, 99, 235, 0.05);
    --accent-amber: #d97706;
    --border-color: #e2e8f0;
    --hover-overlay: rgba(0, 0, 0, 0.02);
    --shadow-color: rgba(15, 23, 42, 0.04);
    --card-border: 1px solid #e2e8f0;
    --header-bg: #ffffff;
}
body.theme-tech.dark-theme {
    --bg-color: #0b0f19;
    --card-bg: #111827;
    --text-color: #f3f4f6;
    --text-muted: #9ca3af;
    --primary: #3b82f6;
    --primary-light: #60a5fa;
    --primary-bg: rgba(59, 130, 246, 0.08);
    --accent-amber: #fbbf24;
    --border-color: #1f2937;
    --hover-overlay: rgba(255, 255, 255, 0.02);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --card-border: 1px solid #1f2937;
    --header-bg: #111827;
}

/* --- THEME 2: WARM SEPIA (RETRO LUXURY) --- */
body.theme-sepia.light-theme {
    --bg-color: #fcf8f2;
    --card-bg: #ffffff;
    --text-color: #433422;
    --text-muted: #8c765c;
    --primary: #c2783c;
    --primary-light: #d98e52;
    --primary-bg: rgba(194, 120, 60, 0.08);
    --accent-amber: #b85c38;
    --border-color: #eedec8;
    --hover-overlay: rgba(194, 120, 60, 0.02);
    --shadow-color: rgba(67, 52, 34, 0.04);
    --card-border: 1px solid #eedec8;
    --header-bg: #ffffff;
}
body.theme-sepia.dark-theme {
    --bg-color: #1c150d;
    --card-bg: #281f14;
    --text-color: #f4eae1;
    --text-muted: #ab957d;
    --primary: #e0965c;
    --primary-light: #f7af79;
    --primary-bg: rgba(224, 150, 92, 0.12);
    --accent-amber: #f28b50;
    --border-color: #3b2f22;
    --hover-overlay: rgba(255, 255, 255, 0.02);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --card-border: 1px solid #3b2f22;
    --header-bg: #281f14;
}

/* --- THEME 3: ROYAL SAGE (ECO LIFE) --- */
body.theme-sage.light-theme {
    --bg-color: #f4f7f5;
    --card-bg: #ffffff;
    --text-color: #1a2e26;
    --text-muted: #5c756b;
    --primary: #0f766e;
    --primary-light: #14b8a6;
    --primary-bg: rgba(15, 118, 110, 0.08);
    --accent-amber: #d97706;
    --border-color: #d1dbd6;
    --hover-overlay: rgba(15, 118, 110, 0.02);
    --shadow-color: rgba(26, 46, 38, 0.04);
    --card-border: 1px solid #d1dbd6;
    --header-bg: #ffffff;
}
body.theme-sage.dark-theme {
    --bg-color: #0c1512;
    --card-bg: #14221d;
    --text-color: #ecf3f0;
    --text-muted: #8da69c;
    --primary: #14b8a6;
    --primary-light: #2dd4bf;
    --primary-bg: rgba(20, 184, 166, 0.12);
    --accent-amber: #fbbf24;
    --border-color: #21352e;
    --hover-overlay: rgba(255, 255, 255, 0.02);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --card-border: 1px solid #21352e;
    --header-bg: #14221d;
}