/* Explain: Base CSS reset, typography, and global element styling. */
* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    overflow-x: hidden;
    background: var(--background-color);
    color: var(--text-color);
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
    /* Subtil motif en filigrane pour le côté mystique et royal */
    background-image: radial-gradient(circle at 50% 0%, rgba(139, 0, 0, 0.15) 0%, transparent 50%), 
                      radial-gradient(circle at 100% 100%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
    background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
}

::selection {
    background: var(--primary-color);
    color: var(--background-color);
}

section {
    scroll-margin-top: 100px;
}