:root {
    --font-sans: 'Archivo', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
    --font-mono: 'Courier Prime', 'Courier New', monospace;
    --body-font: var(--font-sans);
    --ui-font: var(--font-sans);
    --heading-font: var(--font-sans);
    --code-font: var(--font-sans);
    --max-width-reading: 920px;
    --max-width-hub: 1200px;
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 2rem;
    --space-xl: 4rem;
    --content-text-align: justify;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.08rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-2xl: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
    --text-3xl: clamp(2rem, 1.55rem + 2vw, 3rem);
    --text-4xl: clamp(2.5rem, 1.9rem + 3vw, 4rem);
    --text-5xl: clamp(3rem, 2rem + 5vw, 5.75rem);
    --radius-sm: 2px;
    --radius-md: 3px;
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --page-bg: #c1deba;
    --surface: #FCFDFB;
    --surface-alt: #E7F0E5;
    --text: #18231C;
    --accent: #6F9272;
    --muted: #3E5D46;
    --link: #31563D;
    --highlight: #B58A28;
    --danger: #B94A43;
    --code-bg: #EAF0E9;
    --border: #B8C8B8;
    --rule: #18231C;
    --shadow: rgba(16, 24, 32, 0.08);
    --hover-shadow: rgba(16, 24, 32, 0.16);
    --card-shadow: rgba(49, 86, 61, 0.18);
    --focus: var(--highlight);
    --callout-dark: var(--link);
    --callout-dark-border: color-mix(in srgb, var(--link) 80%, black 20%);
    --callout-dark-text: #FCFDFB;
    --callout-accent: #4F7657;
    --callout-accent-border: color-mix(in srgb, var(--callout-accent) 80%, black 20%);
    --callout-accent-text: #FCFDFB;
    --highlight-text: #18231C;
    --highlight-border: #94701F;
    --callout-shadow: rgba(0, 0, 0, 0.08);
    --tag-highlight: #70551A;
    --grid-line: color-mix(in srgb, var(--link) 2.5%, transparent);
    --grid-line-strong: color-mix(in srgb, var(--accent) 4%, transparent);
    --grid: linear-gradient(var(--grid-line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}
[data-theme="dark"] {
    --page-bg: #001700;
    --surface: #17231C;
    --surface-alt: #1C2D23;
    --text: #EEF5EE;
    --accent: #9CC7A2;
    --muted: #B5D4B8;
    --link: #A6CAA9;
    --highlight: #E5C86B;
    --danger: #F08A7E;
    --code-bg: #1E2C22;
    --border: #47614D;
    --rule: #EEF5EE;
    --shadow: rgba(0, 0, 0, 0.28);
    --hover-shadow: rgba(0, 0, 0, 0.46);
    --card-shadow: rgba(156, 199, 162, 0.22);
    --focus: var(--highlight);
    --callout-dark: #2A4330;
    --callout-dark-border: #1D3022;
    --callout-dark-text: #E8E4DC;
    --callout-accent: #3F6248;
    --callout-accent-border: #304D37;
    --callout-accent-text: #E8E4DC;
    --highlight-text: #1A1A1E;
    --highlight-border: #B99D4F;
    --callout-shadow: rgba(0, 0, 0, 0.25);
    --tag-highlight: #E5C86B;
    --grid-line: color-mix(in srgb, var(--accent) 3%, transparent);
    --grid-line-strong: color-mix(in srgb, var(--link) 5%, transparent);
    --grid: linear-gradient(var(--grid-line-strong) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-strong) 1px, transparent 1px), linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
}
[data-font="serif"] {
    --body-font: var(--font-serif);
    --ui-font: var(--font-serif);
    --heading-font: var(--font-serif);
    --code-font: var(--font-serif);
}
[data-font="mono"] {
    --body-font: var(--font-mono);
    --ui-font: var(--font-mono);
    --heading-font: var(--font-mono);
    --code-font: var(--font-mono);
}