/* ============================================================================
   HR Agent — Base styles
   Loaded after tokens.css, before components.css.
   Element resets, typography, body, links, focus, scrollbars, animations.
   ============================================================================ */

[x-cloak] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    color: var(--text-primary);
    background-color: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color var(--dur) var(--ease-standard),
                color var(--dur) var(--ease-standard);
}

/* Make Tabler use Inter as its sans-serif */
:root {
    --tblr-font-sans-serif: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    line-height: var(--lh-snug);
    letter-spacing: var(--tracking-tight);
    margin-top: 0;
}

h1, .h1 { font-size: var(--fs-display); letter-spacing: var(--tracking-tight); }
h2, .h2 { font-size: var(--fs-3xl); }
h3, .h3 { font-size: var(--fs-2xl); }
h4, .h4 { font-size: var(--fs-xl); }
h5, .h5 { font-size: var(--fs-lg); }
h6, .h6 { font-size: var(--fs-md); }

p {
    line-height: var(--lh-normal);
    color: var(--text-secondary);
}

.page-title {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--tracking-tight);
}

/* ----- Links ----- */
a {
    color: var(--text-link);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard);
}
a:hover {
    color: var(--brand-600);
    text-decoration: none;
}
[data-theme="dark"] a:hover {
    color: var(--teal-300);
    filter: brightness(1.1);
}

/* ----- Focus ring (accessible, brand-aligned) ----- */
:where(button, .btn, a, input, select, textarea, [tabindex]):focus {
    outline: none;
}
:where(button, .btn, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ----- Scrollbar ----- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--r-pill);
    border: 2px solid var(--bg-page);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: padding-box; border: 2px solid var(--bg-page); }

/* ----- Selection ----- */
::selection {
    background: var(--brand-tint-strong);
    color: var(--text-primary);
}

/* ----- Animations ----- */
.fade-in { animation: fadeIn var(--dur-slow) var(--ease-out); }
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.rotate-45 { transform: rotate(45deg); }

/* ----- Skeleton loading ----- */
.skeleton {
    background: linear-gradient(90deg, var(--skeleton-from) 25%, var(--skeleton-to) 50%, var(--skeleton-from) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite var(--ease-standard);
    border-radius: var(--r-xs);
}
.skeleton-text   { height: 1em; margin-bottom: 0.5em; }
.skeleton-title  { height: 1.5em; width: 60%; margin-bottom: 0.75em; }
.skeleton-circle { border-radius: 50%; }

@keyframes skeleton-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ----- Page loading overlay ----- */
.page-loading {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(2px);
}

/* ----- Cursor utility ----- */
.cursor-pointer { cursor: pointer; }

/* ----- Reduced motion respect ----- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}