/* ============================================================
   M.ai.K.R — Styles (Compatibility Layer)
   Imports dark-premium.css as the single design system.
   All pages referencing this file will get the dark theme.
   ============================================================ */

/* Import the canonical design system */
@import url('dark-premium.css');

/* ============================================================
   Legacy compatibility: map old class names to dark premium.
   These rules ensure pages built with the old light theme
   still look correct under the dark premium system.
   ============================================================ */

/* Force dark background on all pages using this stylesheet */
body {
  background: var(--void) !important;
  color: var(--white) !important;
  font-family: var(--font-main) !important;
}

/* Override any light-theme backgrounds */
.lp-section, .section, .card, .panel, .container, main, .main-content {
  background: var(--gunmetal) !important;
  color: var(--white) !important;
}

/* Links */
a { color: var(--plasma); }
a:hover { color: var(--amber); }

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--white) !important;
  font-family: var(--font-accent);
}

/* Form elements */
input, textarea, select {
  background: var(--steel) !important;
  color: var(--white) !important;
  border: 1px solid var(--muted) !important;
  border-radius: 8px;
  padding: 10px 14px;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--amber) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--amber-dim);
}

/* Buttons */
button, .btn, .button {
  background: var(--amber) !important;
  color: var(--void) !important;
  border: none !important;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  cursor: pointer;
}

button:hover, .btn:hover { opacity: 0.9; }

/* Tables */
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--steel); padding: 10px 14px; text-align: left; }
th { background: var(--gunmetal); color: var(--amber); }
tr:nth-child(even) { background: rgba(45, 45, 68, 0.3); }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--steel); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* Matrix canvas — don't hide it */
#matrixCanvas { display: block !important; }

/* Hide any legacy light-theme-only elements */
.legacy-light-only { display: none !important; }