:root {
  color-scheme: dark;

  /* ===== Original color names (used in base.css / components.css / home frontend) ===== */
  --color-bg-primary: #0a0820;
  --color-bg-secondary: #14112c;
  --color-bg-soft: #14112c;
  --color-home-card: #15122e;
  --color-home-bg: #0a0820;
  --color-sidebar-panel: #17142f;
  --color-sidebar-rail: #0a0820;
  --color-bg-elevated: rgba(255,255,255,0.05);
  --color-bg-card: rgba(255,255,255,0.03);

  --color-home-purple: #7c5cff;
  --color-home-violet: #7c5cff;
  --color-home-pink: #ff4d9d;
  --color-home-pink-soft: rgba(255,77,157,0.1);
  --color-home-pink-glow: rgba(255,77,157,0.35);

  --color-border-default: rgba(255,255,255,0.06);
  --color-border-subtle: rgba(255,255,255,0.04);
  --color-border-strong: rgba(255,255,255,0.18);
  --color-home-card-border: rgba(255,255,255,0.06);
  --color-home-card-border-hover: rgba(255,255,255,0.14);
  --color-sidebar-panel-border: rgba(148,133,255,0.04);
  --color-border-glow: rgba(124,92,255,0.5);

  --color-text-primary: #ffffff;
  --color-text-secondary: #9ca3b4;
  --color-text-dim: #8b90a6;
  --color-text-muted: #5c6378;
  --color-muted-foreground: #9ca3b4;
  --foreground: #ffffff;

  --color-accent-green: #22c55e;
  --color-accent-lavender: #c4b5fd;
  --color-accent-cyan: #06b6d4;
  --color-accent-teal: #14b8a6;
  --color-accent-purple: #a855f7;
  --color-accent-pink: #ec4899;
  --color-accent-gold: #facc15;
  --color-accent-gold-deep: #eab308;
  --color-accent-blue: #3b82f6;
  --color-accent-red: #ef4444;
  --color-accent-orange: #f97316;

  --color-glow-purple: rgba(168,85,247,0.3);
  --color-glow-gold: rgba(250,204,21,0.35);

  --gradient-pink-purple: linear-gradient(135deg, #ff4d9d 0%, #7c5cff 100%);
  --gradient-purple-pink: linear-gradient(135deg, #7c5cff 0%, #ff4d9d 100%);
  --gradient-hero-bg: radial-gradient(ellipse at 50% 0%, rgba(124,92,255,0.15) 0%, transparent 60%);

  /* ===== ALIAS: short unprefixed names (used in dashboard.css + slot pages / post pages + rich editor) ===== */
  --bg-primary:      var(--color-bg-primary);
  --bg-secondary:    var(--color-bg-secondary);
  --bg-soft:         var(--color-bg-soft);
  --bg-elevated:     var(--color-bg-elevated);
  --bg-card:         var(--color-bg-card);
  --bg-tertiary:     #1d1a3a;
  --bg-input:        #17142f;
  --bg-dropdown:     #1a1638;
  --bg-dropdown-hover: rgba(124, 92, 255, 0.14);

  --sidebar-panel:   var(--color-sidebar-panel);
  --sidebar-rail:    var(--color-sidebar-rail);

  --text:            var(--color-text-primary);
  --text-primary:    var(--color-text-primary);
  --text-strong:     #ffffff;
  --text-secondary:  var(--color-text-secondary);
  --text-dim:        var(--color-text-dim);
  --text-muted:      var(--color-text-muted);
  --muted-foreground: var(--color-muted-foreground);

  --accent-green:    var(--color-accent-green);
  --accent-lavender: var(--color-accent-lavender);
  --accent-cyan:     var(--color-accent-cyan);
  --accent-teal:     var(--color-accent-teal);
  --accent-purple:   var(--color-accent-purple);
  --accent-pink:     var(--color-accent-pink);
  --accent-gold:     var(--color-accent-gold);
  --accent-blue:     var(--color-accent-blue);
  --accent-red:      var(--color-accent-red);
  --accent-orange:   var(--color-accent-orange);
  --gold:            var(--color-accent-gold);

  --border-default:  var(--color-border-default);
  --border-subtle:   var(--color-border-subtle);
  --border-strong:   var(--color-border-strong);
  --border-glow:     var(--color-border-glow);

  --glow-purple:     var(--color-glow-purple);
  --glow-gold:       var(--color-glow-gold);

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-home: 14px;

  --font-sans: "Inter", "Inter Fallback", "Rajdhani", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", "Rajdhani", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Space Grotesk Fallback", "Orbitron", system-ui, sans-serif;
  --font-rajdhani: "Rajdhani", "Rajdhani Fallback", system-ui, sans-serif;
  --font-orbitron: "Orbitron", "Orbitron Fallback", system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-condensed: "Rajdhani", "Rajdhani Fallback", system-ui, sans-serif;

  --shadow-card: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-glow-purple: 0 0 30px rgba(124,92,255,0.25);
  --shadow-glow-pink: 0 0 30px rgba(255,77,157,0.25);
  --shadow-drop-lg: 0 10px 40px rgba(0,0,0,0.4);

  --spacing: 0.25rem;

  --sidebar-collapsed: 4.25rem;
  --sidebar-expanded: 14rem;

  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --container-5xl: 64rem;
  --container-6xl: 72rem;
  --container-7xl: 80rem;

  --transition-fast: 150ms cubic-bezier(.4,0,.2,1);
  --transition-normal: 250ms cubic-bezier(.4,0,.2,1);
  --transition-slow: 400ms cubic-bezier(.4,0,.2,1);

  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
}

/* ===== GLOBAL OVERRIDE: semua SELECT / OPTION / DROPDOWN = DARK (NO WHITE BG!) ===== */
select,
select option,
select optgroup,
.re-select,
.re-select option,
.form-group select,
.form-group select option,
.crud-search select,
.modal-body select,
.settings-layout select,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="url"],
input[type="tel"],
input[type="color"],
textarea {
  background-color: var(--bg-input) !important;
  color: var(--text) !important;
  border-color: var(--border-default);
  scrollbar-color: var(--border-strong) var(--bg-secondary);
  color-scheme: dark !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}
select option:checked,
select option:hover,
.re-select option:checked,
.form-group select option:checked {
  background: linear-gradient(135deg, rgba(124,92,255,0.35), rgba(236,72,153,0.3)) !important;
  color: #ffffff !important;
}
select option:disabled, .re-select option:disabled, .form-group select option:disabled {
  color: var(--text-muted) !important;
  background: var(--bg-secondary) !important;
  opacity: 0.6;
}
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--border-default);
  background: var(--bg-input) !important;
  padding: 2px;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; background: var(--bg-input); border-radius: 8px; }
input[type="color"]::-webkit-color-swatch { border: none; border-radius: 6px; }
select::-ms-expand { filter: invert(1); }