/* =============================================================
   STYLE: "default" — MAIN layer
   Loaded on every page, regardless of dark/light mode.
   Put ALL your structural/layout CSS here (spacing, grid,
   typography sizing, component structure). Use var(--xxx) for
   any COLOR so that dark/style.css and light/style.css can
   swap the palette instantly, with no reload.
   ============================================================= */

/* -------- Reset (same as before) -------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; padding: 0; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; }

/* -------- Base, driven entirely by CSS variables -------- */
body {
  background: var(--cc-bg);
  color: var(--cc-text);
  font-family: system-ui, -apple-system, sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}

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

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 20px;
}

.site-header,
.site-footer {
  background: var(--cc-surface);
  border-color: var(--cc-border);
}

/* -------- [DisplayMode] toggle button — structural part -------- */
.codecanvas-mode-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--cc-border);
  background: var(--cc-surface);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}

.codecanvas-mode-toggle .mode-icon-dark,
.codecanvas-mode-toggle .mode-icon-light {
  display: none;
}
/* Show sun when in dark mode (click to go light), moon when in light mode */
html.codecanvas-mode-dark .codecanvas-mode-toggle .mode-icon-light { display: inline; }
html.codecanvas-mode-light .codecanvas-mode-toggle .mode-icon-dark { display: inline; }

/* -------- Your structural CSS starts below this line -------- */