/* ---- Variables and theming ---- */
/* CSS Variables for theming */
:root {
    --header-height: calc(56px + env(safe-area-inset-top, 0px));
    --sidebar-width: 280px;
    --content-font-size: 1rem;
    --bg-color: #ffffff;
    --bg-secondary: #f6f8fa;
    --text-color: #24292f;
    --text-secondary: #57606a;
    --border-color: #d0d7de;
    --link-color: #0969da;
    --hover-bg: #f3f4f6;
    --active-bg: #ddf4ff;
    --code-bg: #f6f8fa;
    --header-bg: #24292f;
    --header-text: #ffffff;
    --header-text-muted: rgba(255, 255, 255, 0.75);
    --comment-card-bg: #ffffff;
    --comment-card-muted-bg: #f6f8fa;
    --comment-card-hover: #f8fafc;
    --comment-avatar-bg: #1f6feb;
    --comment-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    --draft-check-color: #1a7f37;
    --draft-restored-color: #0969da;
    --error-text: #d73a49;
    --error-border: #d73a49;
}

/* Dark theme */
[data-theme="dark"] {
    --bg-color: #0d1117;
    --bg-secondary: #161b22;
    --text-color: #c9d1d9;
    --text-secondary: #8b949e;
    --border-color: #30363d;
    --link-color: #58a6ff;
    --hover-bg: #21262d;
    --active-bg: #1f6feb33;
    --code-bg: #161b22;
    --header-bg: #161b22;
    --header-text: #c9d1d9;
    --header-text-muted: rgba(201, 209, 217, 0.75);
    --comment-card-bg: #11161d;
    --comment-card-muted-bg: #0f141a;
    --comment-card-hover: #171d25;
    --comment-avatar-bg: #347dff;
    --comment-shadow: 0 1px 2px rgba(0, 0, 0, 0.32);
    --draft-check-color: #3fb950;
    --draft-restored-color: #58a6ff;
    --error-text: #f85149;
    --error-border: #da3633;
}

/* ---- Reset and base ---- */
/* Reset and base styles */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color);
    background-color: var(--bg-color);
}

/* Skip to main content (visible on focus) */
.skip-link {
    position: absolute;
    top: 8px;
    left: -9999px;
    z-index: 10001;
    background: var(--bg-secondary);
    color: var(--text-color);
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.875rem;
}

.skip-link:focus {
    left: 8px;
    outline: 2px solid var(--link-color);
    outline-offset: 2px;
}

/* Scrollbar styling - Light theme */
* {
    scrollbar-width: thin;
    scrollbar-color: #c1c1c1 #f1f1f1;
}

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

*::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

*::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 5px;
    border: 2px solid #f1f1f1;
}

*::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Scrollbar styling - Dark theme */
[data-theme="dark"] * {
    scrollbar-color: #484f58 #21262d;
}

[data-theme="dark"] *::-webkit-scrollbar-track {
    background: #21262d;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb {
    background: #484f58;
    border-color: #21262d;
}

[data-theme="dark"] *::-webkit-scrollbar-thumb:hover {
    background: #6e7681;
}