/* ═══════════════════════════════════════════════════════
   GOrecruitAI – Base / Reset
   Applied after variables.css, before component styles
   ═══════════════════════════════════════════════════════ */

/* ── Global resets ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ── Root ── */
html {
    height: 100%;
    overflow: hidden;
    background: var(--g-bg-page);
}

/* ── Body ── */
body {
    font-family: var(--g-font-sans);
    background: var(--g-bg-page);
    color: var(--g-text-body);
    margin: 0;
    min-height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Mobile: allow natural document scroll */
@media (max-width: 768px) {
    html, body {
        overflow: auto;
        height: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Global thin, light scrollbars ──
   App-wide default so every scroll surface (dropdowns, panels, tables, lists) gets the same
   slim, light-gray scrollbar instead of the browser's heavy default. Firefox reads
   scrollbar-width/color; WebKit/Chromium reads the ::-webkit-scrollbar pseudo-elements.
   Components with their own scrollbar rules (e.g. .g-skill-list) still override by specificity. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--g-gray-300) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background: var(--g-gray-300);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--g-gray-400);
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ── Focus ring defaults ── */
:focus-visible {
    outline: 2px solid var(--g-indigo);
    outline-offset: 2px;
}
 
/* ── Smooth scroll (respects prefers-reduced-motion) ── */
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* ── Images ── */
img, svg {
    display: block;
}

/* ── Links ── */
a {
    color: var(--g-link-blue);
    text-decoration: none;
    transition: color var(--g-transition);
}

a:hover {
    color: var(--g-link-blue-hover);
}