/* Global styles and tokens */
:root {
  --color-accent-1: #9fafd7;
  --color-accent-2: #f7e3df;
  --color-foreground: #1f2937;
  --color-background: #ffffff;
  --color-border: var(--color-foreground);
  --gradient-background: linear-gradient(
    180deg,
    var(--color-accent-1) 0%,
    var(--color-accent-2) 100%
  );
  --max-width: 72rem;
}

* {
  box-sizing: border-box;
}
html, body {
  padding: 0;
  margin: 0;
  min-height: 100%;
}
body {
  font-family:
    ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu,
    Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji",
    "Segoe UI Emoji";
  color: var(--color-foreground);
  background: var(--gradient-background);
  background-attachment: fixed;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1rem;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

header.site-header {
  backdrop-filter: blur(4px);
}
main {
  display: block;
}
footer.site-footer {
  opacity: 0.9;
}

.page {
  min-height: 100vh;
  width: 100%;
  background: var(--gradient-background);
  background-attachment: fixed;
}

.theme-bymola {
  --color-accent-1: #9fafd7;
  --color-accent-2: #f7e3df;
  --color-border: #1f2937;
  --gradient-background: linear-gradient(180deg, #9fafd7, #f7e3df);
}
.theme-openai {
  --color-accent-1: #10a37f;
  --color-accent-2: #e6f7f3;
  --color-border: #111827;
  --gradient-background: linear-gradient(180deg, #10a37f, #e6f7f3);
}
.theme-anthropic {
  --color-accent-1: #8b5cf6;
  --color-accent-2: #ede9fe;
  --color-border: #111827;
  --gradient-background: linear-gradient(180deg, #8b5cf6, #ede9fe);
}