/**
 * Nova Academy — global design tokens (siswa + admin + marketing)
 *
 * Dark + light palettes follow the Nova “N” mark: true black canvas, warm charcoal surfaces,
 * platinum text (#f0efe9 family), champagne rim-light glows, and a restrained steel–periwinkle
 * accent for interactive UI (professional, not default Bootstrap blue).
 *
 * Light mode: warm paper / gallery white with deep warm-grey typography and the same accent family.
 *
 * Fonts: load via inc/edtech_google_fonts.php (preconnect + stylesheet) — not @import here (blocks render).
 */

/* ------------------------------------------------------------------------- */
/* Default theme — Nova logo system (black · charcoal · platinum · steel accent) */
/* ------------------------------------------------------------------------- */
:root {
    --ed-font-display: "Plus Jakarta Sans", system-ui, sans-serif;
    --ed-font-ui: "Inter", system-ui, sans-serif;

    /* Dark workspace — true black canvas, warm charcoal lifts (logo squircle family) */
    --ed-canvas: #000000;
    --ed-canvas-warm: #050505;
    --ed-bg-section: #0a0a0a;
    --ed-bg-deep: #000000;
    /* Sidebar rail: satu permukaan netral (selaras app shell modern, hindari clash AdminKit #222E3C) */
    --ed-sidebar-bg: #161616;
    --ed-surface: #121212;
    --ed-surface-elevated: #161616;
    --ed-elevated: #1a1a1a;
    --ed-table-header: #222222;

    /* Borders: faint platinum / grid lines (#222 spirit, soft on black) */
    --ed-border: rgba(245, 245, 240, 0.055);
    --ed-border-strong: rgba(234, 232, 225, 0.12);

    /* Typography: platinum primary, warm greys for hierarchy */
    --ed-text: #f0efe9;
    --ed-text-secondary: #b4b1a9;
    --ed-text-muted: #65635c;

    /* Interactive accent — steel periwinkle (reads “pro software”, pairs with silver mark) */
    --ed-primary: #8b92d9;
    --ed-primary-hover: #a0a7e6;
    --ed-primary-active: #767ec4;
    --ed-primary-rgb: 139, 146, 217;
    --ed-primary-soft: rgba(var(--ed-primary-rgb), 0.16);

    --ed-secondary-brand: #e8e6df;
    --ed-accent-student: #c9b896;
    --ed-accent-sky: #9aa3c8;
    --ed-accent-highlight: #ebe8e0;
    --ed-champagne: rgba(255, 249, 229, 0.08);
    --ed-glow-warm: 0 0 64px rgba(255, 249, 229, 0.045);
    --ed-glow-brand: 0 8px 36px rgba(var(--ed-primary-rgb), 0.22);

    --ed-success: #5fd4a8;
    --ed-success-bg: rgba(95, 212, 168, 0.12);
    --ed-warning: #dfc07a;
    --ed-warning-bg: rgba(223, 192, 122, 0.12);
    --ed-danger: #e89191;
    --ed-danger-bg: rgba(232, 145, 145, 0.1);
    --ed-info: #9eb4ea;
    --ed-info-bg: rgba(158, 180, 234, 0.1);

    --ed-radius-sm: 8px;
    --ed-radius-md: 12px;
    --ed-radius-lg: 16px;
    --ed-radius-xl: 20px;

    --ed-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.65);
    --ed-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
    --ed-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.035) inset, 0 8px 32px rgba(0, 0, 0, 0.55);
    --ed-shadow-elevated: 0 24px 56px rgba(0, 0, 0, 0.58);

    --ed-space-1: 4px;
    --ed-space-2: 8px;
    --ed-space-3: 12px;
    --ed-space-4: 16px;
    --ed-space-5: 24px;
    --ed-space-6: 32px;

    --ed-sidebar-w: 260px;
    --ed-sidebar-collapsed: 72px;
    --ed-topbar-h: 56px;

    --ed-focus-ring: 0 0 0 3px rgba(var(--ed-primary-rgb), 0.38);
    --ed-focus-ring-inset: inset 0 0 0 2px rgba(var(--ed-primary-rgb), 0.48);

    --ed-on-accent-bg: #030303;
    --ed-link: #b4bae8;
    --ed-link-hover: #d6daf7;

    --bs-primary: var(--ed-primary);
    --bs-primary-rgb: var(--ed-primary-rgb);
    --bs-link-color: var(--ed-link);
    --bs-link-hover-color: var(--ed-link-hover);
    --bs-body-bg: var(--ed-canvas);
    --bs-body-color: var(--ed-text);
    --bs-border-color: var(--ed-border-strong);
}

