/* ════════════════════════════════════════════════════════════════════
   recotex-ui v1 — 2026-07
   Gedeelde design-tokens voor de Recotex-tools:
     · chat-widget + admin (Donker Premium — [data-rx-theme="dark"])
     · onboarding-popup + calculators (Dag Premium V2 "Wit & glas" — :root)

   Canonieke kopie: Recotex Customer Ai repo → brand/recotex-ui.css
   Vendored kopieën (integraal overschrijven, nooit lokaal patchen):
     · Recotex-onboarding/public/recotex-ui.css
     · Recotex-Calculators/public/recotex-ui.css

   Widget-mapping (Tailwind v4 @theme in packages/widget/src/styles.css —
   de widget compileert zijn CSS en leest dit bestand niet at runtime):
     --rx-navy → --color-primary · --rx-orange → --color-accent
     --rx-ink (dark) → --color-ink · radius/glow-waarden identiek
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── merkconstanten (Brand Book 2026) ── */
  --rx-navy: #1a3860;
  --rx-navy-deep: #16294a;
  --rx-navy-soft: #20416e;
  --rx-orange: #f08300;
  --rx-orange-dark: #d47300;
  --rx-font: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --rx-radius-sm: 12px;
  --rx-radius-md: 16px;
  --rx-radius-lg: 22px;
  --rx-glow-orange: 0 4px 18px rgba(240, 131, 0, 0.35);
  --rx-focus: 0 0 0 3px rgba(240, 131, 0, 0.15);
  --rx-focus-border: rgba(240, 131, 0, 0.6);

  /* ── Dag Premium — V2 "Wit & glas" (gekozen 2026-07-07) ── */
  --rx-bg: #fdfeff;
  --rx-bg-2: #edf2f9;
  --rx-ink: #16294a;
  --rx-muted: #5f6f8c;
  --rx-card: rgba(255, 255, 255, 0.78);
  --rx-card-blur: blur(10px);
  --rx-border: rgba(26, 56, 96, 0.12);
  --rx-field: rgba(255, 255, 255, 0.9);
  --rx-field-border: rgba(26, 56, 96, 0.16);
  --rx-icon-tile: rgba(26, 56, 96, 0.08);
  --rx-shadow-card: 0 14px 38px rgba(26, 56, 96, 0.1);
  --rx-shadow-float: 0 30px 80px rgba(5, 12, 25, 0.55);
  --rx-success: #2e7d4f;
  --rx-success-soft: rgba(46, 125, 79, 0.12);
  --rx-danger: #c4362b;
}

/* ── Donker Premium (widget/admin-referentie; vlak = navy gradiënt
      168deg #16294a → #1a3860 55% → #20416e) ── */
[data-rx-theme='dark'] {
  --rx-bg: #16294a;
  --rx-bg-2: #20416e;
  --rx-ink: #edf1f8;
  --rx-muted: rgba(237, 241, 248, 0.55);
  --rx-card: rgba(255, 255, 255, 0.07);
  --rx-card-blur: blur(10px);
  --rx-border: rgba(255, 255, 255, 0.12);
  --rx-field: rgba(255, 255, 255, 0.08);
  --rx-field-border: rgba(255, 255, 255, 0.12);
  --rx-icon-tile: rgba(255, 255, 255, 0.1);
  --rx-shadow-card: 0 14px 38px rgba(5, 12, 25, 0.35);
  --rx-shadow-float: 0 30px 80px rgba(10, 20, 40, 0.5);
  --rx-success: #4ade80;
  --rx-success-soft: rgba(74, 222, 128, 0.15);
  --rx-danger: #ff8d7a;
}