/* Marcellis HTML template — shared visual contract for every page. */
:root {
  --bg: #f5f0e8;
  --panel: #fffaf1;
  --panel-2: #eee4d5;
  --panel2: #eee4d5;
  --line: #d4c7b5;
  --text: #1b252b;
  --cream: #1b252b;
  --muted: #161a22;
  --gold: #a96e13;
  --gold2: #a96e13;
  --accent: #a96e13;
  --accent2: #a96e13;
  --teal: #a96e13;
  --ink: #1b252b;
  --field: #fffdf8;
  --input: #fffdf8;
  --output: #fffdf8;
  --output-bg: #fffdf8;
  --soft: #a83f2c;
  --card: var(--panel);
  --dim: var(--muted);
  --hair: var(--line);
  --ac: var(--gold);
  --ac2: var(--gold2);
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #0d0f14;
  --panel: #161a22;
  --panel-2: #1c2130;
  --panel2: #1c2130;
  --line: #2a3040;
  --text: #ece6d8;
  --cream: #ece6d8;
  --muted: #ffffff;
  --gold: #c9a84c;
  --gold2: #e0c060;
  --accent: #c9a84c;
  --accent2: #c9a84c;
  --teal: #c9a84c;
  --ink: #ece6d8;
  --field: #161a22;
  --input: #161a22;
  --output: #0d0f14;
  --output-bg: #0d0f14;
  --soft: #e0c060;
  --card: var(--panel);
  --dim: var(--muted);
  --hair: var(--line);
  --ac: var(--gold);
  --ac2: var(--gold2);
  color-scheme: dark;
}

html, body {
  min-height: 100%;
}

body {
  background: radial-gradient(circle at 20% 0%, #e9d9b9 0, transparent 35%), linear-gradient(90deg, #e6ded2, #eee7dc 55%, #f8f3ea);
  color: var(--text);
  font-family: Georgia, serif;
}

html[data-theme="dark"] body {
  background: radial-gradient(circle at 80% 0%, #2a3040 0, transparent 35%), linear-gradient(135deg, #0d0f14, #161a22 55%, #1c2130);
}

body > .topbar:not([data-marcellis-toolbar]) {
  background: transparent;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body > .topbar:not([data-marcellis-toolbar]) .menu a,
body > .topbar:not([data-marcellis-toolbar]) .theme-toggle {
  background: transparent;
}

body a {
  color: var(--gold2);
}

body h1, body h2, body h3 {
  color: var(--gold2);
}

body p, body li, body label, body small, body .muted, body .hint, body .tip {
  color: var(--muted);
}

body button,
body input,
body select,
body textarea {
  border-color: var(--line);
  color: var(--text);
  background-color: var(--field);
}

/* Secondary controls keep readable text on dark panels. */
body button.btn.ghost,
body button.btn.mini.ghost,
body button.btn.out,
body button.theme,
body button.theme-toggle,
body button.secondary,
body .button.secondary {
  color: var(--text);
  background-color: transparent;
}

body button:hover,
body button:focus-visible,
body a:focus-visible,
body input:focus,
body select:focus,
body textarea:focus {
  border-color: var(--gold);
  outline-color: var(--gold);
}

body .card,
body .panel,
body .box,
body .hero,
body article,
body section {
  border-color: var(--line);
  background-color: var(--panel);
}

body .primary,
body .button:not(.secondary),
body button.primary {
  background-color: var(--gold);
  border-color: var(--gold);
  color: #161a22;
}

@media (max-width: 700px) {
  body .shell,
  body main {
    max-width: 100%;
  }
}