/* Explain: Base reset and typography defaults for the studio site, including accessibility overrides. - */
[x-cloak] {
    display: none !important;
}

* {
    box-sizing: border-box;
}

html {
    background: var(--background-color);
    color: var(--text-color);
    scroll-padding-top: 92px;
}

body {
    margin: 0;
    overflow-x: hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(26, 44, 91, 0.15), transparent 26rem),
        radial-gradient(circle at 88% 8%, rgba(40, 129, 225, 0.15), transparent 24rem),
        var(--background-color);
    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 Variables & Overrides */
html.a11y-large-text { font-size: 112.5%; }
html.a11y-xl-text { font-size: 125%; }

html.a11y-spacing * {
    line-height: 1.8 !important;
    letter-spacing: 0.05em !important;
}

html.a11y-high-contrast {
    --background-color: #000000 !important;
    --text-color: #ffffff !important;
    --surface-color: #1a1a1a !important;
    --primary-color: #ffff00 !important;
    --primary-hover: #cccc00 !important;
    --accent-color: #00ffff !important;
    --text-muted: #dddddd !important;
    --border-color: #ffffff !important;
    --glass-bg: #000000 !important;
    --nav-bg: #000000 !important;
    --footer-bg: #111111 !important;
    --field-bg: #222222 !important;
}

html.a11y-bw {
    filter: grayscale(100%);
}

html.a11y-highlight-links a, 
html.a11y-highlight-links button {
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
    outline: 2px solid var(--accent-color) !important;
    outline-offset: 2px !important;
}

html.a11y-large-cursor, 
html.a11y-large-cursor * {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M2 2l12 28 4-12 12-4z" fill="black" stroke="white" stroke-width="2"/></svg>') 1 1, auto !important;
}

html.a11y-reduce-motion *, 
html.a11y-reduce-motion *::before, 
html.a11y-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

html.a11y-simple-view p { font-size: 1.1rem; }
html.a11y-simple-view section { padding-top: 2rem !important; padding-bottom: 2rem !important; }
html.a11y-simple-view .orb { display: none !important; }

/* Keyboard Focus Indicators */
*:focus-visible {
    outline: 3px solid var(--accent-color) !important;
    outline-offset: 3px !important;
}