/* Explain: Base reset, typography, and background styles for the site. - */
* {
    box-sizing: border-box;
}

html {
    background-color: var(--background-color);
    background-image: 
        radial-gradient(at 0% 0%, rgba(30, 58, 138, 0.08) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(234, 88, 12, 0.08) 0px, transparent 50%),
        url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%231E3A8A' fill-opacity='0.1'/%3E%3C/svg%3E");
    background-attachment: fixed;
    color: var(--text-color);
    scroll-padding-top: 92px;
}

body {
    margin: 0;
    overflow-x: hidden;
    background-color: transparent;
    color: var(--text-color);
    font-family: var(--font-body);
    text-rendering: optimizeLegibility;
}

button,
a,
select {
    cursor: pointer;
}

img {
    display: block;
    max-width: 100%;
}

::selection {
    background: var(--accent-color);
    color: #ffffff;
}

/* Accessibility Classes */
body.acc-high-contrast {
    --background-color: #000000 !important;
    --surface-color: #111111 !important;
    --field-bg: #222222 !important;
    --text-color: #ffffff !important;
    --text-muted: #dddddd !important;
    --primary-color: #ffff00 !important;
    --accent-color: #00ff00 !important;
    --border-color: #ffffff !important;
    background-color: var(--background-color) !important;
}

body.acc-grayscale {
    filter: grayscale(100%) !important;
}

body.acc-readable-font {
    --font-body: Arial, Helvetica, sans-serif !important;
    --font-heading: Arial, Helvetica, sans-serif !important;
}

body.acc-highlight-links a {
    text-decoration: underline !important;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
    background-color: #000000 !important;
    color: #ffff00 !important;
}