:root {

  /* LIGHT */
  --bg-light: #ffffff;
  --text-light: #111111;
  --heading-light: #0f172a;
  --link-light: #2563eb;
  --border-light: #e5e7eb;
  --btn-bg-light: #2563eb;
  --btn-text-light: #ffffff;
  --input-bg-light: #ffffff;
  --input-text-light: #111111;

  /* DARK */
  --bg-dark: #020617;
  --text-dark: #e5e7eb;
  --heading-dark: #f8fafc;
  --link-dark: #60a5fa;
  --border-dark: #334155;
  --btn-bg-dark: #3b82f6;
  --btn-text-dark: #ffffff;
  --input-bg-dark: #020617;
  --input-text-dark: #e5e7eb;
}

/* ===== LIGHT MODE ===== */
body {
  background: var(--bg-light);
  color: var(--text-light);
}

h1,h2,h3,h4,h5,h6 {
  color: var(--heading-light);
}

a {
  color: var(--link-light);
}

button,
input[type="submit"],
.wp-block-button__link {
  background: var(--btn-bg-light);
  color: var(--btn-text-light);
  border: 1px solid var(--border-light);
}

input, textarea, select {
  background: var(--input-bg-light);
  color: var(--input-text-light);
  border: 1px solid var(--border-light);
}

/* ===== DARK MODE ===== */
body.udm-dark {
  background: var(--bg-dark);
  color: var(--text-dark);
}

body.udm-dark h1,
body.udm-dark h2,
body.udm-dark h3,
body.udm-dark h4,
body.udm-dark h5,
body.udm-dark h6 {
  color: var(--heading-dark);
}

body.udm-dark a {
  color: var(--link-dark);
}

body.udm-dark button,
body.udm-dark input[type="submit"],
body.udm-dark .wp-block-button__link {
  background: var(--btn-bg-dark);
  color: var(--btn-text-dark);
  border-color: var(--border-dark);
}

body.udm-dark input,
body.udm-dark textarea,
body.udm-dark select {
  background: var(--input-bg-dark);
  color: var(--input-text-dark);
  border-color: var(--border-dark);
}