/* ==========================================================================
   NFC-TATTOO – DESIGN TOKENS
   Zentrale Stelle für Farben, Typografie, Abstände, Radien, Motion.
   Änderungen hier wirken auf die gesamte Website (DE + EN).
   ========================================================================== */

@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Farben: Marke (aus Logo: Lime #B2DD4C + Grau #525252) ---------- */
  --lime-300: #cdeb86;
  --lime-400: #b2dd4c;          /* Markenfarbe – Akzent auf dunklen Flächen */
  --lime-600: #6c9a14;
  --lime-700: #4d7208;          /* Akzent für Text auf hellen Flächen (>= 5:1) */

  --ink-950: #0a0c08;           /* tiefes, leicht grünstichiges Schwarz */
  --ink-900: #11140d;
  --ink-800: #1a1f14;
  --ink-700: #2a3120;
  --ink-500: #525252;           /* Logo-Grau */
  --ink-400: #787d70;

  --paper-0: #ffffff;
  --paper-50: #f7f6f1;          /* gebrochenes Weiß – Standardfläche */
  --paper-100: #eeede6;
  --paper-200: #dedcd1;

  /* ---- Semantische Farben ------------------------------------------- */
  --c-bg: var(--paper-50);
  --c-bg-alt: var(--paper-100);
  --c-bg-dark: var(--ink-900);
  --c-bg-darker: var(--ink-950);
  --c-text: var(--ink-900);
  --c-text-soft: #4a4f42;       /* >= 7:1 auf paper-50 */
  --c-text-on-dark: #f3f3ec;
  --c-text-on-dark-soft: #b9bdaf; /* >= 7:1 auf ink-900 */
  --c-accent: var(--lime-400);
  --c-accent-text: var(--lime-700);
  --c-line: rgba(17, 20, 13, 0.14);
  --c-line-on-dark: rgba(243, 243, 236, 0.16);
  --c-focus: #2f6bff;
  --c-error: #b3261e;

  /* ---- Typografie ---------------------------------------------------- */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-eyebrow: 0.8125rem;
  --fs-small: 0.875rem;
  --fs-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-lead: clamp(1.125rem, 1.02rem + 0.55vw, 1.4rem);
  --fs-h4: clamp(1.15rem, 1.08rem + 0.3vw, 1.35rem);
  --fs-h3: clamp(1.4rem, 1.2rem + 0.9vw, 1.9rem);
  --fs-h2: clamp(2.1rem, 1.4rem + 3.2vw, 4.25rem);
  --fs-h1: clamp(2.7rem, 1.5rem + 4.6vw, 5.75rem);

  --lh-tight: 1.02;
  --lh-snug: 1.2;
  --lh-body: 1.6;
  --tracking-display: -0.035em;
  --tracking-eyebrow: 0.14em;

  /* ---- Abstände (8px-Raster) ---------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-section: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);

  /* ---- Layout -------------------------------------------------------- */
  --container: 76rem;
  --container-wide: 92rem;
  --container-narrow: 46rem;
  --header-h: 4.5rem;
  --anchor-offset: calc(var(--header-h) + 1rem);

  /* ---- Radien & Schatten -------------------------------------------- */
  --r-sm: 0.5rem;
  --r-md: 1rem;
  --r-lg: 1.75rem;
  --r-xl: 2.5rem;
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(10, 12, 8, 0.06), 0 12px 32px -12px rgba(10, 12, 8, 0.18);
  --shadow-lift: 0 2px 4px rgba(10, 12, 8, 0.08), 0 28px 60px -20px rgba(10, 12, 8, 0.35);

  /* ---- Buttons ------------------------------------------------------- */
  --btn-h: 3.25rem;
  --btn-px: 1.6rem;
  --btn-radius: var(--r-pill);

  /* ---- Motion (Emil-Kowalski-Prinzipien: starke Ease-out-Kurven) ---- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-press: 140ms;
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 700ms;
  --reveal-distance: 22px;

  /* ---- Breakpoints (Referenz; in @media als feste Werte) -------------
     --bp-sm 40rem (640) | --bp-md 48rem (768) | --bp-lg 64rem (1024)
     --bp-xl 80rem (1280)                                              */
}