/* ==========================================================================
   Base — Reset, typography, elements
   ========================================================================== */

/* --- Minimal reset --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-text);
    margin-bottom: var(--space-md);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); }

p {
    margin-bottom: var(--space-md);
}

/* --- Links --- */
a {
    color: var(--color-primary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
    color: var(--color-primary-dark);
}

/* --- Lists --- */
ul, ol {
    padding-left: var(--space-xl);
    margin-bottom: var(--space-md);
}

li {
    margin-bottom: var(--space-xs);
}

/* --- Images --- */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- Code --- */
code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background-color: var(--color-bg-alt);
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
}

pre {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background-color: var(--color-code-bg);
    color: var(--color-code-text);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-bottom: var(--space-xl);
    border: 1px solid var(--color-code-border);
}

pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* --- Blockquote --- */
blockquote {
    border-left: 4px solid var(--color-primary);
    padding: var(--space-md) var(--space-lg);
    margin: var(--space-xl) 0;
    background-color: var(--color-primary-light);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

blockquote p:last-child {
    margin-bottom: 0;
}

/* --- Tables --- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-xl);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

th, td {
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

th {
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-bg-alt);
}

/* --- HR --- */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-2xl) 0;
}

/* --- Selection --- */
::selection {
    background-color: var(--color-primary);
    color: #fff;
}

/* --- Focus visible --- */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* --- Prose (for long-form content) --- */
.prose h2 { margin-top: var(--space-2xl); margin-bottom: var(--space-md); }
.prose h3 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.prose h4 { margin-top: var(--space-lg); margin-bottom: var(--space-sm); }
.prose p { margin-bottom: var(--space-md); }
.prose p + p { margin-top: 0; }
.prose ul, .prose ol {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-left: var(--space-xl);
}
.prose li { margin-bottom: var(--space-xs); line-height: var(--line-height-relaxed); }
.prose li + li { margin-top: var(--space-xs); }
.prose blockquote { margin: var(--space-lg) 0; }
.prose img { max-width: 100%; height: auto; margin: var(--space-lg) 0; border-radius: var(--radius-md); }
.prose hr { margin: var(--space-xl) 0; }
.prose strong { font-weight: var(--font-weight-bold); color: var(--color-text); }

/* --- Content overflow safety --- */
.entry-content,
.prose,
.readme-content,
.changelog-content {
    overflow-wrap: break-word;
    word-wrap: break-word;
    min-width: 0;
}

pre {
    max-width: 100%;
}

img {
    max-width: 100%;
    height: auto;
}