/**
 * foundation.css
 *
 * Global reset, design tokens, document defaults, typography, and accessibility utilities. This file must load first. Responsive rules here should only affect genuinely global primitives.
 *
 * Sections:
 * 1. Box sizing and color tokens
 * 2. Document/background defaults
 * 3. Shared typography
 * 4. Screen-reader utility
 * 5. Global responsive behavior
 *
 * Troubleshooting:
 * - Change theme colors here before overriding colors in individual components.
 * - Avoid feature selectors here; this intentionally loads as the weakest layer.
 */

/* 1. Predictable box sizing and the shared visual design tokens. */
*{
    box-sizing:border-box;
}

:root{
    color-scheme:dark;
    --panel-strong:#212837;
    --line:#303847;
    --text:#f6f8fb;
    --muted:#a9b2c1;
    --soft:#7f8ba0;
    --accent:#35c2a5;
    --accent-strong:#2cae94;
    --blue:#7eb6ff;
}

/* 2. Document defaults and the background used on every route. */
html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at top left, rgba(53,194,165,.16), transparent 28rem),
        linear-gradient(135deg, #111318 0%, #171a20 48%, #101217 100%);
    color:var(--text);
    font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    overflow-x:hidden;
}

/* shared.js adds this class while any first-party modal or picker is open. */
html.is-modal-locked,
body.is-modal-locked{
    overflow:hidden;
    overscroll-behavior:none;
}

/* 3. Site-wide heading and introduction defaults. */
h1,
h2{
    margin:0;
    letter-spacing:0;
}

h1{
    font-size:clamp(38px, 5.2vw, 64px);
    line-height:.96;
}

.intro{
    max-width:610px;
    margin:16px 0 0;
    color:var(--muted);
    font-size:16px;
    line-height:1.48;
}

/* 4. Hide helper text visually without removing it from assistive technology. */
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    margin:-1px;
    padding:0;
    border:0;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    overflow:hidden;
    white-space:nowrap;
}

/* 5. Tablet/mobile pages should grow with their content rather than viewport height. */
@media (max-width:900px){
    body{
            min-height:auto;
        }

}