/* ===============================
   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;
  --surface-dark-link-hover: #9BBEFF;

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

/* ===============================
   Dark Surface (Default)
   =============================== */

.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);
}

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

/* ===============================
   Light Surface (Default)
   =============================== */

.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);
}

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

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

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

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

/* ===============================
   Dark Surface (Force Variant)
   =============================== */

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

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

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

.surface-dark-force a:hover {
  color: var(--surface-dark-link-hover) !important;
}

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

/* ===============================
   Light Surface (Force Variant)
   =============================== */

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

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

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

.surface-light-force a:hover {
  color: var(--surface-light-link-hover) !important;
}

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