/* =============================================================
   Looptrail — Design-System / Tokens
   Konzept: "Der Faden, der nie abreißt"
   Monochrom-treu. EIN Akzent: Blueprint-Rot, ausschließlich für
   den laufenden Loop ("läuft von selbst").
   ============================================================= */

/* ---- Self-hosted Fonts ---- */
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/space-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../assets/fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  /* ---- Farben ---- */
  --paper:      #FAFAF8;   /* Grundfläche — technischer Bauplan auf Papier */
  --paper-2:    #F2F2EE;   /* leichte Vertiefung / Sektionswechsel */
  --ink:        #111110;   /* Faden, Text, alles Strukturelle */
  --ink-soft:   #2A2A28;

  --gray-1:     #6B6B66;   /* Sekundärtext */
  --gray-2:     #A3A39C;   /* Metainfos, gedämpft */
  --gray-3:     #D8D8D2;   /* Raster, Linien, Chaos-Zustand */
  --gray-4:     #E9E9E4;   /* feinste Hilfslinien */

  /* Der EINE Akzent — nur der laufende Loop. Sonst nirgends. */
  --loop:       #C1361F;   /* Blueprint-Rot / Mennige */
  --loop-glow:  rgba(193, 54, 31, 0.16);

  /* ---- Typografie ---- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Fluid type scale (clamp min .. max) */
  --fs-mono:    0.775rem;                                   /* Belege, Labels */
  --fs-small:   0.875rem;
  --fs-body:    clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lead:    clamp(1.125rem, 1.02rem + 0.5vw, 1.4rem);
  --fs-h4:      clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  --fs-h3:      clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);
  --fs-h2:      clamp(2rem, 1.4rem + 2.8vw, 3.4rem);
  --fs-h1:      clamp(2.4rem, 1.5rem + 3.3vw, 4.35rem);
  --fs-mega:    clamp(3.2rem, 1.6rem + 7vw, 7rem);

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.62;

  --tracking-mono: 0.14em;   /* Mono-Labels gesperrt */
  --tracking-tight: -0.02em;
  --tracking-mega:  -0.035em;

  /* ---- Spacing (8px-Grid) ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  16px;
  --sp-4:  24px;
  --sp-5:  32px;
  --sp-6:  48px;
  --sp-7:  64px;
  --sp-8:  96px;
  --sp-9:  128px;
  --sp-10: 192px;

  --section-pad: clamp(72px, 10vw, 168px);

  /* ---- Layout ---- */
  --maxw:       1200px;
  --maxw-text:  62ch;
  --gutter:     clamp(20px, 5vw, 64px);
  --radius:     0px;        /* Bauplan: keine SaaS-Rundungen */
  --radius-sm:  2px;
  --hairline:   1px solid var(--gray-3);
  --hairline-soft: 1px solid var(--gray-4);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur:        420ms;
  --dur-slow:   900ms;

  /* ---- Z-Index Skala ---- */
  --z-spine:    1;
  --z-content:  2;
  --z-nav:      50;
  --z-genesis:  60;
  --z-overlay:  80;
}