@font-face {
    font-family: og-emoji;
    src: url(/fonts/og-dcm-emoji.ttf);
}

:root {
  --light-background: whitesmoke;
  --light-surface: #ffffff;
  --light-on-surface: #222222;
  --light-border: #cccccc;
  --light-clickable: #0000ee;
  --light-on-clickable: #ffffff;
  --light-pattern: rgba(0, 136, 5, 0.15);

  --light-high-contrast-background: #ffffff;
  --light-high-contrast-surface: #f5f5f5;
  --light-high-contrast-on-surface: #000000;
  --light-high-contrast-border: #000000;
  --light-high-contrast-clickable: #00008b;
  --light-high-contrast-on-clickable: #ffffff;
  --light-high-contrast-pattern: rgba(0, 136, 5, 0.15);

  --dark-background: #121212;
  --dark-surface: #1e1e1e;
  --dark-on-surface: #e0e0e0;
  --dark-border: #333333;
  --dark-clickable: #3b82f6;
  --dark-on-clickable: #000000;
  --dark-pattern: rgba(102, 255, 102, 0.04);

  --dark-high-contrast-background: #000000;
  --dark-high-contrast-surface: #000000;
  --dark-high-contrast-on-surface: #ffffff;
  --dark-high-contrast-border: #ffffff;
  --dark-high-contrast-clickable: #00ffff;
  --dark-high-contrast-on-clickable: #000000;
  --dark-high-contrast-pattern: rgba(102, 255, 102, 0.12);

  /* Font settings */
  --font-family: 'JetBrains Mono', monospace;
  --font-size: 16px;
  --font-weight: 300;
  --line-height: 24px;
}

:root {
  /* Default to light normal contrast */
  --background: var(--light-background);
  --surface: var(--light-surface);
  --on-surface: var(--light-on-surface);
  --border: var(--light-border);
  --clickable: var(--light-clickable);
  --on-clickable: var(--light-on-clickable);
  --pattern: var(--light-pattern);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--dark-background);
    --surface: var(--dark-surface);
    --on-surface: var(--dark-on-surface);
    --border: var(--dark-border);
    --clickable: var(--dark-clickable);
    --on-clickable: var(--dark-on-clickable);
    --pattern: var(--dark-pattern);
  }
}

/* Normal contrast overrides */
[data-theme="light"] {
  --background: var(--light-background);
  --surface: var(--light-surface);
  --on-surface: var(--light-on-surface);
  --border: var(--light-border);
  --clickable: var(--light-clickable);
  --on-clickable: var(--light-on-clickable);
  --pattern: var(--light-pattern);
}

[data-theme="dark"] {
  --background: var(--dark-background);
  --surface: var(--dark-surface);
  --on-surface: var(--dark-on-surface);
  --border: var(--dark-border);
  --clickable: var(--dark-clickable);
  --on-clickable: var(--dark-on-clickable);
  --pattern: var(--dark-pattern);
}

/* High contrast overrides (combined with base theme) */
[data-theme="light"][high-contrast] {
  --background: var(--light-high-contrast-background);
  --surface: var(--light-high-contrast-surface);
  --on-surface: var(--light-high-contrast-on-surface);
  --border: var(--light-high-contrast-border);
  --clickable: var(--light-high-contrast-clickable);
  --on-clickable: var(--light-high-contrast-on-clickable);
  --pattern: var(--light-high-contrast-pattern);
}

[data-theme="dark"][high-contrast] {
  --background: var(--dark-high-contrast-background);
  --surface: var(--dark-high-contrast-surface);
  --on-surface: var(--dark-high-contrast-on-surface);
  --border: var(--dark-high-contrast-border);
  --clickable: var(--dark-high-contrast-clickable);
  --on-clickable: var(--dark-high-contrast-on-clickable);
  --pattern: var(--dark-high-contrast-pattern);
}

* {
    /* Base Reset */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: var(--background);
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
}

body {
    background-color: var(--surface);
    color: var(--on-surface);
    border: 1px solid var(--border);
    margin: 50px auto;
    width: fit-content;
    padding: 2rch;
}

main {
    background-color: var(--surface);
    padding: 0 1rch;
    /* The 1px stripe pattern logic */
    background-image: linear-gradient(to bottom, transparent 50%, var(--surface) 50%), repeating-linear-gradient(to bottom, var(--pattern) 0px, var(--pattern) 1px, transparent 1px, transparent 2px);
    background-size: 100% calc(1rlh * 2);
    background-attachment: local;
}


[high-contrast] main, [zoomed] main {
    background-image: linear-gradient(var(--pattern) 50%, transparent 50%);
}

section {
    max-width: 80rch;
    margin-bottom: 1rlh;
}

section:last-child {
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 1rem;
    margin: 0;
    padding: 0;
}

p,
ul {
    font-size: 1rem;
    margin: 0;
    margin-left: 4rch;
    padding: 0;
    list-style-position: inside;
}

li::marker {
    content: "o ";
}

a {
    color: var(--clickable);
    text-transform: uppercase;
}

a:hover {
    background-color: var(--clickable);
    color: var(--on-clickable);
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    background: none;
    border: none;
    margin: 0;
    font: inherit;
    cursor: pointer;
    outline: none;

    color: var(--clickable);
    height: 1rlh;
    padding: 0 1rch;
    text-transform: uppercase;
}

button:hover {
    background-color: var(--clickable);
    color: var(--on-clickable);
}

button:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--clickable);
}

button:before {
    content: '[';
}

button:after {
    content: ']';
}

.button-group {
    display: flex;
    gap: 1rch;
    justify-content: space-between;
}

.og-emoji {
    font-size: 12px;
    display: inline-block;
    width: 2rch;
    text-align: center;
    font-family: 'og-emoji', sans-serif;
    line-height: 1;
    vertical-align: baseline;
    font-weight: normal;
}

@media (max-width: 768px) {
    html {
        background-color: transparent;
    }

    body {
        padding: 8px;
        margin: 0;
        border: 0;
        border-radius: 0;
    }

    section {
        max-width: unset;
    }
}