/* Design tokens for the Dashboard PWA.
 *
 * Phase 5 visual pass: palette switched to "Patina" (warm amber / rust on a brown-black),
 * the accent direction the user picked from frontend-dev/mockups/accent-options.html (option 1).
 * Token NAMES are unchanged from the Phase 2 split, so no JS/markup had to change — only values.
 * Added a display-font var, a tighter type scale, and elevation shadows. */

:root {
  color-scheme: dark;

  /* ---- Patina palette ---- */
  --bg: #15110c;
  --panel: #1f1a12;
  --panel-raised: #2a2318;
  --text: #f0e9dd;
  --muted: #a99a83;
  --accent: #e08a3a;
  --accent-text: #1a1004;
  --border: #352c1e;
  --error-bg: #2c1611;
  --error-border: #7d3a2c;
  --error-text: #ff9d84;
  /* "resolved / good" status color — added for the Verhuizing tab's status pills (mover
     "gekozen", question "beantwoord", risk "gemitigeerd"). Nothing green-ish existed before this;
     --accent is already the interactive/brand color, not a status color, so reusing it for "done"
     would clash with buttons/active-segment styling. */
  --ok-bg: #16261a;
  --ok-border: #3a6b47;
  --ok-text: #7fd996;

  /* ---- typography ---- */
  --font-body: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Space Grotesk", var(--font-body);
  /* tighter type scale */
  --fs-bar: 12px;      /* panel bar / section headings (uppercase) */
  --fs-title: 14px;    /* card + list-item titles */
  --fs-title-lg: 16px; /* garage profile title */
  --fs-meta: 12px;     /* secondary lines */
  --fs-body: 13.5px;   /* form inputs, detail rows */

  /* ---- shape / elevation ---- */
  --radius: 12px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-raised: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-bar: 0 -2px 10px rgba(0, 0, 0, .35);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}