/* ===============================
   Surface Color Variables
   =============================== */

:root {
  /* Dark surface */
  --surface-dark-bg: #0F1A40;
  --surface-dark-text: #C9D2F0;
  --surface-dark-text-muted: #9AA3C7;
  --surface-dark-heading: #FFFFFF;
  --surface-dark-link: #6FA8FF;

  /* Light surface */
  --surface-light-bg: #FDFDFD;
  --surface-light-text: #333333;
  --surface-light-text-muted: #6B7280;
  --surface-light-heading: #202124;
  --surface-light-link: #2563EB;
}

/* ===============================
   Dark Surface
   =============================== */

.surface-dark {
  background-color: var(--surface-dark-bg);
  color: var(--surface-dark-text);
}

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

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

/* ===============================
   Light Surface
   =============================== */

.surface-light {
  background-color: var(--surface-light-bg);
  color: var(--surface-light-text);
}

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

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

/* ===============================
   Muted Text
   =============================== */

.surface-dark .text-muted {
  color: var(--surface-dark-text-muted);
}

.surface-light .text-muted {
  color: var(--surface-light-text-muted);
}