@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/space-grotesk-v22-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/space-grotesk-v22-latin-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/space-grotesk-v22-latin-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/space-grotesk-v22-latin-700.woff2') format('woff2');
}

:root {
  color-scheme: light;

  /* Core Colors - Monochrome */
  --black: #050505;
  --white: #fff;
  --grey-light: #f4f4f4;
  --grey-med: #e0e0e0;
  --grey-dark: #333;

  /* Semantic Variables */
  --bg-color: var(--white);
  --text-primary: var(--black);
  --text-secondary: var(--grey-dark);
  --border-color: var(--black);
  --accent-color: var(--black);
  --code-bg: var(--grey-light);

  /* Typography */
  --font-display: 'Space Grotesk', -apple-system, sans-serif;
  --font-mono: ui-monospace, sfmono-regular, menlo, monaco, "Courier New", monospace;
  --font-body: var(--font-mono);

  /* Default to mono for that raw feel */

  /* Layout */
  --line-body: 1.6;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --container-max: 900px;

  /* Components */
  --radius-sm: 0px;

  /* Sharp corners */
  --radius-md: 0px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-med: 200ms ease;

  /* Z-index layers */
  --z-nav: 100;
  --z-overlay: 200;
}

/* Light theme (default) */
[data-theme="light"] {
  color-scheme: light;
  --bg-color: var(--white);
  --text-primary: var(--black);
  --text-secondary: var(--grey-dark);
  --border-color: var(--black);
  --accent-color: var(--black);
  --grid-dot-color: var(--grey-med);
  --code-bg: var(--grey-light);
}

/* Dark theme */
[data-theme="dark"] {
  color-scheme: dark;
  --bg-color: #0a0a0a;
  --text-primary: #f0f0f0;
  --text-secondary: #888;
  --border-color: #f0f0f0;
  --accent-color: #f0f0f0;
  --grid-dot-color: #2a2a2a;
  --code-bg: #1a1a1a;
}

/* Base Reset & Grid Background */
body {
  background-color: var(--bg-color);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: var(--line-body);

  /* Dotted Grid Pattern */
  background-image: radial-gradient(var(--grid-dot-color, var(--grey-med)) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 2em;
  margin-bottom: 0.75em;
  text-transform: uppercase;
}

h1 {
  font-size: 2.5rem;
  line-height: 1.1;
}

h2 {
  font-size: 1.75rem;
  border-bottom: 2px solid var(--border-color);
  padding-bottom: 0.5rem;
}

h3 {
  font-size: 1.25rem;
}

/* Links */
a {
  color: var(--text-primary);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--transition-fast);
}

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

/* Code Blocks */
pre,
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border-color);
  padding: 1rem;
  overflow-x: auto;
}

/* Specific Utilities */
.u-text-display {
  font-family: var(--font-display);
}

.u-text-mono {
  font-family: var(--font-mono);
}