/* === THEME TOKENS === */
:root {
  /* Light (your original palette) */
  --bg: #4B5842;
  --fg: #C7D59F;

  --top-bg: #8FB339;      /* .top bg */
  --top-fg: #8FB339;

  --header-bg: #B7CE63;   /* #header bg/fg */
  --header-fg: #4B5842;

  --banner-bg: #4B5842;   /* #banner bg/fg */
  --banner-fg: #C7D59F;

  --main-bg: #C7D59F;     /* #main bg/fg */
  --main-fg: #4B5842;

  --link: #b71c1c;        /* links */
  --link-visited: #af4448;
  --link-hover-shadow: #ef5350;
}

/* Dark theme overrides */
:root[data-theme="dark"] {
  --bg: #1E2515;        /* deep olive, almost black */
  --fg: #D8E7A8;        /* pale apple highlight for text */

  --top-bg: #7DA02F;    /* apple mid-green */
  --top-fg: #7DA02F;

  --header-bg: #9DBB3E; /* warm yellow-green */
  --header-fg: #1E2515;

  --banner-bg: #2A341B; /* olive shadow */
  --banner-fg: #D8E7A8;

  --main-bg: #2F3B20;   /* softer olive for content blocks */
  --main-fg: #E1F0B2;   /* slightly warmer pale green */

  --link: #C74343;         /* apple blush red */
  --link-visited: #A13535; /* darker blush */
  --link-hover-shadow: #FF6F6F; /* brighter red glow */
}


/* Respect system if user chooses “system” or no choice is set. 
   We’ll toggle data-theme via JS; when it's "system", we just
   don’t set data-theme and let this media query kick in. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  --bg: #1E2515;        /* deep olive, almost black */
  --fg: #D8E7A8;        /* pale apple highlight for text */

  --top-bg: #7DA02F;    /* apple mid-green */
  --top-fg: #7DA02F;

  --header-bg: #9DBB3E; /* warm yellow-green */
  --header-fg: #1E2515;

  --banner-bg: #2A341B; /* olive shadow */
  --banner-fg: #D8E7A8;

  --main-bg: #2F3B20;   /* softer olive for content blocks */
  --main-fg: #E1F0B2;   /* slightly warmer pale green */

  --link: #C74343;         /* apple blush red */
  --link-visited: #A13535; /* darker blush */
  --link-hover-shadow: #FF6F6F; /* brighter red glow */
  }
}

/* stronger base override */
html, body {
  background-color: var(--bg) !important;
  color: var(--fg);
}

/* ensure wrappers aren't painting white */
.container-fluid, .box {
  background: transparent !important;
}

/* === YOUR STYLES, NOW USING VARS === */
body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: 'Roboto Mono', monospace;
  margin: 2%;
}

li {
  font-size: 15px;
  font-weight: bold;
}

.top {
  background-color: var(--top-bg);
  color: var(--top-fg);
  border-radius: 5px 5px 0 0;
}

.bottom {
  border-radius: 0 0 5px 5px;
  margin: 0 0 2% 0;
}

#header {
  padding: 3%;
  background-color: var(--header-bg);
  color: var(--header-fg);
  font-family: 'Proza Libre', sans-serif;
}

#banner {
  font-family: 'Proza Libre', sans-serif;
  background-color: var(--banner-bg);
  color: var(--banner-fg);
}

#main {
  background-color: var(--main-bg);
  color: var(--main-fg);
  padding: 2%;
}

a:link    { color: var(--link); }
a:visited { color: var(--link-visited); }
a:hover   { text-decoration: none; text-shadow: 1px -1px var(--link-hover-shadow); }

/* Tiny toggle styling (optional) */
.theme-toggle {
  display: inline-flex;
  gap: .5rem;
  align-items: center;
  font: 600 12px system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: transparent;
  color: var(--fg);
  border: 1px solid color-mix(in oklab, var(--fg) 30%, transparent);
  padding: .35rem .6rem;
  border-radius: 999px;
  cursor: pointer;
}
.theme-toggle:hover { opacity: .9; }
.theme-toggle .mode {
  opacity: .7;
  font-weight: 500;
}

/* ==== layout/card tweaks ==== */

/* a lightweight wrapper to center vertically-ish and horizontally */
.page-wrap {
  min-height: 100dvh;
  display: grid;
  place-content: start center; /* top-ish, centered */
  padding: clamp(16px, 4vw, 48px);
}

/* your main box becomes a card */
.container-fluid.box {
  width: min(860px, 92vw);             /* cap width, stay responsive */
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;                    /* so the rounded corners apply to children */
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
  background: transparent;             /* sections carry color */
}

/* make the “MIAU” bars slim accents, not massive blocks */
.top {
  background-color: var(--top-bg);
  color: var(--top-fg);
  height: 10px;                        /* thin stripe */
  border-radius: 14px 14px 0 0;
}
.top.bottom {
  border-radius: 0 0 14px 14px;
  margin: 0;
}

/* tighten paddings so it hugs content */
#header {
  padding: clamp(16px, 3vw, 28px);
}
#banner {
  padding: 10px 20px;
}
#main {
  padding: 16px 20px;
}

/* trim headline/link spacing */
#header h1 {
  margin: 0 0 6px 0;
  font-weight: 700;
}
#header h4 {
  margin: 0;
}

/* make the banner label look intentional */
#banner h3 {
  margin: 0;
  letter-spacing: .08em;
  font-weight: 700;
}

/* list: remove bullets and tighten */
#main ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
#main li + li {
  margin-top: 6px;
}

/* keep the toggle tidy on one line and out of the way */
.theme-toggle {
  float: right;
  margin-left: 8px;
  transform: translateY(-2px);
}

/* ensure outer wrappers aren’t painting white */
.container-fluid, .box { background: transparent; }

/* body/html override to beat Bootstrap defaults */
html, body { background-color: var(--bg) !important; color: var(--fg); }

/* small screens: add a little breathing room */
@media (max-width: 420px) {
  #header { padding: 14px; }
  #main   { padding: 14px; }
  #banner { padding: 8px 14px; }
}

.material-symbols-outlined {
  font-size: 2rem;
  vertical-align: middle;
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--fg) 30%, transparent);
  background: transparent;
  color: var(--bg);
  cursor: pointer;
}
.theme-toggle:hover { opacity: .9; }