/* ==========================================================================
   Capsule — Design Tokens (Single Source of Truth for the web look)
   --------------------------------------------------------------------------
   "Clean & modern", eigener Web-Look (NICHT die Editorial-Optik der App):
   viel Weißraum, neutrale Palette, EIN ruhiger Akzent (sage-teal) für
   interaktive Elemente. Alles als CSS-Custom-Properties — hier, an einer
   Stelle. Komponenten in app.css konsumieren ausschliesslich diese Tokens.
   ========================================================================== */
:root {
  /* --- Neutral palette ------------------------------------------------ */
  --c-bg: #fafaf9;            /* page background (warm off-white)          */
  --c-surface: #ffffff;       /* cards / raised surfaces                   */
  --c-surface-2: #f4f4f2;     /* subtle secondary fill                     */
  --c-text: #1f2123;          /* anthracite body text                     */
  --c-text-muted: #6b7077;    /* secondary / meta text                    */
  --c-border: #e7e6e3;        /* hairline borders                         */
  --c-border-strong: #d7d5d1; /* stronger separators / inputs             */

  /* --- One calm accent (links, active state, primary action) ---------- */
  --c-accent: #3f6f63;
  --c-accent-rgb: 63, 111, 99;
  --c-accent-hover: #345a50;
  --c-accent-contrast: #ffffff;
  --c-accent-subtle: #eef3f1;  /* tint background for active/selected      */
  --c-accent-border: #cdded8;  /* border to pair with the subtle tint      */

  /* --- Semantic (used sparingly, kept muted not loud) ----------------- */
  --c-success: #3f7d5a;
  --c-danger: #b4453c;
  --c-warning: #b9842b;

  /* --- Typography ----------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.875rem;    /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md: 1.0625rem;   /* 17 */
  --fs-lg: 1.25rem;     /* 20 */
  --fs-xl: 1.5rem;      /* 24 */
  --fs-2xl: 1.875rem;   /* 30 */

  --lh-tight: 1.2;
  --lh-base: 1.55;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-heading: -0.011em;  /* Inter looks best with a touch of negative tracking */

  /* --- Spacing (8px rhythm) ------------------------------------------- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */

  /* --- Radii ---------------------------------------------------------- */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Elevation (flat / subtle) -------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 20, 30, 0.05);
  --shadow-sm: 0 1px 3px rgba(20, 20, 30, 0.06), 0 1px 2px rgba(20, 20, 30, 0.04);
  --shadow: 0 4px 14px rgba(20, 20, 30, 0.07);
  --shadow-lg: 0 12px 30px rgba(20, 20, 30, 0.10);

  /* --- Layout --------------------------------------------------------- */
  --nav-height: 60px;
  --touch-target: 44px;   /* mobile-first minimum hit area */
}