/* Huisstijl dashboard (Brandcast). Zie README.md. Paden naar fonts relatief aan deze map. */

@font-face { font-family: 'New Order'; src: url(/static/fonts/NewOrder-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'New Order'; src: url(/static/fonts/NewOrder-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'New Order'; src: url(/static/fonts/NewOrder-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'New Order'; src: url(/static/fonts/NewOrder-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Merk (white-label: alleen deze wisselen) */
  --accent: #1d78bc;
  --accent-hover: #1a6aa6;
  --accent-soft: #e6f0f8;
  --accent-text: #1d6aa8;
  --secondary: #1f5a99;
  --sidebar: #023047;

  /* Basis */
  --navy: #023047;
  --page: #f4f5f8;
  --page-light: #f3f8fc;
  --card: #ffffff;
  --line: #e4e6eb;
  --line-soft: #eef0f3;
  --divider: #dadce2;
  --input: #c9cdd5;
  --ink: #161a22;
  --ink-2: #5a606c;
  --ink-3: #8b909b;

  /* Status */
  --green: #3cb39c;
  --green-soft: #e3f4ef;
  --green-border: #bfe3d9;
  --green-text: #1f6b47;
  --amber-soft: #fff3dc;
  --amber-border: #f0d29a;
  --amber-text: #8a5300;
  --danger: #b4232e;
  --danger-soft: #fdecec;
  --danger-border: #f3b8b8;
  --danger-text: #8e1c1c;
  --info-soft: #e8f1f9;
  --info-border: #c8dcf0;
  --info-text: #1f5a99;
  --orange: #d9822b;
  --mint: #9fd9cc;
  --label-soft: #e4eef7;
  --label-border: #c6daee;

  /* Letters */
  --font: 'New Order', system-ui, sans-serif;
  --fs-title: 34px;
  --fs-modal: 26px;
  --fs-section: 22px;
  --fs-row: 17px;
  --fs-nav: 19px;
  --fs-body: 15px;
  --fs-label: 14px;
  --fs-small: 13px;

  /* Maten */
  --h-button: 46px;
  --h-button-sm: 36px;
  --h-input: 48px;
  --r-control: 8px;
  --r-card: 12px;
  --r-modal: 16px;
  --sidebar-w: 320px;
  --sidebar-w-collapsed: 88px;
  --page-pad-x: 48px;

  /* Schaduwen */
  --shadow-round: 0 1px 2px rgba(13, 48, 71, 0.06);
  --shadow-pill: 0 4px 12px rgba(0, 0, 0, 0.18);
  --shadow-menu: 0 16px 40px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.06);
  --shadow-toast: 0 14px 34px rgba(2, 48, 71, 0.16);
  --backdrop: rgba(2, 48, 71, 0.3);
}

html, body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font); font-size: var(--fs-body); }
a { color: var(--secondary); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Rond vinkje voor elke checkbox en radio */
input[type='checkbox'], input[type='radio'] {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 22px; height: 22px; margin: 0;
  border: 1.5px solid var(--input); border-radius: 9999px; background: #fff center / 12px 12px no-repeat; cursor: pointer;
}
input[type='checkbox']:checked, input[type='radio']:checked {
  border-color: var(--accent); background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' stroke='%23FFFFFF' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}