:root,
[data-theme="dark"] {
  /* Brand */
  --g: #5CA882;
  --g2: #72C09A;
  --g-pale: #1C2E24;
  --g-glow: rgba(92, 168, 130, 0.06);

  /* Backgrounds */
  --bg: #121412;
  --surface: #1A1C1A;
  --well: #101210;
  --deep: #0C0E0C;

  /* Text */
  --text: #D6DAD7;
  --text-2: #8A928C;
  --text-3: #5C645E;
  --text-4: #363C38;

  /* Lines */
  --line: #262A26;
  --line-f: #1E221E;

  /* Nick Colors */
  --na: #68AA82;
  --nb: #AA9E68;
  --nc: #68A0AA;
  --nd: #AA68A0;
  --ne: #88AA58;
  --ns: #363C38;

  /* Typography */
  --display: 'Newsreader', Georgia, serif;
  --body: 'Outfit', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 18px;
  --space-7: 22px;
  --space-8: 24px;
  --space-9: 28px;
  --space-10: 36px;
  --space-11: 44px;
  --space-12: 56px;

  /* Component Spacing */
  --page-max: 800px;
  --page-px: 24px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-base: 3px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --radius-xl: 6px;
  --radius-full: 50%;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.4s ease;

  /* Z-Index */
  --z-nav: 50;
  --z-overlay: 9999;
}

[data-theme="light"] {
  --bg: #EEEEE9;
  --surface: #F8F8F6;
  --well: #E5E5E0;
  --deep: #DDDDD8;

  --text: #1A1D1B;
  --text-2: #4E564F;
  --text-3: #7E867F;
  --text-4: #ACB2AD;

  --g: #3B6652;
  --g2: #2E5242;
  --g-pale: #D2DDD6;
  --g-glow: rgba(59, 102, 82, 0.055);

  --line: #CFCFCA;
  --line-f: #DDDDD8;

  --na: #3E6E5A;
  --nb: #7E6E46;
  --nc: #46607E;
  --nd: #7E4672;
  --ne: #5E7E3E;
  --ns: #ACB2AD;
}

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

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  font-weight: 400;
  transition: background var(--transition-base), color var(--transition-base);
}

/* Grain Overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: .015;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") repeat;
  background-size: 140px;
}

a {
  color: var(--g);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}