/* ============================================
   TOKENS
   ============================================ */

   :root {
    /* Color */
    --bg:          #0d0f12;
    --bg-subtle:   #13161a;
    --border:      #1e2228;
    --text-muted:  #4a5260;
    --text:        #c8cdd6;
    --text-bright: #e8ecf2;
    --accent:      #e8bf3a;
    --accent-dim:  #a35f1f;
  
    /* Typography */
    --font-mono: 'Geist Mono', monospace;
    --font-sans: 'Geist', sans-serif;
  
    /* Scale */
    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  2rem;
    --text-4xl:  2.75rem;
  
    /* Spacing */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
  
    /* Layout */
    --max-width: 860px;
  }
  
  /* ============================================
     RESET
     ============================================ */
  
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  /* ============================================
     BASE
     ============================================ */
  
  html {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  
  body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  main {
    flex: 1;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-16) var(--space-6);
  }
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--text-bright);
    line-height: 1.2;
  }
  
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }
  
  p {
    font-family: var(--font-sans);
    color: var(--text);
    max-width: 65ch;
  }
  
  a {
    color: var(--accent);
    text-decoration: none;
  }
  
  a:hover {
    color: var(--text-bright);
  }
  
  code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--accent);
    background: var(--bg-subtle);
    padding: 0.1em 0.4em;
    border-radius: 3px;
  }
  
  /* ============================================
     NAV
     ============================================ */
  
  header {
    border-bottom: 1px solid var(--border);
  }
  
  nav {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  nav .logo {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-bright);
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  
  nav ul {
    list-style: none;
    display: flex;
    gap: var(--space-6);
  }
  
  nav ul a {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.15s ease;
  }
  
  nav ul a:hover {
    color: var(--accent);
  }
  
  /* ============================================
     FOOTER
     ============================================ */
  
  footer {
    border-top: 1px solid var(--border);
    padding: var(--space-6);
    text-align: center;
  }
  
  footer p {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: 0.05em;
    max-width: none;
  }