/* ============================================================
   Balans: design tokens
   Dark OLED, glazen kaarten, één accentkleur per domein.
   Bron: docs/design/mockup/mockup.css (tertiaire inkt verhoogd voor contrast).
   ============================================================ */

:root {
  /* Grond en oppervlakken */
  --bg:          #070B14;
  --surface:     #0D1117;
  --elev:        #131926;
  --elev-2:      #1A2130;
  --glass:       rgba(255, 255, 255, 0.045);
  --glass-hover: rgba(255, 255, 255, 0.07);
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* Tekst (contrast op --bg: 15:1, 7,7:1 en 5,2:1) */
  --ink:   #E6EDF3;
  --ink-2: #9AA4B2;
  --ink-3: #7A8494;
  --link:  #7FB0F5;

  /* Domeinkleuren (gevalideerd op donkere grond) */
  --voeding:  #E2701F;
  --beweging: #12A594;
  --kracht:   #8B5CF6;
  --gewicht:  #2F7FE6;
  --hart:     #E23A6E;
  --water:    #38BDF8;

  /* Status: los van de domeinkleuren, altijd met icoon of tekst */
  --ok:   #22C55E;
  --warn: #FACC15;
  --bad:  #EF4444;

  /* Standaard accent (per scherm of kaart te overschrijven met --a) */
  --a: var(--gewicht);

  /* Typografie */
  --font: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "Fira Code", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   24px;
  --fs-2xl:  32px;
  --fs-hero: 44px;

  /* Ruimte */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;

  /* Vorm en diepte */
  --r-sm:   10px;
  --r:      16px;
  --r-lg:   22px;
  --r-full: 999px;
  --shadow:    0 24px 64px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.35);

  /* Lay-out */
  --tabbar-h:    64px;
  --sidebar-w:   232px;
  --content-max: 1180px;
  --tap:         44px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* Beweging */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:   140ms;
  --t-base:   220ms;
  --t-slow:   700ms;

  /* Lagen */
  --z-tabbar: 30;
  --z-header: 20;
  --z-sheet:  50;
  --z-toast:  60;
}