/*
 * fitpass — designtokens.
 * Alle kleuren en maten staan hier; pas ze aan om het uiterlijk bij te sturen.
 * (De QR-code zelf is altijd zwart op puur wit, los van deze tokens.)
 */

@font-face {
  font-family: "Archivo Black";
  src: url("/fonts/archivo-black-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Kleuren */
  --color-bg: #f1e6d6;            /* warme beige basis */
  --color-surface: #faf6f0;       /* topbalk, kaarten */
  --color-surface-strong: #ffffff;
  --color-border: #e6d5bd;        /* kaartranden, scheidingslijnen */
  --color-text: #2b2b2b;
  --color-text-muted: #6e665c;
  --color-accent: #fe7000;        /* oranje: actief, highlights */
  --color-accent-soft: #ffa21f;   /* tweede kleur van het oranje verloop */
  --color-primary: #5a2bb0;       /* paars: primaire knoppen, links */
  --color-primary-hover: #4a2193;
  --color-on-primary: #ffffff;
  --color-on-accent: #ffffff;
  --color-success: #1e8e4e;
  --color-warning: #c77700;
  --color-danger: #d42a1e;
  --color-danger-soft: #fde7e4;
  --color-success-soft: #e3f4e9;
  --color-dark: #2c2c2c;          /* donkere kaarten / camerabeeld */

  /* Typografie */
  --font-body: Roboto, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Archivo Black", "Arial Black", var(--font-body);
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.25rem;
  --weight-bold: 700;
  --tracking-caps: 0.02em;

  /* Ruimte */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --gutter: 20px;                 /* zijmarge van pagina's */
  --content-max: 520px;

  /* Vormen */
  --radius-sm: 2px;
  --radius: 4px;                  /* kaarten, invoervelden */
  --radius-btn: 6px;
  --radius-round: 999px;
  --border-width: 2px;
  --control-height: 48px;         /* knoppen en invoervelden */
  --btn-font-size: 1rem;
  --btn-tall-height: 52px;        /* grote knoppen: plannen, toegang, chat */
  --icon-size: 28px;
  --topbar-height: 72px;
  --appbar-height: 72px;          /* topbalk app-pagina's */
  --appbar-profile-size: 36px;    /* profielknop linksboven */
  --appbar-icon-size: 24px;       /* hart en envelop */
  --tabbar-height: 62px;          /* navigatiebalk onderaan */
  --tabbar-icon-size: 22px;
  --tabbar-center-size: 50px;     /* oranje QR-knop in het midden */
  --access-bar-height: 72px;      /* paarse knop boven de navigatiebalk */
  --radius-lg: 10px;

  /* /show (toegangsscherm) */
  --show-top-height: 56px;        /* witte balk met het kruisje */
  --qr-frame-width: 4px;          /* oranje kader rond de QR */
  --qr-progress-height: 6px;
  --stale-color: var(--color-danger);

  /* /account (profiel) */
  --color-profile-bg: #f1e6d6;
  --color-badge: #e0302a;         /* rood bolletje op het envelop-icoon */
  --avatar-size: 145px;
  --menu-item-height: 66px;
}