/*
 * Starter token-set (venture foundation)
 * Vervang de prefix "x" door de bedrijfs-prefix en vul de
 * brand-placeholders in vanuit het surface-DESIGN_SYSTEM.md.
 * De scales (spacing, phi, type, motion) zijn generiek en
 * worden NIET per bedrijf aangepast.
 */
:root {
  /* ---- Kleur (brand-invulling per surface, placeholders) ---- */
  --ba-bg: #ffffff;            /* TODO: surface-achtergrond */
  --ba-surface: #f7f7f8;       /* TODO: card/panel-achtergrond */
  --ba-text: #1a1a2e;          /* TODO: donkere merk-tint, geen puur zwart */
  --ba-text-muted: #6b7280;    /* TODO */
  --ba-text-faint: #9ca3af;    /* TODO */
  --ba-accent: #2b5c8a;        /* TODO: primaire actie-kleur */
  --ba-line: #e5e7eb;          /* TODO: scheidingslijn (tabellen, dividers) */
  --ba-border: #e3e8f0;        /* TODO */
  --ba-border-strong: #c9d2e0; /* TODO */

  /* Status: altijd paar van tekst- en bg-token */
  --ba-success: #15633e;       /* TODO */
  --ba-success-bg: #e8f5ee;    /* TODO */
  --ba-warning: #8a5a00;       /* TODO */
  --ba-warning-bg: #fdf3e0;    /* TODO */
  --ba-danger: #c0392b;        /* TODO */
  --ba-danger-bg: #fbeae8;     /* TODO */

  /* ---- Typografie ---- */
  --ba-font: system-ui, sans-serif;          /* TODO: body-font */
  --ba-font-display: var(--ba-font);          /* TODO: display-font indien afwijkend */
  --ba-font-mono: ui-monospace, monospace;

  /* phi-scale, modular rond 1rem body (generiek, niet aanpassen) */
  --ba-type-xs: 0.618rem;      /* 10px: hint, label-small */
  --ba-type-sm: 0.79rem;       /* 13px: small body */
  --ba-type-base: 1rem;        /* 16px: body */
  --ba-type-lead: 1.272rem;    /* 20px: lead, card-label */
  --ba-type-h3: 1.618rem;      /* 26px: section title */
  --ba-type-h2: 2.058rem;      /* 33px: subhero */
  --ba-type-h1: 2.618rem;      /* 42px: page title */
  --ba-type-display: 4.236rem; /* 68px: hero count */

  /* ---- Spacing: 8px-grid (generiek, niet aanpassen) ---- */
  --ba-space-half: 0.25rem;    /* 4px: extreme finetuning */
  --ba-space-1: 0.5rem;        /* 8px: micro */
  --ba-space-2: 1rem;          /* 16px: base */
  --ba-space-3: 1.5rem;        /* 24px: sectie-inner */
  --ba-space-4: 2rem;          /* 32px: sectie-tot-sectie */
  --ba-space-5: 3rem;          /* 48px: page-gutter desktop */
  --ba-space-6: 4rem;          /* 64px: grote vertical rhythm */

  /* ---- Spacing-Fibonacci voor component-ritme (generiek) ---- */
  --ba-phi-1: 0.5rem;          /* 8px */
  --ba-phi-2: 0.75rem;         /* 12px */
  --ba-phi-3: 1.25rem;         /* 20px */
  --ba-phi-4: 2rem;            /* 32px */
  --ba-phi-5: 3.25rem;         /* 52px */
  --ba-phi-6: 5.25rem;         /* 84px */

  /* ---- Aspect-ratios (gulden rechthoek) ---- */
  --ba-phi-rect: 1.618 / 1;
  --ba-phi-rect-tall: 1 / 1.618;

  /* ---- Radius (waarden per surface te bevestigen) ---- */
  --ba-radius-sm: 6px;
  --ba-radius: 10px;
  --ba-radius-lg: 14px;

  /* ---- Shadow (brand-invulling per surface) ---- */
  --ba-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);          /* TODO */
  --ba-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);      /* TODO */

  /* ---- Motion (generiek) ---- */
  --ba-t-fast: 180ms;
  --ba-t-base: 280ms;
  --ba-t-slow: 450ms;
  --ba-ease: cubic-bezier(0.16, 1, 0.3, 1);  /* spring, voor lift/enter */
}

/*
 * MULTI-SURFACE PATROON
 * Eén bedrijf, meerdere surfaces, EEN set scales. Alleen de kleur-laag
 * (en eventueel fonts/shadows) verschilt per surface; spacing-, phi-,
 * type- en motion-tokens zijn overal identiek en worden nooit
 * per surface geherdefinieerd.
 *
 * Werkwijze: elke surface heeft een eigen tokens.css met (a) een kopie
 * van de generieke scales hierboven en (b) een eigen kleur-laag zoals
 * hieronder. Zelfde token-NAMEN, andere waarden. Zo kan een component
 * tussen surfaces verhuizen zonder dat er een spacing- of type-token
 * breekt; alleen het thema verandert mee.
 *
 * Voorbeeld kleur-laag voor een donkere admin-surface (zelfde namen
 * als de lichte laag hierboven, andere waarden):
 *
 * :root {
 *   --ba-bg: #0a0f1f;            // donkere pagina-achtergrond
 *   --ba-surface: #131a2e;       // panels op donker
 *   --ba-text: #f3f5fb;          // lichte tekst
 *   --ba-text-muted: #b4bed4;
 *   --ba-accent: #7a9ee0;        // accent afgestemd op donker
 *   --ba-line: rgba(255, 255, 255, 0.10);
 *   --ba-border: rgba(255, 255, 255, 0.12);
 *   --ba-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
 *   // scales (--ba-space-*, --ba-phi-*, --ba-type-*, --ba-t-*): identiek,
 *   // niet opnieuw definieren met andere waarden
 * }
 *
 * Anti-patroon: per surface een eigen spacing- of type-scale, of een
 * tweede set token-namen voor hetzelfde concept. De anti-mengregel
 * geldt voor THEMA's (kleuren, effecten), niet voor de scales.
 */

/* Globale form-control base (01_UI_FOUNDATION sectie 5.2):
 * input, select en textarea stylen hier, niet per module. */
input,
select,
textarea {
  font-family: var(--ba-font);
  font-size: var(--ba-type-base);
  color: var(--ba-text);
  background: var(--ba-bg);
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-radius-sm);
  padding: var(--ba-space-1) var(--ba-space-2);
  transition: border-color var(--ba-t-fast) ease-out, box-shadow var(--ba-t-fast) ease-out;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--ba-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ba-accent) 18%, transparent);
}

input::placeholder,
textarea::placeholder {
  color: var(--ba-text-faint);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}