html {
    color-scheme: dark;
}

/* ------------------------------------------------------------------------- */
/* Light workspace — putih bersih, netral, aksen navy (tanpa gold)           */
/* ------------------------------------------------------------------------- */
html:not(.dark-mode) {
    color-scheme: light;

    --ed-sidebar-bg: #ffffff;

    --ed-canvas: #ffffff;
    --ed-canvas-warm: #f8f9fb;
    --ed-bg-section: #f4f5f7;
    --ed-bg-deep: #ffffff;
    --ed-surface: #ffffff;
    --ed-surface-elevated: #ffffff;
    --ed-elevated: #f4f5f7;
    --ed-table-header: #eceef2;

    --ed-border: rgba(18, 17, 15, 0.08);
    --ed-border-strong: rgba(18, 17, 15, 0.12);

    --ed-text: #121110;
    --ed-text-secondary: #3d3c37;
    --ed-text-muted: #6a6862;

    --ed-primary: #454b7a;
    --ed-primary-hover: #3a3f68;
    --ed-primary-active: #2f3456;
    --ed-primary-rgb: 69, 75, 122;
    --ed-primary-soft: rgba(var(--ed-primary-rgb), 0.1);

    --ed-secondary-brand: #1a1916;
    --ed-accent-student: #454b7a;
    --ed-accent-sky: #4a5278;
    --ed-accent-highlight: #5c6288;
    --ed-champagne: #f0f2f6;
    --ed-glow-warm: 0 0 48px rgba(18, 17, 15, 0.04);
    --ed-glow-brand: 0 8px 28px rgba(var(--ed-primary-rgb), 0.14);

    --ed-success: #0d5c48;
    --ed-success-bg: #e6f5f0;
    --ed-warning: #8a5a12;
    --ed-warning-bg: #fdf6e8;
    --ed-danger: #a83228;
    --ed-danger-bg: #fdf0ee;
    --ed-info: #354a7a;
    --ed-info-bg: #eef1f9;

    --ed-shadow-sm: 0 1px 2px rgba(18, 17, 15, 0.05);
    --ed-shadow-md: 0 8px 24px rgba(18, 17, 15, 0.08);
    --ed-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 32px rgba(18, 17, 15, 0.09);
    --ed-shadow-elevated: 0 24px 56px rgba(18, 17, 15, 0.12);

    --ed-focus-ring: 0 0 0 3px rgba(var(--ed-primary-rgb), 0.26);
    --ed-focus-ring-inset: inset 0 0 0 2px rgba(var(--ed-primary-rgb), 0.38);

    --ed-link: #3d4370;
    --ed-link-hover: var(--ed-primary-hover);

    --bs-primary: var(--ed-primary);
    --bs-primary-rgb: var(--ed-primary-rgb);
    --bs-link-color: var(--ed-primary);
    --bs-link-hover-color: var(--ed-primary-hover);
    --bs-body-bg: var(--ed-canvas);
    --bs-body-color: var(--ed-text);
    --bs-border-color: var(--ed-border-strong);
}

/* Class retained for hundreds of layout/component overrides in inc/css.php */
html.dark-mode {
    color-scheme: dark;
}

body {
    font-family: var(--ed-font-ui);
    font-size: 16px;
    color: var(--ed-text);
    background-color: var(--ed-canvas) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ed-font-display);
    font-weight: 600;
    color: var(--ed-text);
}

