/* ============================================================
   SYLG — Living Club Design System
   tokens.css  ·  Fonts + Design Tokens (CSS Custom Properties)
   Ein System für ALLE Seiten (Landing + Rechtsseiten).
   ============================================================ */

/* ---- Self-hosted fonts (woff2, latin) --------------------- */
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk";
  src:url("../fonts/space-grotesk-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo Black";
  src:url("../fonts/archivo-black-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("../fonts/ibm-plex-sans-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

/* ---- Tokens ---------------------------------------------- */
:root{
  color-scheme:dark;

  /* Base — Near-Black + Weiß-Opacity-Stufen */
  --bg:#0a0a0a;
  --bg-deep:#070708;
  --ink:rgba(255,255,255,.92);
  --ink-80:rgba(255,255,255,.8);
  --ink-70:rgba(255,255,255,.7);
  --ink-60:rgba(255,255,255,.6);
  --ink-40:rgba(255,255,255,.4);
  --ink-30:rgba(255,255,255,.3);
  --hair:rgba(255,255,255,.1);
  --hair-soft:rgba(255,255,255,.06);

  /* Neon-Palette */
  --cyan:#00FFE0;
  --teal:#00A896;
  --violet:#7A5FFF;
  --magenta:#E500FF;
  --pink:#FF006E;
  --coral:#FF4458;
  --mint:#06FFA5;

  /* Logo — vier Gradient-Letters (135deg) */
  --grad-s:linear-gradient(135deg,#00FFE0,#00A896);
  --grad-y:linear-gradient(135deg,#7A5FFF,#E500FF);
  --grad-l:linear-gradient(135deg,#FF006E,#FF4458);
  --grad-g:linear-gradient(135deg,#06FFA5,#00FFE0);

  /* System-Gradients */
  --grad-primary:linear-gradient(135deg,#00FFE0,#7A5FFF);
  --grad-spectrum:linear-gradient(120deg,#00FFE0 0%,#7A5FFF 42%,#E500FF 68%,#FF006E 100%);

  /* Glassmorphism */
  --glass:rgba(255,255,255,.025);
  --glass-2:rgba(255,255,255,.045);
  --glass-brd:rgba(255,255,255,.1);
  --glass-brd-strong:rgba(255,255,255,.2);
  --glass-blur:blur(16px) saturate(1.25);

  /* Radius */
  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;
  --r-pill:999px;

  /* Type */
  --font-display:"Space Grotesk",ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-logo:"Archivo Black",var(--font-display);
  --font-body:"IBM Plex Sans",ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;

  --fs-logo:clamp(3.25rem,14.25vw,10rem);
  --fs-h1:clamp(2rem,1.2rem + 3.4vw,3.4rem);
  --fs-h2:clamp(1.7rem,1.15rem + 2.4vw,2.75rem);
  --fs-h3:clamp(1.18rem,1.05rem + 0.5vw,1.45rem);
  --fs-lead:clamp(1.1rem,1.02rem + 0.5vw,1.32rem);
  --fs-body:clamp(1rem,0.95rem + 0.25vw,1.1rem);
  --fs-read:clamp(1.02rem,0.97rem + 0.32vw,1.15rem);
  --fs-sm:0.9rem;
  --fs-eyebrow:0.78rem;

  /* Layout */
  --wrap:1180px;
  --wrap-narrow:900px;
  --gutter:clamp(1.25rem,4vw,2.5rem);
  --section-y:clamp(4.5rem,9vw,8.5rem);
  --header-h:72px;

  /* Motion */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.7s;
  --dur-fast:.28s;

  /* Effekt-Intensität (0..1) — Gesamtwert 65 % */
  --fx:.65;
}