/* ===================================================
   CentralStore Dark Mode - Design System Version
   NO HACKS - NO COLOR BREAKING - SCALE READY
=================================================== */

/* =========================
   1. DESIGN TOKENS
========================= */

html[data-theme="dark"] {
  --bg: #121212;
  --surface: #1a1a1a;
  --surface-2: #222222;

  --text: #e6e6e6;
  --text-muted: #a0a0a0;
  --text-disabled: #666666;

  --border: #2a2a2a;

  --primary: #FF0032;
  --primary-hover: #ff3355;
}

/* =========================
   2. GLOBAL LAYOUT
========================= */

html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

/* containers */
html[data-theme="dark"] .mcb-section,
html[data-theme="dark"] .mcb-wrap,
html[data-theme="dark"] .column,
html[data-theme="dark"] .section_wrapper {
  background: var(--surface);
}

/* =========================
   3. TEXT SYSTEM
========================= */

html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] li,
html[data-theme="dark"] div {
  color: var(--text);
}

/* headings */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: var(--text);
}

/* muted text */
html[data-theme="dark"] .muted,
html[data-theme="dark"] .description,
html[data-theme="dark"] small {
  color: var(--text-muted);
}

/* =========================
   4. LINKS (KEEP BRAND SAFE)
========================= */

html[data-theme="dark"] a {
  color: var(--primary);
}

html[data-theme="dark"] a:hover {
  color: var(--primary-hover);
}

/* =========================
   5. FORMS (FIX BIG PROBLEM)
========================= */

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted);
}

/* focus state */
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
  border-color: var(--primary);
  outline: none;
}

/* =========================
   6. BUTTONS
========================= */

html[data-theme="dark"] button,
html[data-theme="dark"] .button,
html[data-theme="dark"] input[type="submit"] {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

html[data-theme="dark"] button:hover,
html[data-theme="dark"] .button:hover {
  background: #2a2a2a;
}

/* primary buttons */
html[data-theme="dark"] .button.primary {
  background: var(--primary);
  color: #fff;
  border: none;
}

/* =========================
   7. CARDS / PRODUCTS
========================= */

html[data-theme="dark"] .card,
html[data-theme="dark"] .box,
html[data-theme="dark"] .widget,
html[data-theme="dark"] .post-item,
html[data-theme="dark"] .product {
  background: var(--surface-2);
  border: 1px solid var(--border);
}

/* =========================
   8. TABLES
========================= */

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: var(--border);
  background: var(--surface-2);
}

html[data-theme="dark"] th {
  background: var(--surface);
}

/* =========================
   9. SVG / ICON FIX
========================= */

html[data-theme="dark"] svg {
  fill: currentColor;
  stroke: currentColor;
}

/* =========================
   10. TRANSITIONS (SMOOTH UI)
========================= */

html[data-theme] body,
html[data-theme] body * {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}