@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap");

@font-face {
  font-family: "Supply";
  src: url("/fonts/supply/Supply-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Supply";
  src: url("/fonts/supply/PPSupplySans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand colors */
  --color-bg: #0a0a0a;
  --color-fg: #ffffff;
  --color-accent: #6fdc4d;
  --border-color: #737373;

  /* Typography */
  --font-nav: "Supply", "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Archivo Black", "Space Grotesk", Arial, sans-serif;
  --font-body: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* ---- Sticky nav ---- */
/* Keeps the nav in view while scrolling, on every page. */
[data-site-nav] {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* In-page links (e.g. /toolkit#hpc) land below the sticky nav, not under it. */
html {
  scroll-padding-top: 90px;
}

/* ---- Nav theming ---- */
simple-nav {
  --nav-bg-start: var(--color-bg);
  --nav-fg: var(--color-fg);
  --nav-font-family: var(--font-nav);
  --nav-font-weight: 400;
  --nav-active-color: #9a9a9a;
  --nav-border-color: var(--border-color);
}

/* ---- Work showcase theming ---- */
work-showcase {
  --wc-bg: transparent;
  --wc-font-heading: var(--font-heading);
  --wc-font-body: var(--font-nav);
  --wc-accent: var(--color-fg);
  --wc-border: var(--color-fg);
}

/* ---- Stack strip theming ---- */
stack-strip {
  --ss-font-heading: var(--font-heading);
  --ss-font-body: var(--font-nav);
}

/* ---- About fetch theming ---- */
about-fetch {
  --af-font-heading: var(--font-heading);
  --af-font-body: var(--font-nav);
}

/* ---- Portfolio page theming ---- */
portfolio-page {
     --pp-font-heading: var(--font-heading);
     --pp-font-body: var(--font-nav);
}