/* ========================================
   ROOT VARIABLES
======================================== */

:root {
    --bg: #f8fafc;
    --sidebar-bg: #ffffff;
    --header-bg: #ffffff;

    --text: #334155;
    --heading: #0f172a;

    --border: #e2e8f0;

    --accent: #2563eb;

    --code-bg: #0f172a;
}

/* ========================================
   RESET
======================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family:
        system-ui,
        -apple-system,
        Segoe UI,
        Roboto,
        sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* ========================================
   TYPOGRAPHY
======================================== */

h1,
h2,
h3 {
    color: var(--heading);
}

section {
    margin-top: 40px;
}

/* =========================================
   LINKS
========================================= */

a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    text-decoration: underline;
    opacity: 0.85;
}