/* --------------------------------------------------------------------------
 * 1. CSS Variables: Fonts and Design Tokens
 * ------------------------------------------------------------------------*/
@font-face {
  font-family: 'color-emoji';
  src: local('Apple Color Emoji'), local('Segoe UI Emoji'), local('Segoe UI Symbol'), local('Noto Color Emoji');
}

:root {
  --font-mono: 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace, 'color-emoji';

  --duration-transition: 0.3s;

  /* Light Theme Tokens */
  --light-bg: #74baef;
  --light-surface: #dfe3dd;
  --light-text: #111111;
  --light-link: #08469e;
  --light-link-visited: #c40d6e;
  --light-border: #454b3c;
  --light-emoji-bg: #ffffff;

  /* Dark Theme Tokens */
  --dark-bg: #040f35;
  --dark-surface: #032821;
  --dark-text: #72f73a;
  --dark-link: #5595ef;
  --dark-link-visited: #f89acc;
  --dark-border: #b2cb8c;
  --dark-emoji-bg: #ffffff;

  /* Active Theme Aliases (default to light) */
  --bg: var(--light-bg);
  --surface: var(--light-surface);
  --text: var(--light-text);
  --link: var(--light-link);
  --link-visited: var(--light-link-visited);
  --border: var(--light-border);
  --emoji-bg: var(--light-emoji-bg);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--dark-bg);
    --surface: var(--dark-surface);
    --text: var(--dark-text);
    --link: var(--dark-link);
    --link-visited: var(--dark-link-visited);
    --border: var(--dark-border);
    --emoji-bg: var(--dark-emoji-bg);
  }
}

[data-color-mode='light'] {
  --bg: var(--light-bg);
  --surface: var(--light-surface);
  --text: var(--light-text);
  --link: var(--light-link);
  --link-visited: var(--light-link-visited);
  --border: var(--light-border);
  --emoji-bg: var(--light-emoji-bg);
}

[data-color-mode='dark'] {
  --bg: var(--dark-bg);
  --surface: var(--dark-surface);
  --text: var(--dark-text);
  --link: var(--dark-link);
  --link-visited: var(--dark-link-visited);
  --border: var(--dark-border);
  --emoji-bg: var(--dark-emoji-bg);
}

html {
  padding: 0;
  font-family: var(--font-mono);
  background-color: var(--bg);
  background-image: url(/images/noiseTexture-min.png);
  transition:
    background-color var(--duration-transition) ease,
    color var(--duration-transition) ease;
}

body {
  font-size: 14pt;
  line-height: 1.5em;
  letter-spacing: 1pt;
  margin: 0 0.5em;
  padding: 0.25em 0.5em 2em 0.5em;
  max-width: 35em;
  box-sizing: border-box;
  border-color: var(--border);
  border-width: 0.0625em 0.5em 0.125em 0.25em;
  border-style: solid solid solid dashed;
  border-radius: 0 1em 1em 0;
  box-shadow: 0.125em 0.125em 0.125em var(--border);
  background-color: var(--surface);
  color: var(--text);
  opacity: 0.8;
  transition:
    background-color var(--duration-transition) ease,
    color var(--duration-transition) ease,
    border-color var(--duration-transition) ease,
    box-shadow var(--duration-transition) ease;
}

h1 {
  margin: 0.5em 0.125em 0 -0.125em;
  padding: 0.25em;
  letter-spacing: 2pt;
  font-size: 150%;
  line-height: 1.5;
  background-color: var(--bg);
  border-radius: 0 0.1em 0.1em 0;
  box-shadow: 0.125em 0.125em 0.125em var(--border);
  display: inline-block;
  transition:
    background-color var(--duration-transition) ease,
    box-shadow var(--duration-transition) ease;
}

h1 a:link {
  text-underline-offset: 0.25em;
}

h2 {
  margin: 1.5em 0 0.5em 0;
}

p,
ul,
li,
aside {
  margin: 1em 0 0.5em 0;
  line-height: 1.5em;
}

ul {
  padding: 0;
  list-style: none;
}

a:link {
  color: var(--link);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.2em;
}

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

a:hover {
  color: var(--text);
  text-decoration-line: none;
  font-weight: bold;
}

a:active {
  color: var(--link-visited);
}

a:link,
a:visited,
a:hover,
a:active {
  transition: none;
}

strong {
  background-color: var(--text);
  color: var(--bg);
}

s {
  text-decoration-thickness: 0.125em;
  text-decoration-color: var(--border);
  transition:
    text-decoration-color var(--duration-transition) ease;
}

.emoji {
  background-color: var(--emoji-bg);
  padding: 0.125em;
  border-radius: 0.125em;
  transition:
    background-color var(--duration-transition) ease;
}

hr {
  border-width: 0.5em 0 0 0;
  border-style: dashed;
  border-color: var(--border);
  margin: 2em 0;
  transition:
    border-color var(--duration-transition) ease;
}

button {
  margin: 2em 0 0 0;
  padding: 0.25em 0.5em;
  font-family: var(--font-mono);
  font-weight: bold;
  letter-spacing: 2pt;
  box-shadow: 0.125em 0.125em 0.125em var(--bg);
  background-color: var(--surface);
  color: var(--text);
  border-style: none;
  border-radius: 0.25em;
  cursor: pointer;
  transition:
    background-color var(--duration-transition) ease,
    color var(--duration-transition) ease;
}

figure {
  margin: 0.5em 0;
  padding: 0;
  display: inline-block;
  overflow: hidden;
  box-shadow: 0.5em 0.5em 0.5em var(--border);
  transition:
    box-shadow var(--duration-transition) ease;
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
  transform-origin: center;
  transition:
    transform var(--duration-transition) ease;
}

figure:hover img {
  transform: scale(1.02); /* Zoom in slightly */
}

aside {
  text-align: center;
}

pre {
  font-family: var(--font-mono);
}

.duck-ascii-art {
  text-align: left;
  width: 10em;
  margin: auto;

}

@media screen and (min-width: 768px) {
  body {
    font-size: 16pt;
    margin: 1em 2em;
    padding: 1em 1.5em;
  }

  header {
    margin: 0.5em 0 0.5em 0;
    position: relative;
  }

  h1 {
    font-size: 200%;
    margin: 0 0 0 -0.125em;
  }

  .color-scheme-button {
    margin: 0;
    position: absolute;
    top: 0.5em;
    right: 0.5em;
  }
}