/* ============================================
   Drawing Maps — Base Design System
   ============================================ */

/* --- Tokens --- */

:root {
    --bg: #fdfdfc;
    --text: #1a1a1a;
    --text-mid: #5c5c5c;
    --text-light: #8a8a8a;
    --accent: #d44527;
    --rule: #d4d4d4;
    --rule-light: #ebebeb;
    --code-bg: #f5f5f3;
    --code-border: #e2e2de;
    --green: #3a7a52;
    --red: #b43a3a;

    --container: 640px;
    --body-px: 24px;
    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --duration: 0.2s;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #161615;
        --text: #e8e8e6;
        --text-mid: #a0a09e;
        --text-light: #6e6e6c;
        --accent: #e8603e;
        --rule: #333331;
        --rule-light: #252524;
        --code-bg: #1e1e1c;
        --code-border: #2a2a28;
        --green: #5aad74;
        --red: #d45454;
    }
}

/* --- Reset --- */

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

/* --- Base Typography --- */

body {
    font-family: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16.5px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    hanging-punctuation: first last;
}

::selection {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

/* --- Layout --- */

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--body-px);
}

/* --- Links --- */

a {
    color: var(--text);
    text-decoration: none;
    border-bottom: 1px solid var(--rule);
    transition: border-color var(--duration) var(--ease);
}

a:hover {
    border-color: var(--text);
}

a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 1px;
}

/* --- Navigation --- */

.site-nav {
    padding: 20px 0;
    font-family: 'DM Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.site-nav a {
    color: var(--text-mid);
    border-bottom: none;
    transition: color var(--duration) var(--ease);
}

.site-nav a:hover {
    color: var(--text);
}

/* --- Header --- */

header {
    padding-top: 120px;
    padding-bottom: 80px;
}

.tag {
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-light);
    margin-bottom: 40px;
    display: block;
}

h1 {
    font-weight: 300;
    font-size: clamp(2rem, 4.5vw, 2.8rem);
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin-bottom: 32px;
    max-width: 540px;
}

h2 {
    font-weight: 300;
    font-size: 1.5rem;
    margin-top: 72px;
    margin-bottom: 28px;
    letter-spacing: -0.2px;
}

.subtitle {
    font-weight: 300;
    font-size: 1.05rem;
    color: var(--text-mid);
    max-width: 520px;
    line-height: 1.65;
}

.meta {
    margin-top: 48px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
    font-size: 0.8rem;
    color: var(--text-light);
    display: flex;
    gap: 24px;
}

.meta a {
    color: var(--text-mid);
}

/* --- Footer --- */

.site-footer {
    padding: 48px 0 64px;
    font-family: 'DM Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
    color: var(--text-light);
    display: flex;
    gap: 24px;
}

.site-footer a {
    color: var(--text-light);
    border-bottom: none;
    transition: color var(--duration) var(--ease);
}

.site-footer a:hover {
    color: var(--text-mid);
}

/* --- View Transitions --- */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: vt-fade-out 150ms var(--ease);
}

::view-transition-new(root) {
    animation: vt-fade-in 150ms var(--ease);
}

@keyframes vt-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

@keyframes vt-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
    }
}

/* --- Entrance Animations --- */

@media (prefers-reduced-motion: no-preference) {
    .fade-in {
        opacity: 0;
        transform: translateY(8px);
        animation: enter 0.6s var(--ease) forwards;
    }

    .fade-in-delay-1 { animation-delay: 0.1s; }
    .fade-in-delay-2 { animation-delay: 0.2s; }
    .fade-in-delay-3 { animation-delay: 0.3s; }
}

@keyframes enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fade-in {
        opacity: 1;
        transform: none;
        animation: none;
    }
}