/* ============================================================
   LIS Design System — Base (Linear / Vercel density)
   13px body Inter, line-height 1.5, letter-spacing -0.005em
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1, "cv11" 1;
    tab-size: 4;
    line-height: 1.5;
}

body {
    font-family: var(--sd-font-sans);
    font-size: 0.8125rem;             /* 13px Linear default */
    font-weight: 400;
    line-height: 1.5;
    color: var(--sd-fg);
    background-color: var(--sd-bg);
    letter-spacing: -0.005em;
    min-height: 100vh;
}

/* === Typography (Linear scale) === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sd-font-sans);
    color: var(--sd-fg);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.015em;
}
h1 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; }   /* 18px */
h2 { font-size: 1rem;     font-weight: 600; }                            /* 16px */
h3 { font-size: 0.875rem; font-weight: 600; }                            /* 14px */
h4 { font-size: 0.8125rem;font-weight: 600; }                            /* 13px */
h5 { font-size: 0.8125rem;font-weight: 600; }
h6 { font-size: 0.75rem;  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--sd-muted-fg); }

p { color: var(--sd-fg); line-height: 1.55; }
p + p { margin-top: 0.75rem; }

.lead { font-size: 0.9375rem; color: var(--sd-muted-fg); line-height: 1.5; }
.muted, .text-muted, .sd-text-muted { color: var(--sd-muted-fg) !important; }

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--sd-duration-fast) var(--sd-ease);
}
a.link, a.sd-link {
    color: var(--sd-primary-bg);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    font-weight: 500;
}
a.link:hover, a.sd-link:hover { color: var(--sd-primary-bg-hover); }

small, .small, .sd-text-sm { font-size: 0.75rem; line-height: 1rem; }
.sd-text-xs   { font-size: 0.6875rem; line-height: 0.875rem; }
.sd-text-base { font-size: 0.8125rem; line-height: 1.25rem; }
.sd-text-md   { font-size: 0.875rem; line-height: 1.25rem; }
.sd-text-lg   { font-size: 1rem; line-height: 1.5rem; }
.sd-text-xl   { font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.02em; }
.sd-text-2xl  { font-size: 1.375rem; line-height: 1.75rem; letter-spacing: -0.025em; }

.sd-font-medium   { font-weight: 500 !important; }
.sd-font-semibold { font-weight: 600 !important; }
.sd-font-bold     { font-weight: 700 !important; }

.sd-mono { font-family: var(--sd-font-mono); font-size: 0.6875rem; color: var(--sd-muted-fg); }

/* === Section title (Linear signature uppercase muted) === */
.sd-section-title {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--sd-muted-fg);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

/* === Code / kbd === */
code {
    border-radius: 4px;
    background-color: var(--sd-muted-bg);
    color: var(--sd-fg);
    padding: 1px 4px;
    font-family: var(--sd-font-mono);
    font-size: 0.85em;
    font-weight: 500;
    border: 1px solid var(--sd-border-c);
}
kbd {
    display: inline-block;
    padding: 1px 5px;
    font-family: var(--sd-font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1;
    color: var(--sd-muted-fg);
    background: var(--sd-muted-bg);
    border: 1px solid var(--sd-border-c);
    border-radius: 4px;
    vertical-align: middle;
}

/* === Focus ring (Linear: ring-1 outline-offset 2px) === */
:focus { outline: none; }
:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--sd-bg), 0 0 0 3px var(--sd-ring-c);
}

/* === Selection === */
::selection {
    background-color: hsl(var(--sd-primary) / 0.20);
    color: var(--sd-fg);
}

/* === Scrollbar — ẩn khi idle, chỉ hiện khi hover/scroll. Màu theo theme tổng. === */
* {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 9999px;
    transition: background-color 0.2s ease;
}
/* Hiện scrollbar khi user hover vào vùng cuộn */
:hover::-webkit-scrollbar-thumb {
    background-color: var(--sd-border-c, hsl(0 0% 0% / 0.18));
}
*:hover {
    scrollbar-color: var(--sd-border-c, hsl(0 0% 0% / 0.18)) transparent;
}
/* Hover trực tiếp lên thumb → đậm hơn */
::-webkit-scrollbar-thumb:hover {
    background-color: var(--sd-muted-fg, hsl(0 0% 0% / 0.32));
}

/* === Reduced motion === */
/* Đã tắt — gây tắt mọi animation của ranking widget khi OS bật reduce-motion. User muốn animation luôn chạy. */
/* @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
} */

/* === Skip link === */
.m3-skip-link, .sd-skip-link {
    position: absolute;
    top: -40px;
    left: 8px;
    background: var(--sd-primary-bg);
    color: var(--sd-primary-fg);
    padding: 6px 12px;
    border-radius: 4px;
    z-index: var(--sd-z-toast);
    font-weight: 500;
    font-size: 0.75rem;
    transition: top var(--sd-duration) var(--sd-ease);
}
.m3-skip-link:focus, .sd-skip-link:focus { top: 8px; }

/* === Image/SVG === */
img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
}
img, video { max-width: 100%; height: auto; }

/* === Disabled === */
[disabled], .disabled {
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.5;
}

/* === Form reset === */
input, button, textarea, select { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: transparent; border: 0; }

/* === Utility === */
.sd-bg     { background-color: var(--sd-bg); }
.sd-card-bg{ background-color: var(--sd-card-bg); }
.sd-muted-bg { background-color: var(--sd-muted-bg); }
.sd-border { border: 1px solid var(--sd-border-c); }

.sd-radius-sm  { border-radius: var(--sd-radius-sm); }
.sd-radius-md  { border-radius: var(--sd-radius-md); }
.sd-radius-lg  { border-radius: var(--sd-radius-lg); }
.sd-radius-xl  { border-radius: var(--sd-radius-xl); }
.sd-radius-pill{ border-radius: var(--sd-radius-pill); }

.sd-shadow-sm  { box-shadow: var(--sd-shadow-sm); }
.sd-shadow     { box-shadow: var(--sd-shadow); }
.sd-shadow-md  { box-shadow: var(--sd-shadow-md); }
.sd-shadow-lg  { box-shadow: var(--sd-shadow-lg); }

/* === Stack helpers === */
.sd-stack { display: flex; flex-direction: column; }
.sd-row   { display: flex; align-items: center; }
.sd-gap-1 { gap: 0.25rem; }
.sd-gap-2 { gap: 0.5rem; }
.sd-gap-3 { gap: 0.75rem; }
.sd-gap-4 { gap: 1rem; }