@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans+Thai:wght@100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sono:wght@200..800&display=swap');

:root {
  color-scheme: dark;
  --bg: #282828;
  --surface: #32302f;
  --surface-raised: #3c3836;
  --border: #504945;
  --border-strong: #665c54;
  --text: #ebdbb2;
  --text-muted: #d5c4a1;
  --heading-1: #ebdbb2;
  --heading-2: #b8bb26;
  --heading-3: #d3869b;
  --heading-4: #fabd2f;
  --accent: #fabd2f;
  --accent-cool: #83a598;
  --accent-soft: #8ec07c;
  --strong: #fb4934;
  --code-bg: #303030;
  --code-text: #fabd2f;
  --shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #fbf7ef;
  --surface: #fffaf0;
  --surface-raised: #f2e5bc;
  --border: #d5c4a1;
  --border-strong: #bdae93;
  --text: #3c3836;
  --text-muted: #665c54;
  --heading-1: #282828;
  --heading-2: #79740e;
  --heading-3: #8f3f71;
  --heading-4: #af3a03;
  --accent: #b57614;
  --accent-cool: #076678;
  --accent-soft: #427b58;
  --strong: #9d0006;
  --code-bg: #f2e5bc;
  --code-text: #af3a03;
  --shadow: 0 4px 15px rgba(60, 56, 54, 0.14);
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: "Playpen Sans Thai", sans-serif;
  font-size: 14pt;
  max-width: 950px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  color: var(--heading-1);
}

h2 {
  color: var(--heading-2);
}

h3 {
  color: var(--heading-3);
}

h4 {
  color: var(--heading-4);
}

pre,
code {
  font-family: "Sono", monospace;
  background-color: var(--code-bg);
  color: var(--code-text);
  padding: 2px 4px;
  border-radius: 4px;
}

pre code {
  display: block;
  padding: 10px;
  overflow-x: auto;
}

blockquote {
  color: var(--accent);
}

a {
  color: var(--accent);
  text-decoration: none;
}

table {
  border-collapse: collapse;
}

table th,
table td {
  border: 1px solid var(--accent);
  padding: 5px;
}

strong,
b {
  color: var(--strong);
}

img {
  max-width: 500px;
  width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
  border-radius: 8px;
  border: 2px solid var(--surface-raised);
  box-shadow: var(--shadow);
}

.theme-toggle {
  position: sticky;
  top: 12px;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.theme-toggle button {
  min-width: 116px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-family: "Playpen Sans Thai", sans-serif;
  font-size: 0.9rem;
  padding: 7px 12px;
  box-shadow: var(--shadow);
}

.theme-toggle button:hover {
  border-color: var(--accent);
}

@media (max-width: 600px) {
  body {
    padding: 14px;
  }

  img {
    border-width: 1px;
    margin: 15px auto;
  }

  .theme-toggle {
    top: 8px;
  }
}