/* =====================================================================
   Parkmelder MS – Design-Token-System
   Eine einzige Quelle für Farben, Typografie, Abstände, Radien, Schatten,
   Bewegung und Layout. Alle Komponenten in app.css konsumieren nur diese Tokens.
   Tonalität: zivil, vertrauenswürdig, ruhig, wertig.
   ===================================================================== */

/* ---- Schriften (self-hosted, offline-fähig) ------------------------- */
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/fonts/hanken-grotesk-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Farbe: Basis --------------------------------------------------- */
  --ink:            #14201f;   /* sehr dunkles Graphit (Text) */
  --ink-2:          #3c4a48;   /* sekundärer Text */
  --muted:          #66756f;   /* Hinweise/Labels */

  --bg:             #f2f5f0;   /* gebrochenes Weiß */
  --surface:        #ffffff;   /* Karten/Flächen */
  --surface-2:      #eef2ec;   /* leicht abgesetzt */
  --surface-sunken: #e7ece6;   /* Vertiefungen (z. B. Preview) */

  --line:           #dbe2da;   /* Hairlines */
  --line-strong:    #c3ccc1;

  /* ---- Farbe: Marke (Trust – ruhiges Petrol) ------------------------- */
  --brand:          #0f5a63;
  --brand-strong:   #0c454c;
  --brand-deep:     #0a373d;
  --brand-tint:     #e2edeb;   /* helle Fläche */
  --brand-tint-2:   #d3e3e1;
  --on-brand:       #ffffff;

  /* ---- Farbe: Aktions-Akzent (warmes Amber – NUR primäre Aktion) ----- */
  --accent:         #c9770f;
  --accent-strong:  #ac640a;   /* pressed/hover */
  --accent-tint:    #f9ecd8;
  --on-accent:      #ffffff;

  /* ---- Farbe: Status -------------------------------------------------- */
  --ok:             #1f7a4d;
  --ok-tint:        #e2f2ea;
  --err:            #c23b2e;
  --err-tint:       #fbe7e4;
  --warn:           #b0730f;

  /* ---- Typografie ----------------------------------------------------- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs:   0.8125rem;   /* 13 */
  --text-sm:   0.9375rem;   /* 15 */
  --text-base: 1.0625rem;   /* 17 – komfortabel für Touch */
  --text-md:   1.1875rem;   /* 19 */
  --text-lg:   1.375rem;    /* 22 */
  --text-xl:   1.75rem;     /* 28 */
  --text-2xl:  2.125rem;    /* 34 */
  --text-3xl:  2.625rem;    /* 42 – Hero */

  --lh-tight:  1.1;
  --lh-snug:   1.28;
  --lh-normal: 1.55;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.04em;

  /* ---- Abstände (4px-Basis) ------------------------------------------ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;  --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;  --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;

  /* ---- Radien --------------------------------------------------------- */
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 16px;  --r-lg: 22px;  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- Schatten / Elevation (weich, wertig) -------------------------- */
  --shadow-sm: 0 1px 2px rgba(10,55,61,.06), 0 1px 1px rgba(10,55,61,.04);
  --shadow-md: 0 6px 18px -6px rgba(10,55,61,.16), 0 2px 6px -2px rgba(10,55,61,.08);
  --shadow-lg: 0 22px 48px -16px rgba(10,55,61,.28);
  --ring-brand:  0 0 0 4px rgba(15,90,99,.20);
  --ring-accent: 0 0 0 4px rgba(201,119,15,.24);

  /* ---- Bewegung ------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur:      200ms;
  --dur-slow: 340ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease:     cubic-bezier(.4,0,.2,1);

  /* ---- Layout --------------------------------------------------------- */
  --content-max: 33rem;   /* ~528px */
  --tap-min: 3.25rem;     /* 52px */
  --appbar-h: 3.5rem;

  /* ---- z-index -------------------------------------------------------- */
  --z-appbar: 10;
  --z-overlay: 50;
  --z-toast: 60;
}

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