@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* Brand palette */
  --brand-taupe: #b39b88;
  --brand-taupe-deep: #9b825d;
  --brand-sand: #dfccbb;
  --brand-stone: #afa6a0;
  --brand-black: #1a1919;
  --brand-graphite: #303132;
  --brand-slate: #454546;
  --brand-ivory: #e6e1dd;

  /* Klant light-vars */
  --c-bg: #f4ede6;
  --c-surface: #ffffff;
  --c-surface-2: #faf6f1;
  --c-border: rgba(26, 25, 25, 0.08);
  --c-border-strong: rgba(26, 25, 25, 0.14);
  --c-text: #1a1919;
  --c-text-2: #676465;
  /* F-89: --c-text-3 was #9f9a96 → contrast 2.2:1 op --c-bg, faalt WCAG-AA.
     Aangedonkerd naar #6d6862 voor ~4.6:1 contrast op #f4ede6 background. */
  --c-text-3: #6d6862;

  /* Dark shell-vars */
  --d-bg: #141311;
  --d-surface: #1d1b19;
  --d-surface-2: #232120;
  --d-surface-3: #2a2826;
  --d-border: #2e2c2a;
  --d-border-strong: #3d3a37;
  --d-text: #ece7e1;
  --d-text-2: #afa6a0;
  --d-text-3: #6d6963;

  /* Status-vars */
  --st-submitted: #c9a063;
  --st-submitted-bg: rgba(201, 160, 99, 0.14);
  --st-picked: #c8865a;
  --st-picked-bg: rgba(200, 134, 90, 0.14);
  --st-scheduled: #89a3b5;
  --st-scheduled-bg: rgba(137, 163, 181, 0.14);
  --st-resolved: #7ea885;
  --st-resolved-bg: rgba(126, 168, 133, 0.14);
  --st-critical: #c85a5a;
  --st-critical-bg: rgba(200, 90, 90, 0.14);

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Shadows */
  --sh-xs: 0 1px 2px rgba(26, 25, 25, 0.04);
  --sh-sm: 0 2px 6px rgba(26, 25, 25, 0.05);
  --sh-md: 0 6px 20px rgba(26, 25, 25, 0.06), 0 2px 4px rgba(26, 25, 25, 0.04);
  --sh-lg: 0 20px 50px rgba(26, 25, 25, 0.1), 0 6px 12px rgba(26, 25, 25, 0.05);
}