@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/src/assets/fonts/ibm-plex-sans-300.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/src/assets/fonts/ibm-plex-sans-400.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/src/assets/fonts/ibm-plex-sans-500.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/src/assets/fonts/ibm-plex-mono-400.ttf') format('truetype');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/src/assets/fonts/ibm-plex-mono-500.ttf') format('truetype');
}

:root {
  --black: #0a0a0a;
  --white: #f5f4f0;
  --mid: #a8a5a0;
  --accent: #c8441a;
  --border: #2a2a28;
  --mono: 'IBM Plex Mono', monospace;
  --sans: 'IBM Plex Sans', sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 6rem;

  /* Theme-aware aliases */
  --bg: var(--black);
  --fg: var(--white);
  --fg-mid: var(--mid);
  --fg-border: var(--border);
}

/* Light theme */
[data-theme="light"] {
  --bg: #f5f4f0;
  --fg: #0a0a0a;
  --fg-mid: #555250;
  --fg-border: #d5d2ce;
  --border: #d5d2ce;
  --mid: #555250;
  --black: #f5f4f0;
  --white: #0a0a0a;
}

/* Respect system preference unless overridden */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5f4f0;
    --fg: #0a0a0a;
    --fg-mid: #555250;
    --fg-border: #d5d2ce;
    --border: #d5d2ce;
    --mid: #555250;
    --black: #f5f4f0;
    --white: #0a0a0a;
  }
}