/* assets/css/global-theme.css */

:root {
    /* Transitions */
    --theme-transition: all 0.3s ease;

    /* Light Theme (Standard Modern Aesthetic) */
    --bg-primary: #f8fafc;
    /* Slate 50 */
    --bg-secondary: #ffffff;
    /* White */
    --bg-panel: rgba(255, 255, 255, 0.9);
    --bg-card: #f1f5f9;
    /* Slate 100 */

    --text-primary: #1e293b;
    /* Slate 800 */
    --text-secondary: #475569;
    /* Slate 600 */
    --text-muted: #94a3b8;
    /* Slate 400 */

    /* Default Sidebar (Light matches Primary) */
    --text-sidebar: var(--text-primary);
    --text-sidebar-muted: var(--text-secondary);

    --border-color: #e2e8f0;
    /* Slate 200 */
    --border-strong: #cbd5e1;
    /* Slate 300 */

    --accent-color: #3b82f6;
    /* Blue 500 */
    --accent-gradient: linear-gradient(135deg, #3b82f6, #8b5cf6);

    --shadow-color: rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Dark Theme (Deep Navy/Night Aesthetic - "Khusus Isi") */
body.dark-mode,
.dark-mode {
    /* User Reference Palette */
    --bg-primary: #0b1120;
    /* Deepest Navy (Background) */
    --bg-secondary: #161e2e;
    /* Slightly Lighter (Section) */
    --bg-panel: rgba(11, 17, 32, 0.95);
    --bg-card: #1f293a;
    /* Card background */

    --text-primary: #f8fafc;
    /* Slate 50 */
    --text-secondary: #94a3b8;
    /* Slate 400 */
    --text-muted: #64748b;
    /* Slate 500 */

    --border-color: #1e293b;
    /* Slate 800 - Subtle border */
    --border-strong: #334155;
    /* Slate 700 */

    --shadow-color: rgba(0, 0, 0, 0.5);
    /* Stronger shadow for depth */
}

/* Standard Theme (Black Sidebar / White Content) */
body.standard-mode,
.standard-mode {
    --bg-primary: #ffffff;
    --bg-secondary: #ffffff;
    --bg-panel: #ffffff;
    --bg-card: #ffffff;
    --bg-sidebar: #000000;
    /* User: Deep Black Sidebar */

    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;

    /* Sidebar Specific (High Contrast on Black) */
    --text-sidebar: #ffffff;
    --text-sidebar-muted: #9ca3af;

    --border-color: #e5e7eb;
    --border-strong: #d1d5db;

    --shadow-color: rgba(0, 0, 0, 0.1);
}

/* Classic Red Theme (Modern Dark Blue & Magenta) */
body.classic-red-mode,
.classic-red-mode {
    --bg-primary: #141d26;
    /* User: Deep Dark Blue */
    --bg-secondary: #243447;
    /* User: Lighter Blue Grey */
    --bg-panel: rgba(20, 29, 38, 0.95);
    --bg-card: #243447;

    --text-primary: #ffffff;
    /* User: White */
    --text-secondary: #9aa8b9;
    --text-muted: #5e7085;

    --border-color: #2b3e52;
    --border-strong: #385068;

    --accent-color: #c51f5d;
    /* User: Vibrant Pink/Magenta */
    --accent-gradient: linear-gradient(135deg, #c51f5d, #9d1748);

    --shadow-color: rgba(0, 0, 0, 0.4);
    --font-family: 'Inter', -apple-system, sans-serif;
}

/* Global Base Styles */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Utilities */
.theme-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    border-radius: 12px;
}

.text-gradient {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}