/**
 * ============================================================
 * EduLab Interaktif
 * File        : assets/css/themes.css
 * Deskripsi   : Variabel tema visual global EduLab Interaktif.
 * Versi       : 1.0.0
 * Author      : EduLab Interaktif
 * ============================================================
 *
 * Fungsi file:
 * - Menyimpan design token utama platform.
 * - Menyediakan warna global aplikasi.
 * - Mendukung mode terang, gelap, dan nyaman.
 * - Menyediakan token shadow, radius, spacing, z-index, transisi,
 *   tipografi, gradient, dan warna komponen.
 *
 * Catatan:
 * - File ini hanya mengatur nilai visual.
 * - Logika pergantian tema diletakkan di:
 *   assets/js/theme/theme-engine.js
 *
 * Mode tema:
 * - light : terang
 * - dark  : gelap
 * - soft  : nyaman / sedang
 */

/* ============================================================
   1. Root Theme: Light Mode Default
============================================================ */

:root {
  /* ------------------------------------------------------------
     Identitas Tema
  ------------------------------------------------------------ */
  color-scheme: light;

  --edulab-theme-name: "light";
  --edulab-theme-label: "Terang";

  /* ------------------------------------------------------------
     Font Family
  ------------------------------------------------------------ */
  --font-primary:
    "Inter",
    "Nunito",
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    Arial,
    sans-serif;

  --font-display:
    "Poppins",
    "Inter",
    "Nunito",
    "Segoe UI",
    system-ui,
    sans-serif;

  --font-mono:
    "JetBrains Mono",
    "Fira Code",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  /* ------------------------------------------------------------
     Font Size
  ------------------------------------------------------------ */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* ------------------------------------------------------------
     Font Weight
  ------------------------------------------------------------ */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* ------------------------------------------------------------
     Line Height
  ------------------------------------------------------------ */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  /* ------------------------------------------------------------
     Letter Spacing
  ------------------------------------------------------------ */
  --tracking-tight: -0.04em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.08em;

  /* ------------------------------------------------------------
     EduLab Brand Colors
  ------------------------------------------------------------ */
  --color-brand-50: #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
  --color-brand-950: #172554;

  /* ------------------------------------------------------------
     Accent Colors
  ------------------------------------------------------------ */
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;

  --color-violet-50: #f5f3ff;
  --color-violet-100: #ede9fe;
  --color-violet-300: #c4b5fd;
  --color-violet-400: #a78bfa;
  --color-violet-500: #8b5cf6;
  --color-violet-600: #7c3aed;

  --color-emerald-50: #ecfdf5;
  --color-emerald-100: #d1fae5;
  --color-emerald-300: #6ee7b7;
  --color-emerald-400: #34d399;
  --color-emerald-500: #10b981;
  --color-emerald-600: #059669;

  --color-amber-50: #fffbeb;
  --color-amber-100: #fef3c7;
  --color-amber-300: #fcd34d;
  --color-amber-400: #fbbf24;
  --color-amber-500: #f59e0b;
  --color-amber-600: #d97706;

  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;

  /* ------------------------------------------------------------
     Neutral Colors
  ------------------------------------------------------------ */
  --color-white: #ffffff;
  --color-black: #000000;

  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;
  --color-slate-950: #020617;

  /* ------------------------------------------------------------
     Semantic Colors
  ------------------------------------------------------------ */
  --color-success: #10b981;
  --color-success-soft: #d1fae5;
  --color-success-strong: #047857;

  --color-warning: #f59e0b;
  --color-warning-soft: #fef3c7;
  --color-warning-strong: #b45309;

  --color-danger: #ef4444;
  --color-danger-soft: #fee2e2;
  --color-danger-strong: #b91c1c;

  --color-info: #3b82f6;
  --color-info-soft: #dbeafe;
  --color-info-strong: #1d4ed8;

  /* ------------------------------------------------------------
     Application Background
  ------------------------------------------------------------ */
  --color-background: #f8fafc;
  --color-background-soft: #eff6ff;
  --color-background-muted: #f1f5f9;
  --color-background-elevated: #ffffff;

  --color-surface: rgba(255, 255, 255, 0.88);
  --color-surface-solid: #ffffff;
  --color-surface-soft: rgba(255, 255, 255, 0.68);
  --color-surface-muted: rgba(248, 250, 252, 0.84);
  --color-surface-hover: rgba(255, 255, 255, 0.96);
  --color-surface-active: rgba(239, 246, 255, 0.96);

  /* ------------------------------------------------------------
     Text Colors
  ------------------------------------------------------------ */
  --color-text: #0f172a;
  --color-text-strong: #020617;
  --color-text-muted: #475569;
  --color-text-soft: #64748b;
  --color-text-inverse: #ffffff;
  --color-text-brand: #1d4ed8;

  /* ------------------------------------------------------------
     Border Colors
  ------------------------------------------------------------ */
  --color-border: rgba(148, 163, 184, 0.28);
  --color-border-strong: rgba(100, 116, 139, 0.36);
  --color-border-soft: rgba(203, 213, 225, 0.44);
  --color-border-focus: rgba(37, 99, 235, 0.72);

  /* ------------------------------------------------------------
     Link Colors
  ------------------------------------------------------------ */
  --color-link: #2563eb;
  --color-link-hover: #1d4ed8;
  --color-link-active: #1e40af;

  /* ------------------------------------------------------------
     Button Colors
  ------------------------------------------------------------ */
  --button-primary-bg: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  --button-primary-bg-hover: linear-gradient(135deg, #1d4ed8 0%, #6d28d9 100%);
  --button-primary-text: #ffffff;
  --button-primary-border: rgba(255, 255, 255, 0.2);

  --button-secondary-bg: rgba(255, 255, 255, 0.72);
  --button-secondary-bg-hover: rgba(255, 255, 255, 0.92);
  --button-secondary-text: #1e293b;
  --button-secondary-border: rgba(148, 163, 184, 0.28);

  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: rgba(37, 99, 235, 0.08);
  --button-ghost-text: #2563eb;

  /* ------------------------------------------------------------
     Card Colors
  ------------------------------------------------------------ */
  --card-bg: rgba(255, 255, 255, 0.78);
  --card-bg-hover: rgba(255, 255, 255, 0.94);
  --card-bg-active: rgba(239, 246, 255, 0.9);
  --card-border: rgba(148, 163, 184, 0.24);
  --card-border-hover: rgba(37, 99, 235, 0.38);

  /* ------------------------------------------------------------
     Header / Footer Colors
  ------------------------------------------------------------ */
  --header-bg: rgba(255, 255, 255, 0.72);
  --header-border: rgba(148, 163, 184, 0.22);
  --header-text: #0f172a;

  --footer-bg: rgba(255, 255, 255, 0.56);
  --footer-border: rgba(148, 163, 184, 0.2);
  --footer-text: #64748b;

  /* ------------------------------------------------------------
     Input Colors
  ------------------------------------------------------------ */
  --input-bg: rgba(255, 255, 255, 0.9);
  --input-bg-focus: #ffffff;
  --input-text: #0f172a;
  --input-placeholder: #94a3b8;
  --input-border: rgba(148, 163, 184, 0.34);
  --input-border-focus: #2563eb;

  /* ------------------------------------------------------------
     Badge Colors
  ------------------------------------------------------------ */
  --badge-bg: rgba(219, 234, 254, 0.8);
  --badge-text: #1d4ed8;
  --badge-border: rgba(96, 165, 250, 0.3);

  --badge-success-bg: rgba(209, 250, 229, 0.84);
  --badge-success-text: #047857;
  --badge-success-border: rgba(16, 185, 129, 0.28);

  --badge-warning-bg: rgba(254, 243, 199, 0.9);
  --badge-warning-text: #92400e;
  --badge-warning-border: rgba(245, 158, 11, 0.28);

  --badge-danger-bg: rgba(254, 226, 226, 0.9);
  --badge-danger-text: #b91c1c;
  --badge-danger-border: rgba(239, 68, 68, 0.26);

  /* ------------------------------------------------------------
     Educational Level Colors
  ------------------------------------------------------------ */
  --level-tk-bg: linear-gradient(135deg, #fef3c7 0%, #fecdd3 100%);
  --level-tk-accent: #f59e0b;

  --level-sd-bg: linear-gradient(135deg, #d1fae5 0%, #bfdbfe 100%);
  --level-sd-accent: #10b981;

  --level-smp-bg: linear-gradient(135deg, #dbeafe 0%, #c7d2fe 100%);
  --level-smp-accent: #2563eb;

  --level-sma-bg: linear-gradient(135deg, #ede9fe 0%, #cffafe 100%);
  --level-sma-accent: #7c3aed;

  --level-univ-bg: linear-gradient(135deg, #e0f2fe 0%, #f5f3ff 100%);
  --level-univ-accent: #0891b2;

  /* ------------------------------------------------------------
     Subject Colors
  ------------------------------------------------------------ */
  --subject-kimia-bg: linear-gradient(135deg, #ecfeff 0%, #ede9fe 100%);
  --subject-kimia-accent: #06b6d4;

  --subject-fisika-bg: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  --subject-fisika-accent: #2563eb;

  --subject-biologi-bg: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  --subject-biologi-accent: #10b981;

  --subject-matematika-bg: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  --subject-matematika-accent: #8b5cf6;

  --subject-bahasa-bg: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  --subject-bahasa-accent: #f97316;

  --subject-ips-bg: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  --subject-ips-accent: #d97706;

  --subject-ipa-bg: linear-gradient(135deg, #ecfeff 0%, #d1fae5 100%);
  --subject-ipa-accent: #0891b2;

  /* ------------------------------------------------------------
     Gradients
  ------------------------------------------------------------ */
  --gradient-brand: linear-gradient(135deg, #2563eb 0%, #7c3aed 50%, #06b6d4 100%);
  --gradient-hero: radial-gradient(circle at top left, rgba(37, 99, 235, 0.22), transparent 32%),
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.2), transparent 30%),
    linear-gradient(135deg, #f8fafc 0%, #eff6ff 45%, #f5f3ff 100%);
  --gradient-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.62));
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.4));
  --gradient-success: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fb7185 100%);
  --gradient-danger: linear-gradient(135deg, #ef4444 0%, #e11d48 100%);

  /* ------------------------------------------------------------
     Glassmorphism
  ------------------------------------------------------------ */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(255, 255, 255, 0.52);
  --glass-highlight: rgba(255, 255, 255, 0.82);
  --glass-blur: 18px;
  --glass-saturate: 160%;

  /* ------------------------------------------------------------
     Shadows
  ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 4px 12px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 10px 24px rgba(15, 23, 42, 0.1);
  --shadow-lg: 0 18px 48px rgba(15, 23, 42, 0.14);
  --shadow-xl: 0 26px 72px rgba(15, 23, 42, 0.18);

  --shadow-card: 0 18px 42px rgba(15, 23, 42, 0.1);
  --shadow-card-hover: 0 24px 64px rgba(37, 99, 235, 0.16);
  --shadow-button: 0 12px 28px rgba(37, 99, 235, 0.28);
  --shadow-focus: 0 0 0 4px rgba(37, 99, 235, 0.18);

  /* ------------------------------------------------------------
     Border Radius
  ------------------------------------------------------------ */
  --radius-none: 0;
  --radius-xs: 0.375rem;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-3xl: 2rem;
  --radius-full: 999px;

  --radius-card: var(--radius-2xl);
  --radius-button: var(--radius-full);
  --radius-input: var(--radius-xl);
  --radius-modal: var(--radius-3xl);

  /* ------------------------------------------------------------
     Spacing
  ------------------------------------------------------------ */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ------------------------------------------------------------
     Layout Width
  ------------------------------------------------------------ */
  --container-xs: 36rem;
  --container-sm: 48rem;
  --container-md: 64rem;
  --container-lg: 80rem;
  --container-xl: 90rem;
  --container-max: 1180px;

  --container-padding: clamp(1rem, 4vw, 2rem);

  /* ------------------------------------------------------------
     Header Height
  ------------------------------------------------------------ */
  --header-height: 76px;
  --header-height-compact: 64px;

  /* ------------------------------------------------------------
     Z Index
  ------------------------------------------------------------ */
  --z-background: -10;
  --z-base: 1;
  --z-content: 10;
  --z-header: 100;
  --z-dropdown: 200;
  --z-sticky: 300;
  --z-modal-backdrop: 800;
  --z-modal: 900;
  --z-toast: 1000;
  --z-tooltip: 1100;

  /* ------------------------------------------------------------
     Motion / Transition
  ------------------------------------------------------------ */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast: 140ms;
  --duration-normal: 220ms;
  --duration-slow: 360ms;
  --duration-slower: 600ms;

  --transition-fast: var(--duration-fast) var(--ease-standard);
  --transition-normal: var(--duration-normal) var(--ease-standard);
  --transition-slow: var(--duration-slow) var(--ease-standard);

  /* ------------------------------------------------------------
     Focus Ring
  ------------------------------------------------------------ */
  --focus-ring-color: rgba(37, 99, 235, 0.5);
  --focus-ring-width: 3px;
  --focus-ring-offset: 3px;

  /* ------------------------------------------------------------
     Overlay
  ------------------------------------------------------------ */
  --overlay-bg: rgba(15, 23, 42, 0.48);
  --overlay-bg-strong: rgba(15, 23, 42, 0.68);

  /* ------------------------------------------------------------
     Scrollbar
  ------------------------------------------------------------ */
  --scrollbar-track: rgba(226, 232, 240, 0.72);
  --scrollbar-thumb: rgba(100, 116, 139, 0.36);
  --scrollbar-thumb-hover: rgba(37, 99, 235, 0.48);

  /* ------------------------------------------------------------
     Selection
  ------------------------------------------------------------ */
  --selection-bg: rgba(37, 99, 235, 0.22);
  --selection-text: #0f172a;
}

/* ============================================================
   2. Dark Theme
   Aktif jika:
   <html data-theme="dark">
   atau
   <body data-theme="dark">
============================================================ */

:root[data-theme="dark"],
html[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;

  --edulab-theme-name: "dark";
  --edulab-theme-label: "Gelap";

  /* ------------------------------------------------------------
     Application Background
  ------------------------------------------------------------ */
  --color-background: #020617;
  --color-background-soft: #0f172a;
  --color-background-muted: #111827;
  --color-background-elevated: #111827;

  --color-surface: rgba(15, 23, 42, 0.82);
  --color-surface-solid: #0f172a;
  --color-surface-soft: rgba(15, 23, 42, 0.62);
  --color-surface-muted: rgba(30, 41, 59, 0.66);
  --color-surface-hover: rgba(30, 41, 59, 0.92);
  --color-surface-active: rgba(30, 64, 175, 0.38);

  /* ------------------------------------------------------------
     Text Colors
  ------------------------------------------------------------ */
  --color-text: #e5e7eb;
  --color-text-strong: #f8fafc;
  --color-text-muted: #cbd5e1;
  --color-text-soft: #94a3b8;
  --color-text-inverse: #020617;
  --color-text-brand: #93c5fd;

  /* ------------------------------------------------------------
     Border Colors
  ------------------------------------------------------------ */
  --color-border: rgba(148, 163, 184, 0.24);
  --color-border-strong: rgba(203, 213, 225, 0.34);
  --color-border-soft: rgba(100, 116, 139, 0.28);
  --color-border-focus: rgba(96, 165, 250, 0.74);

  /* ------------------------------------------------------------
     Link Colors
  ------------------------------------------------------------ */
  --color-link: #93c5fd;
  --color-link-hover: #bfdbfe;
  --color-link-active: #dbeafe;

  /* ------------------------------------------------------------
     Button Colors
  ------------------------------------------------------------ */
  --button-primary-bg: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --button-primary-bg-hover: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
  --button-primary-text: #ffffff;
  --button-primary-border: rgba(255, 255, 255, 0.16);

  --button-secondary-bg: rgba(15, 23, 42, 0.74);
  --button-secondary-bg-hover: rgba(30, 41, 59, 0.94);
  --button-secondary-text: #e5e7eb;
  --button-secondary-border: rgba(148, 163, 184, 0.28);

  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: rgba(96, 165, 250, 0.12);
  --button-ghost-text: #93c5fd;

  /* ------------------------------------------------------------
     Card Colors
  ------------------------------------------------------------ */
  --card-bg: rgba(15, 23, 42, 0.72);
  --card-bg-hover: rgba(30, 41, 59, 0.88);
  --card-bg-active: rgba(30, 64, 175, 0.3);
  --card-border: rgba(148, 163, 184, 0.22);
  --card-border-hover: rgba(96, 165, 250, 0.42);

  /* ------------------------------------------------------------
     Header / Footer Colors
  ------------------------------------------------------------ */
  --header-bg: rgba(2, 6, 23, 0.72);
  --header-border: rgba(148, 163, 184, 0.18);
  --header-text: #f8fafc;

  --footer-bg: rgba(2, 6, 23, 0.66);
  --footer-border: rgba(148, 163, 184, 0.16);
  --footer-text: #94a3b8;

  /* ------------------------------------------------------------
     Input Colors
  ------------------------------------------------------------ */
  --input-bg: rgba(15, 23, 42, 0.82);
  --input-bg-focus: rgba(30, 41, 59, 0.96);
  --input-text: #f8fafc;
  --input-placeholder: #64748b;
  --input-border: rgba(148, 163, 184, 0.28);
  --input-border-focus: #60a5fa;

  /* ------------------------------------------------------------
     Badge Colors
  ------------------------------------------------------------ */
  --badge-bg: rgba(30, 64, 175, 0.36);
  --badge-text: #bfdbfe;
  --badge-border: rgba(96, 165, 250, 0.3);

  --badge-success-bg: rgba(6, 95, 70, 0.36);
  --badge-success-text: #a7f3d0;
  --badge-success-border: rgba(52, 211, 153, 0.24);

  --badge-warning-bg: rgba(146, 64, 14, 0.34);
  --badge-warning-text: #fde68a;
  --badge-warning-border: rgba(251, 191, 36, 0.24);

  --badge-danger-bg: rgba(127, 29, 29, 0.34);
  --badge-danger-text: #fecaca;
  --badge-danger-border: rgba(248, 113, 113, 0.24);

  /* ------------------------------------------------------------
     Educational Level Colors
  ------------------------------------------------------------ */
  --level-tk-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.28) 0%, rgba(244, 63, 94, 0.26) 100%);
  --level-tk-accent: #fbbf24;

  --level-sd-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.26) 0%, rgba(59, 130, 246, 0.26) 100%);
  --level-sd-accent: #34d399;

  --level-smp-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.3) 0%, rgba(99, 102, 241, 0.28) 100%);
  --level-smp-accent: #60a5fa;

  --level-sma-bg: linear-gradient(135deg, rgba(124, 58, 237, 0.3) 0%, rgba(6, 182, 212, 0.24) 100%);
  --level-sma-accent: #a78bfa;

  --level-univ-bg: linear-gradient(135deg, rgba(8, 145, 178, 0.28) 0%, rgba(139, 92, 246, 0.26) 100%);
  --level-univ-accent: #22d3ee;

  /* ------------------------------------------------------------
     Subject Colors
  ------------------------------------------------------------ */
  --subject-kimia-bg: linear-gradient(135deg, rgba(6, 182, 212, 0.24) 0%, rgba(124, 58, 237, 0.24) 100%);
  --subject-kimia-accent: #22d3ee;

  --subject-fisika-bg: linear-gradient(135deg, rgba(37, 99, 235, 0.26) 0%, rgba(96, 165, 250, 0.18) 100%);
  --subject-fisika-accent: #60a5fa;

  --subject-biologi-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.24) 0%, rgba(52, 211, 153, 0.14) 100%);
  --subject-biologi-accent: #34d399;

  --subject-matematika-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.26) 0%, rgba(167, 139, 250, 0.18) 100%);
  --subject-matematika-accent: #a78bfa;

  --subject-bahasa-bg: linear-gradient(135deg, rgba(249, 115, 22, 0.24) 0%, rgba(251, 146, 60, 0.14) 100%);
  --subject-bahasa-accent: #fb923c;

  --subject-ips-bg: linear-gradient(135deg, rgba(217, 119, 6, 0.22) 0%, rgba(251, 191, 36, 0.14) 100%);
  --subject-ips-accent: #fbbf24;

  --subject-ipa-bg: linear-gradient(135deg, rgba(8, 145, 178, 0.24) 0%, rgba(16, 185, 129, 0.16) 100%);
  --subject-ipa-accent: #22d3ee;

  /* ------------------------------------------------------------
     Gradients
  ------------------------------------------------------------ */
  --gradient-brand: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #22d3ee 100%);
  --gradient-hero: radial-gradient(circle at top left, rgba(96, 165, 250, 0.22), transparent 34%),
    radial-gradient(circle at top right, rgba(167, 139, 250, 0.18), transparent 32%),
    linear-gradient(135deg, #020617 0%, #0f172a 52%, #111827 100%);
  --gradient-surface: linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(30, 41, 59, 0.58));
  --gradient-glass: linear-gradient(135deg, rgba(15, 23, 42, 0.72), rgba(30, 41, 59, 0.4));
  --gradient-success: linear-gradient(135deg, #10b981 0%, #22d3ee 100%);
  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #fb7185 100%);
  --gradient-danger: linear-gradient(135deg, #ef4444 0%, #fb7185 100%);

  /* ------------------------------------------------------------
     Glassmorphism
  ------------------------------------------------------------ */
  --glass-bg: rgba(15, 23, 42, 0.56);
  --glass-bg-strong: rgba(15, 23, 42, 0.76);
  --glass-border: rgba(148, 163, 184, 0.22);
  --glass-highlight: rgba(255, 255, 255, 0.08);
  --glass-blur: 20px;
  --glass-saturate: 150%;

  /* ------------------------------------------------------------
     Shadows
  ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 10px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.34);
  --shadow-xl: 0 26px 72px rgba(0, 0, 0, 0.42);

  --shadow-card: 0 18px 42px rgba(0, 0, 0, 0.28);
  --shadow-card-hover: 0 24px 64px rgba(37, 99, 235, 0.22);
  --shadow-button: 0 12px 30px rgba(96, 165, 250, 0.24);
  --shadow-focus: 0 0 0 4px rgba(96, 165, 250, 0.2);

  /* ------------------------------------------------------------
     Focus Ring
  ------------------------------------------------------------ */
  --focus-ring-color: rgba(96, 165, 250, 0.55);

  /* ------------------------------------------------------------
     Overlay
  ------------------------------------------------------------ */
  --overlay-bg: rgba(0, 0, 0, 0.56);
  --overlay-bg-strong: rgba(0, 0, 0, 0.78);

  /* ------------------------------------------------------------
     Scrollbar
  ------------------------------------------------------------ */
  --scrollbar-track: rgba(15, 23, 42, 0.72);
  --scrollbar-thumb: rgba(148, 163, 184, 0.34);
  --scrollbar-thumb-hover: rgba(96, 165, 250, 0.54);

  /* ------------------------------------------------------------
     Selection
  ------------------------------------------------------------ */
  --selection-bg: rgba(96, 165, 250, 0.28);
  --selection-text: #f8fafc;
}

/* ============================================================
   3. Soft Theme / Mode Nyaman
   Aktif jika:
   <html data-theme="soft">
   atau
   <body data-theme="soft">
============================================================ */

:root[data-theme="soft"],
html[data-theme="soft"],
body[data-theme="soft"] {
  color-scheme: light;

  --edulab-theme-name: "soft";
  --edulab-theme-label: "Nyaman";

  /* ------------------------------------------------------------
     Application Background
  ------------------------------------------------------------ */
  --color-background: #f7f3ea;
  --color-background-soft: #f4efe3;
  --color-background-muted: #ede7d8;
  --color-background-elevated: #fffaf0;

  --color-surface: rgba(255, 250, 240, 0.84);
  --color-surface-solid: #fffaf0;
  --color-surface-soft: rgba(255, 250, 240, 0.7);
  --color-surface-muted: rgba(246, 239, 225, 0.82);
  --color-surface-hover: rgba(255, 250, 240, 0.96);
  --color-surface-active: rgba(237, 233, 254, 0.86);

  /* ------------------------------------------------------------
     Text Colors
  ------------------------------------------------------------ */
  --color-text: #2f2a1f;
  --color-text-strong: #1f1a13;
  --color-text-muted: #6b5f4a;
  --color-text-soft: #857964;
  --color-text-inverse: #fffaf0;
  --color-text-brand: #5b4cc4;

  /* ------------------------------------------------------------
     Border Colors
  ------------------------------------------------------------ */
  --color-border: rgba(133, 121, 100, 0.24);
  --color-border-strong: rgba(107, 95, 74, 0.34);
  --color-border-soft: rgba(197, 184, 158, 0.38);
  --color-border-focus: rgba(124, 58, 237, 0.52);

  /* ------------------------------------------------------------
     Link Colors
  ------------------------------------------------------------ */
  --color-link: #5b4cc4;
  --color-link-hover: #4338ca;
  --color-link-active: #3730a3;

  /* ------------------------------------------------------------
     Button Colors
  ------------------------------------------------------------ */
  --button-primary-bg: linear-gradient(135deg, #5b4cc4 0%, #0891b2 100%);
  --button-primary-bg-hover: linear-gradient(135deg, #4338ca 0%, #0e7490 100%);
  --button-primary-text: #ffffff;
  --button-primary-border: rgba(255, 255, 255, 0.2);

  --button-secondary-bg: rgba(255, 250, 240, 0.78);
  --button-secondary-bg-hover: rgba(255, 250, 240, 0.96);
  --button-secondary-text: #2f2a1f;
  --button-secondary-border: rgba(133, 121, 100, 0.26);

  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: rgba(91, 76, 196, 0.1);
  --button-ghost-text: #5b4cc4;

  /* ------------------------------------------------------------
     Card Colors
  ------------------------------------------------------------ */
  --card-bg: rgba(255, 250, 240, 0.76);
  --card-bg-hover: rgba(255, 250, 240, 0.94);
  --card-bg-active: rgba(237, 233, 254, 0.84);
  --card-border: rgba(133, 121, 100, 0.22);
  --card-border-hover: rgba(91, 76, 196, 0.34);

  /* ------------------------------------------------------------
     Header / Footer Colors
  ------------------------------------------------------------ */
  --header-bg: rgba(255, 250, 240, 0.74);
  --header-border: rgba(133, 121, 100, 0.2);
  --header-text: #2f2a1f;

  --footer-bg: rgba(255, 250, 240, 0.58);
  --footer-border: rgba(133, 121, 100, 0.18);
  --footer-text: #857964;

  /* ------------------------------------------------------------
     Input Colors
  ------------------------------------------------------------ */
  --input-bg: rgba(255, 250, 240, 0.9);
  --input-bg-focus: #fffaf0;
  --input-text: #2f2a1f;
  --input-placeholder: #a49a86;
  --input-border: rgba(133, 121, 100, 0.3);
  --input-border-focus: #5b4cc4;

  /* ------------------------------------------------------------
     Badge Colors
  ------------------------------------------------------------ */
  --badge-bg: rgba(237, 233, 254, 0.8);
  --badge-text: #5b4cc4;
  --badge-border: rgba(124, 58, 237, 0.22);

  --badge-success-bg: rgba(209, 250, 229, 0.76);
  --badge-success-text: #047857;
  --badge-success-border: rgba(16, 185, 129, 0.22);

  --badge-warning-bg: rgba(254, 243, 199, 0.78);
  --badge-warning-text: #92400e;
  --badge-warning-border: rgba(245, 158, 11, 0.22);

  --badge-danger-bg: rgba(255, 228, 230, 0.78);
  --badge-danger-text: #be123c;
  --badge-danger-border: rgba(244, 63, 94, 0.22);

  /* ------------------------------------------------------------
     Educational Level Colors
  ------------------------------------------------------------ */
  --level-tk-bg: linear-gradient(135deg, #fef3c7 0%, #fde2e4 100%);
  --level-tk-accent: #d97706;

  --level-sd-bg: linear-gradient(135deg, #dcfce7 0%, #dbeafe 100%);
  --level-sd-accent: #059669;

  --level-smp-bg: linear-gradient(135deg, #dbeafe 0%, #ede9fe 100%);
  --level-smp-accent: #2563eb;

  --level-sma-bg: linear-gradient(135deg, #ede9fe 0%, #ecfeff 100%);
  --level-sma-accent: #7c3aed;

  --level-univ-bg: linear-gradient(135deg, #e0f2fe 0%, #f4e8ff 100%);
  --level-univ-accent: #0891b2;

  /* ------------------------------------------------------------
     Subject Colors
  ------------------------------------------------------------ */
  --subject-kimia-bg: linear-gradient(135deg, #ecfeff 0%, #f3e8ff 100%);
  --subject-kimia-accent: #0891b2;

  --subject-fisika-bg: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 100%);
  --subject-fisika-accent: #2563eb;

  --subject-biologi-bg: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  --subject-biologi-accent: #059669;

  --subject-matematika-bg: linear-gradient(135deg, #faf5ff 0%, #ede9fe 100%);
  --subject-matematika-accent: #7c3aed;

  --subject-bahasa-bg: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
  --subject-bahasa-accent: #ea580c;

  --subject-ips-bg: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  --subject-ips-accent: #ca8a04;

  --subject-ipa-bg: linear-gradient(135deg, #ecfeff 0%, #dcfce7 100%);
  --subject-ipa-accent: #0891b2;

  /* ------------------------------------------------------------
     Gradients
  ------------------------------------------------------------ */
  --gradient-brand: linear-gradient(135deg, #5b4cc4 0%, #0891b2 52%, #059669 100%);
  --gradient-hero: radial-gradient(circle at top left, rgba(91, 76, 196, 0.16), transparent 34%),
    radial-gradient(circle at top right, rgba(8, 145, 178, 0.14), transparent 32%),
    linear-gradient(135deg, #f7f3ea 0%, #f4efe3 45%, #f5f3ff 100%);
  --gradient-surface: linear-gradient(135deg, rgba(255, 250, 240, 0.86), rgba(255, 250, 240, 0.6));
  --gradient-glass: linear-gradient(135deg, rgba(255, 250, 240, 0.72), rgba(255, 250, 240, 0.42));
  --gradient-success: linear-gradient(135deg, #059669 0%, #0891b2 100%);
  --gradient-warning: linear-gradient(135deg, #d97706 0%, #e879f9 100%);
  --gradient-danger: linear-gradient(135deg, #e11d48 0%, #f97316 100%);

  /* ------------------------------------------------------------
     Glassmorphism
  ------------------------------------------------------------ */
  --glass-bg: rgba(255, 250, 240, 0.64);
  --glass-bg-strong: rgba(255, 250, 240, 0.78);
  --glass-border: rgba(255, 255, 255, 0.48);
  --glass-highlight: rgba(255, 255, 255, 0.72);
  --glass-blur: 16px;
  --glass-saturate: 130%;

  /* ------------------------------------------------------------
     Shadows
  ------------------------------------------------------------ */
  --shadow-xs: 0 1px 2px rgba(47, 42, 31, 0.05);
  --shadow-sm: 0 4px 12px rgba(47, 42, 31, 0.07);
  --shadow-md: 0 10px 24px rgba(47, 42, 31, 0.09);
  --shadow-lg: 0 18px 48px rgba(47, 42, 31, 0.12);
  --shadow-xl: 0 26px 72px rgba(47, 42, 31, 0.16);

  --shadow-card: 0 18px 42px rgba(47, 42, 31, 0.09);
  --shadow-card-hover: 0 24px 64px rgba(91, 76, 196, 0.14);
  --shadow-button: 0 12px 28px rgba(91, 76, 196, 0.24);
  --shadow-focus: 0 0 0 4px rgba(91, 76, 196, 0.16);

  /* ------------------------------------------------------------
     Focus Ring
  ------------------------------------------------------------ */
  --focus-ring-color: rgba(91, 76, 196, 0.44);

  /* ------------------------------------------------------------
     Overlay
  ------------------------------------------------------------ */
  --overlay-bg: rgba(47, 42, 31, 0.42);
  --overlay-bg-strong: rgba(47, 42, 31, 0.64);

  /* ------------------------------------------------------------
     Scrollbar
  ------------------------------------------------------------ */
  --scrollbar-track: rgba(237, 231, 216, 0.8);
  --scrollbar-thumb: rgba(133, 121, 100, 0.34);
  --scrollbar-thumb-hover: rgba(91, 76, 196, 0.44);

  /* ------------------------------------------------------------
     Selection
  ------------------------------------------------------------ */
  --selection-bg: rgba(91, 76, 196, 0.2);
  --selection-text: #1f1a13;
}

/* ============================================================
   4. System Preference Fallback
   Jika belum ada data-theme manual, ikuti preferensi sistem.
============================================================ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  html:not([data-theme]) body:not([data-theme]) {
    color-scheme: dark;
  }
}

/* ============================================================
   5. High Contrast Support
============================================================ */

@media (prefers-contrast: more) {
  :root {
    --color-border: rgba(15, 23, 42, 0.58);
    --color-border-strong: rgba(15, 23, 42, 0.78);
    --card-border: rgba(15, 23, 42, 0.5);
    --button-secondary-border: rgba(15, 23, 42, 0.48);
    --focus-ring-width: 4px;
  }

  html[data-theme="dark"],
  body[data-theme="dark"] {
    --color-border: rgba(226, 232, 240, 0.6);
    --color-border-strong: rgba(248, 250, 252, 0.78);
    --card-border: rgba(226, 232, 240, 0.48);
    --button-secondary-border: rgba(226, 232, 240, 0.48);
  }
}

/* ============================================================
   6. Reduced Transparency Support
============================================================ */

@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: var(--color-surface-solid);
    --glass-bg-strong: var(--color-surface-solid);
    --glass-blur: 0;
    --color-surface: var(--color-surface-solid);
    --card-bg: var(--color-surface-solid);
    --header-bg: var(--color-surface-solid);
    --footer-bg: var(--color-surface-solid);
  }
}

/* ============================================================
   7. Reduced Motion Support
============================================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-normal: 1ms;
    --duration-slow: 1ms;
    --duration-slower: 1ms;

    --transition-fast: 1ms linear;
    --transition-normal: 1ms linear;
    --transition-slow: 1ms linear;
  }
}

/* ============================================================
   8. Print Theme
============================================================ */

@media print {
  :root,
  html,
  body {
    color-scheme: light;

    --color-background: #ffffff;
    --color-background-soft: #ffffff;
    --color-background-muted: #ffffff;
    --color-background-elevated: #ffffff;

    --color-surface: #ffffff;
    --color-surface-solid: #ffffff;
    --color-surface-soft: #ffffff;
    --color-surface-muted: #ffffff;
    --color-surface-hover: #ffffff;
    --color-surface-active: #ffffff;

    --color-text: #000000;
    --color-text-strong: #000000;
    --color-text-muted: #333333;
    --color-text-soft: #555555;
    --color-text-inverse: #ffffff;

    --color-border: #cccccc;
    --color-border-strong: #999999;
    --color-border-soft: #dddddd;

    --card-bg: #ffffff;
    --card-border: #cccccc;

    --header-bg: #ffffff;
    --footer-bg: #ffffff;

    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
    --shadow-card: none;
    --shadow-card-hover: none;
    --shadow-button: none;
    --shadow-focus: none;

    --glass-bg: #ffffff;
    --glass-bg-strong: #ffffff;
    --glass-border: #cccccc;
    --glass-blur: 0;
  }
}