@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/HankenGrotesk-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Okine";
  src: url("../fonts/MADEOkineSans-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Okine";
  src: url("../fonts/MADEOkineSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Okine";
  src: url("../fonts/MADEOkineSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #0a0a0a;
  --color-fg: #f4f1ea;
  --color-muted: rgba(244, 241, 234, 0.55);
  --color-line: rgba(244, 241, 234, 0.12);
  --color-accent: #d9b46c;

  --font-display: "Hanken Grotesk", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-body: "Okine", "Hanken Grotesk", system-ui, sans-serif;

  --max-w: 1440px;

  --pad-x: clamp(1.25rem, 3.5vw, 3rem);
  --pad-y: clamp(1rem, 2.5vw, 2rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --t-fast: 180ms cubic-bezier(.4,0,.2,1);
  --t-med:  320ms cubic-bezier(.4,0,.2,1);
  --t-slow: 600ms cubic-bezier(.4,0,.2,1);

  /* Brand mark: three rounded corners + sharp bottom-right (echoes logo C icon) */
  --brand-shape: 999px 999px 3px 999px;
}