body {
    font-family: var(--font-primary);
    background-color: var(--dark-bg-primary);
    color: var(--text-color-light);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-secondary);
    color: var(--text-color-headings);
    margin-bottom: 1.25rem;
    line-height: 1.3;
    font-weight: 500;
}

h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); }
h2 { font-size: clamp(2rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
h4 { font-size: clamp(1.1rem, 2.5vw, 1.25rem); }

p {
    margin-bottom: 1rem;
    color: var(--text-color-medium);
}
p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--text-color-link-default);
    text-decoration: none;
    transition: color var(--transition-speed) ease;
}
a:hover, a:focus {
    color: var(--text-color-link-hover);
    text-decoration: none;
}

p a {
    color: var(--text-color-link-hover);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    font-weight: 500;
}
p a:hover, p a:focus {
    color: var(--primary-green);
    text-decoration: none;
}

ul,
ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}
ul {
    list-style: disc;
}
ol {
    list-style: decimal;
}
li {
    margin-bottom: 0.5rem;
    color: var(--text-color-medium);
}
li strong {
    color: var(--text-color-light);
}

hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color-dark);
    margin: 2rem 0;
}

blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 4px solid var(--primary-green);
    background-color: var(--dark-bg-secondary);
    color: var(--text-color-medium);
    font-style: italic;
}
blockquote p:last-child {
    margin-bottom: 0;
}

pre {
    background-color: var(--dark-bg-primary);
    border: 1px solid var(--border-color-dark);
    padding: 1rem;
    border-radius: var(--card-border-radius);
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    color: var(--text-color-medium);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin-bottom: 1rem;
}
code {
    background-color: var(--dark-bg-secondary);
    color: var(--highlight-green);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.9em;
}
pre code {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
    color: inherit;
}

.container {
    width: 90%;
    max-width: var(--container-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}

.text-center { text-align: center !important; }
.text-left   { text-align: left !important; }
.text-right  { text-align: right !important; }

.text-primary { color: var(--primary-green) !important; }
.text-highlight { color: var(--highlight-green) !important; }
.text-light { color: var(--text-color-light) !important; }
.text-medium { color: var(--text-color-medium) !important; }
.text-danger { color: var(--danger-red) !important; }
.text-warning { color: var(--warning-yellow) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mt-5 { margin-top: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.5rem !important; }
.pt-2 { padding-top: 1rem !important; }
.pt-3 { padding-top: 1.5rem !important; }
.pt-4 { padding-top: 2rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.5rem !important; }
.pb-2 { padding-bottom: 1rem !important; }
.pb-3 { padding-bottom: 1.5rem !important; }
.pb-4 { padding-bottom: 2rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

*:focus-visible {
    outline: 3px solid var(--highlight-green, #50E3C2);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--dark-bg-primary, #1a1a2e);
    border-radius: 3px;
}
#main-header *:focus-visible {
    outline-color: var(--primary-green, #3DCC79);
    box-shadow: 0 0 0 4px var(--header-bg-scrolled, rgba(13, 17, 23, 0.95));
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button:focus-visible {
    outline: 2px solid var(--primary-green, #3DCC79);
    outline-offset: 1px;
    box-shadow: 0 0 5px var(--primary-green-transparent, rgba(61, 204, 121, 0.5));
}