/* Tavola design tokens (briefing §2). Enige plek met kleurwaarden. */
:root {
  --ground: #F5F0E6;       /* achtergrond, kalksteen */
  --surface: #FFFDF8;      /* kaarten, tabbalk */
  --ink: #22261F;          /* tekst */
  --ink-2: #62665C;        /* secundaire tekst */
  --ink-3: #6B6E63;        /* inactieve tab */
  --placeholder: #7A7D72;  /* placeholder in invoervelden */
  --line: #E3DCCD;         /* randen */
  --line-soft: #EEE8DC;    /* scheidingen in lijsten */
  --tabbar-line: #E6DFD0;  /* bovenrand tabbalk */
  --chip-border: #DCD4C3;
  --track: #EAE3D4;        /* segmented control, progress-achtergrond */
  --track-soft: #F0EADD;   /* knoppen van de personen-stepper */
  --segment-off: #4E5249;  /* tekst van een niet-gekozen segment */
  --terracotta: #A9472A;   /* primaire acties, actieve tab */
  --olive: #55613A;        /* status "klopt", sectiekoppen, voortgang */
  --olive-dark: #3F4A2A;
  --olive-tint: #E1E4CF;
  --saffron-tint: #F2E3BF; /* "hier moet jij naar kijken" */
  --saffron-deep: #E8D29C; /* icoonvlak op saffraan */
  --saffron-ink: #4F3A0C;
  --saffron-ink-2: #5C3D10;  /* vraagtekst bij een regel om te checken */
  --saffron-strong: #8A4B0F; /* "1 om te checken", icoon controleren */
  --saffron-wash: #FBF3E0;   /* achtergrond van een regel om te checken */
  --terracotta-tint: #EED8CA;
  --terracotta-ink: #8A3A21; /* icoon op terracotta-tint */
  --sea-tint: #D9E2E6;     /* extra kleur voor foto-placeholders */

  /* sheet */
  --handle: #D2C8B4;
  --scrim: rgba(24, 27, 22, 0.48);

  /* bord-icoon op foto-placeholders */
  --terracotta-mark: #C4876B;
  --olive-mark: #8A9468;
  --sea-mark: #7E97A3;
  --saffron-mark: #C2A35A;

  /* kookmodus (donker) */
  --cook-bg: #1E231F;
  --cook-surface: #2C332D;
  --cook-line: #4A524A;
  --cook-text: #F5F0E6;
  --cook-text-2: #B9BCAE;
  --cook-accent: #E89B7C;

  /* typografie */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Figtree', system-ui, sans-serif;

  /* maten */
  --gutter: 20px;
  --radius-card: 20px;
  --radius-field: 14px;
  --radius-chip: 18px;
  --touch: 44px;
  --tabbar-height: 86px;
}