/* ============================================================
   amplaio — Design Tokens
   Selbst gehostete Schriften + globale CSS-Variablen.
   Muss als erste Stylesheet-Datei eingebunden werden.
   ============================================================ */

/* ---------- Fonts (selbst gehostet — keine externen CDNs) ---------- */
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clashdisplay-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clashdisplay-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Clash Display";
  src: url("../fonts/clashdisplay-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrainsmono-latin.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --bg:          #070b14;
  --bg-deep:     #04060c;
  --surface:     rgba(255, 255, 255, 0.035);
  --surface-2:   rgba(255, 255, 255, 0.06);
  --surface-3:   rgba(255, 255, 255, 0.09);
  --border:      rgba(255, 255, 255, 0.09);
  --border-lit:  rgba(255, 255, 255, 0.18);

  --text:        #eef2f8;
  --text-dim:    #9aa6bd;
  --text-faint:  #8b95ad;

  --mint:        #3affd0;
  --violet:      #7c5cff;
  --azure:       #3a8bff;
  --accent:      var(--mint);

  --grad-text:   linear-gradient(108deg, #3affd0 0%, #6fe9ff 38%, #7c5cff 100%);
  --grad-line:   linear-gradient(90deg, #3affd0, #7c5cff);

  --font-display: "Clash Display", "Satoshi", system-ui, sans-serif;
  --font-body:    "Satoshi", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --maxw: 1240px;
  --pad: clamp(1.25rem, 4vw, 3.25rem);
  --radius: 20px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}