/* Design-Tokens der Eunoa-Website.
 *
 * Einzige Quelle für Farbe, Typo, Spacing, Radien, Motion. Kein Hex-Wert und keine
 * Pixelzahl ausserhalb der Skala irgendwo sonst im Markup — das ist die Voraussetzung
 * dafür, dass die Tweak-Bar funktioniert und dass „im System bleiben" überprüfbar ist.
 *
 * Farb- und Glaswerte sind 1:1 aus dem App-Theme „Schiefer · Hell" übernommen
 * (app/src/theme/theme.ts). Ändert sich das Theme dort, muss es hier mitziehen —
 * die Wiedererkennung zwischen App und Website ist der ganze Zweck der Seite.
 */

:root {
  /* ---- Farbe: Schiefer · Hell (theme.ts → schiefer.light) ---- */
  --c-bg: #eef2f7;
  --c-bg-grad-a: #eef2f7;
  --c-bg-grad-b: #e9eef4;

  /* die drei weichen Radial-Blobs des App-Hintergrunds */
  --c-blob-1: #bccdde;
  --c-blob-2: #c8c9d8;
  --c-blob-3: #bccfd0;

  --c-text: #21272e;
  --c-text-muted: #61676d;
  --c-text-label: #8b9199;

  /* Akzent sitzt ausschliesslich auf Interaktion (Buttons, Links, Fokus) */
  --c-accent: #3c4958;
  --c-accent-2: #324049;
  --c-accent-rgb: 60, 73, 88;
  --c-on-accent: #ffffff;

  /* Gem-Verlauf des Logomarks — bewusst heller als der Akzent, nie als Buttonfarbe */
  --c-gem-a: #a9b9ca;
  --c-gem-b: #8294a7;
  --c-on-gem: #1b2127;

  --c-success: #6f8a5f;
  --c-danger: #456777;

  /* ---- Glas (lightGlass in theme.ts, dort als Opazitäten) ---- */
  --glass-fill-top: rgba(255, 255, 255, 0.46);
  --glass-fill-bottom: rgba(255, 255, 255, 0.36);
  --glass-border: rgba(255, 255, 255, 0.51);
  --glass-highlight: rgba(255, 255, 255, 0.64);
  --glass-blur: 24px;
  --hairline: #e2ddd6;

  --shadow-color: 70, 95, 110; /* #465f6e */
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.06);
  --shadow-md: 0 8px 24px rgba(var(--shadow-color), 0.1);
  --shadow-lg: 0 24px 64px rgba(var(--shadow-color), 0.13);

  /* ---- Typografie ----
   * Zwei Register: Serife fürs Ruhige/Redaktionelle, Grotesk für alles
   * Funktionale. Die Wortmarke trägt dieselbe Serife in Medium — Nunito, das
   * die App dafür lädt, wollte der Nutzer nicht. Solange die App nicht
   * nachzieht, tragen App und Website verschiedene Marken; das ist bekannt.
   */
  --font-serif: 'Newsreader', ui-serif, Georgia, serif;
  --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mark: var(--font-serif);

  /* Typo-Skala, Faktor ~1.25, auf 16px Basis. Keine Grösse ausserhalb davon. */
  --t-xs: 0.8125rem;   /* 13px — Labels, Fussnoten */
  --t-sm: 0.9375rem;   /* 15px — Kleintext */
  --t-base: 1.0625rem; /* 17px — Fliesstext */
  --t-md: 1.3125rem;   /* 21px — Lead */
  --t-lg: 1.75rem;     /* 28px */
  --t-xl: 2.375rem;    /* 38px */
  --t-2xl: 3.25rem;    /* 52px */
  --t-3xl: 4.25rem;    /* 68px — nur Hero */

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-body: 1.62;

  --tracking-tight: -0.02em;
  --tracking-label: 0.08em;

  /* ---- Spacing: 4px-Einheit, feste Stufen ---- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* ---- Mass & Radien ---- */
  --measure: 34rem;      /* Lesebreite Fliesstext */
  --container: 68rem;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* ---- Motion: darf orientieren, nie aufhalten ---- */
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}