/* === Font Stacks === */
:root {
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Inter', 'Source Sans 3', system-ui, sans-serif;
    --font-mono: 'Source Code Pro', SFMono-Regular, Consolas, monospace;

    --text-base-size: 1rem;
    --text-line-height: 1.6;
    --text-color: #111;
}

/* === Reset Margins and Font Settings === */
html {
    font-size: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base-size);
    line-height: var(--text-line-height);
    color: var(--text-color);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1; /* Enable stylistic set 1 by default for Inter */
    font-variant-ligatures: common-ligatures contextual;
    font-kerning: normal;
}

/* === Headings === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
    font-feature-settings: "liga" 1, "kern" 1, "ss02" 1; /* Optional stylistic set for flair */
    font-variant-ligatures: common-ligatures;
    
    break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
    -webkit-column-break-after: avoid;
    orphans: 2;
    widows: 2;
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

/* === Paragraphs & Text Elements === */
p, ul, ol, dl, blockquote, pre, table, figure, fieldset, legend {
    margin: 0;
}

p {
    font-family: var(--font-sans);
    text-align: justify;
    hyphens: auto;
}

/* === Lists === */
ul, ol {
    padding-left: 1.5rem;
}

/* li {
    margin-bottom: 0.5rem;
} */

/* === Blockquotes === */
blockquote {
    font-style: italic;
    border-left: 4px solid #ccc;
    margin-left: 0;
    padding-left: 1rem;
    color: #555;
}

/* === Code & Pre === */
code, pre, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.95em;
    background: #f5f5f5;
    padding: 0.2em 0.4em;
    border-radius: 3px;

    font-feature-settings: "zero" 1, "tnum" 1, "kern" 1;
    font-variant-numeric: tabular-nums slashed-zero;
}

pre {
    padding: 1rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #f5f5f5;
}

/* === Tables === */
table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-sans);
    margin-bottom: 1.25rem;

    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
}

th, td {
    text-align: left;
    padding: 0.75rem;
    border-bottom: 1px solid #ddd;
}

/* === Forms === */
input, textarea, select, button {
    font-family: inherit;
    font-size: 1rem;
    line-height: inherit;
}

/* === Others === */
strong, b {
    font-weight: 600;
}

em, i {
    font-style: italic;
}

abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 2rem 0;
}

/* === Print Styles === */
@media print {
    body {
        font-family: var(--font-sans);
        color: #000;
        background: transparent;
        font-size: 11pt;
        line-height: 1.4;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .block, .column-break {
        break-inside: avoid;
        page-break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    a {
        color: inherit;
        text-decoration: none;
        line-break: anywhere;
    }

    a[href].print-use::after {
        content: " (" attr(href) ")";
        font-size: 0.9em;
        color: #555;
    }

    a[href] .no-print {
        display: none !important;
    }
}

/* === MEDIA SCREEN & DARK MODE === */

@media screen and (prefers-color-scheme: dark) {
    :root {
        --text-color: #e5e7eb; /* Light gray */
    }

    body {
        background: #121212; /* Deep neutral dark */
        color: var(--text-color);
    }

    /* === Headings === */
    h1, h2, h3, h4, h5, h6 {
        color: #f3f4f6; /* Lightened text for headings */
    }

    /* === Paragraphs & Lists === */
    p, ul, ol, dl, blockquote, pre, table, figure, fieldset, legend {
        color: var(--text-color);
    }

    li {
        color: var(--text-color);
    }

    /* === Blockquotes === */
    blockquote {
        border-left: 4px solid #4b5563; /* Softer border */
        color: #9ca3af; /* Dimmed text tone */
    }

    /* === Code & Pre === */
    code, pre, kbd, samp {
        background: #1e1e1e;
        color: #ddd;
    }

    pre {
        background: #1e1e1e;
    }

    /* === Tables === */
    th, td {
        border-bottom: 1px solid #333;
        color: var(--text-color);
    }

    /* === HR === */
    hr {
        border-top: 1px solid #333;
    }

    /* === Forms === */
    input, textarea, select, button {
        background-color: #1f2937;
        color: #f3f4f6;
        border: 1px solid #374151;
    }

    /* === Others === */
    strong, b {
        color: #f9fafb;
    }

    abbr[title] {
        border-bottom: 1px dotted #999;
    }

    a:visited {
        color: #a78bfa; /* Soft lavender (like Tailwind's purple-400) */
    }
}