.btn-primary {
    --bs-btn-bg: var(--ed-primary);
    --bs-btn-border-color: var(--ed-primary);
    --bs-btn-hover-bg: var(--ed-primary-hover);
    --bs-btn-hover-border-color: var(--ed-primary-hover);
    --bs-btn-active-bg: var(--ed-primary-active);
    --bs-btn-active-border-color: var(--ed-primary-active);
    --bs-btn-disabled-bg: var(--ed-primary);
    --bs-btn-disabled-border-color: var(--ed-primary);
    --bs-btn-color: #fafaf7;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color: var(--ed-link);
    --bs-btn-border-color: rgba(var(--ed-primary-rgb), 0.45);
    --bs-btn-hover-bg: rgba(var(--ed-primary-rgb), 0.22);
    --bs-btn-hover-border-color: var(--ed-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgba(var(--ed-primary-rgb), 0.28);
    --bs-btn-active-border-color: var(--ed-primary);
    --bs-btn-active-color: #fff;
}

html:not(.dark-mode) .btn-outline-primary {
    --bs-btn-color: var(--ed-primary);
    --bs-btn-border-color: var(--ed-primary);
    --bs-btn-hover-bg: var(--ed-primary-soft);
    --bs-btn-hover-border-color: var(--ed-primary);
    --bs-btn-hover-color: var(--ed-primary);
    --bs-btn-active-bg: var(--ed-primary-soft);
    --bs-btn-active-border-color: var(--ed-primary);
    --bs-btn-active-color: var(--ed-primary);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ed-text-secondary);
    --bs-btn-border-color: var(--ed-border-strong);
    --bs-btn-hover-bg: var(--ed-primary-soft);
    --bs-btn-hover-border-color: var(--ed-border-strong);
    --bs-btn-hover-color: var(--ed-link);
}

html:not(.dark-mode) .btn-outline-secondary {
    --bs-btn-hover-color: var(--ed-primary);
}

.btn-secondary {
    --bs-btn-bg: var(--ed-elevated);
    --bs-btn-border-color: var(--ed-border-strong);
    --bs-btn-hover-bg: var(--ed-surface-elevated);
    --bs-btn-hover-border-color: var(--ed-border-strong);
    --bs-btn-color: var(--ed-text);
}

html:not(.dark-mode) .btn-secondary {
    --bs-btn-bg: #45423c;
    --bs-btn-border-color: #45423c;
    --bs-btn-hover-bg: #3a3833;
    --bs-btn-hover-border-color: #3a3833;
    --bs-btn-color: #faf9f7;
}

.form-control,
.form-select {
    background-color: var(--ed-elevated);
    border-color: var(--ed-border-strong);
    color: var(--ed-text);
}

html:not(.dark-mode) .form-control,
html:not(.dark-mode) .form-select {
    background-color: var(--ed-surface);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ed-primary);
    box-shadow: var(--ed-focus-ring);
    background-color: var(--ed-elevated);
}

html:not(.dark-mode) .form-control:focus,
html:not(.dark-mode) .form-select:focus {
    background-color: var(--ed-surface);
}

.form-control::placeholder {
    color: var(--ed-text-muted);
}

.text-muted {
    color: var(--ed-text-muted) !important;
}

.progress {
    background-color: var(--ed-primary-soft);
}

.progress-bar {
    background-color: var(--ed-primary);
}

.badge.bg-primary {
    background-color: var(--ed-primary) !important;
}

.alert-success {
    background-color: var(--ed-success-bg);
    color: var(--ed-success);
    border-color: rgba(74, 210, 154, 0.28);
}

.alert-warning {
    background-color: var(--ed-warning-bg);
    color: var(--ed-warning);
    border-color: rgba(232, 192, 102, 0.28);
}

.alert-danger {
    background-color: var(--ed-danger-bg);
    color: var(--ed-danger);
    border-color: rgba(240, 136, 136, 0.28);
}

.alert-info {
    background-color: var(--ed-info-bg);
    color: var(--ed-info);
    border-color: rgba(140, 180, 255, 0.28);
}

html:not(.dark-mode) .alert-success {
    border-color: rgba(11, 110, 86, 0.25);
}

html:not(.dark-mode) .alert-warning {
    border-color: rgba(166, 95, 12, 0.25);
}

html:not(.dark-mode) .alert-danger {
    border-color: rgba(180, 35, 24, 0.25);
}

html:not(.dark-mode) .alert-info {
    border-color: rgba(42, 79, 143, 0.25);
}