/* Generated by design/build_tokens.py from design/huisstijl.json. */
:root {
  --color-surface: #FFFFFF;
  --color-surface-subtle: #F6F8FA;
  --color-surface-footer: #F4F7F9;
  --color-border: #E6E9EF;
  --color-text: #242B37;
  --color-text-muted: #5B6776;
  --color-rail: #5779F8;
  --color-rail-selected: #4364E5;
  --color-rail-icon: #9AAFFC;
  --color-rail-icon-active: #FFFFFF;
  --color-brand-tile: #F6F8FF;
  --color-navigation-accent: #9950FE;
  --color-focus: #7742D9;
  --color-glyph-gradient-start: #0092F5;
  --color-glyph-gradient-end: #A848FF;
  --color-action-primary: #FE9000;
  --color-action-primary-hover: #FEA026;
  --color-action-primary-ink: #FFFFFF;
  --color-share: #FFA800;
  --color-share-ink: #302511;
  --color-control-border: #828DA1;
  --color-muted-surface: #EDF1F5;
  --color-action-secondary-hover: #F2EAFB;
  --color-accent-ink: #553489;
  --color-rail-text: #141C42;
  --color-success-ink: #285738;
  --color-success-surface: #E8F6EA;
  --color-warning-ink: #77510D;
  --color-warning-surface: #FFF3D9;
  --color-error-ink: #8E3F54;
  --color-error-surface: #FBE9EE;
  --color-info-ink: #075973;
  --color-info-surface: #DAF3FA;
  --color-disabled-ink: #596577;
  --color-disabled-surface: #EDF1F5;
  --color-action-primary-high-contrast: #A04300;
  --color-rail-logout: #4364E5;
  --color-rail-logout-icon: #8EA2F0;
  --color-login-surface: #211F29;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --font-headings: "Roboto", Inter, Arial, sans-serif;
  --font-body: "Open Sans", Inter, Arial, sans-serif;
  --type-page-title-size: 36px;
  --type-page-title-line: 44px;
  --type-page-title-weight: 500;
  --type-section-title-size: 24px;
  --type-section-title-line: 32px;
  --type-section-title-weight: 500;
  --type-body-size: 14px;
  --type-body-line: 22px;
  --type-body-weight: 400;
  --type-label-size: 13px;
  --type-label-line: 20px;
  --type-label-weight: 600;
  --type-metadata-size: 12px;
  --type-metadata-line: 18px;
  --type-metadata-weight: 400;
  --type-h3-size: 20px;
  --type-h3-line: 28px;
  --type-h3-weight: 600;
  --type-h4-size: 18px;
  --type-h4-line: 26px;
  --type-h4-weight: 600;
  --type-h5-size: 16px;
  --type-h5-line: 24px;
  --type-h5-weight: 600;
  --type-h6-size: 14px;
  --type-h6-line: 22px;
  --type-h6-weight: 600;
  --type-marketing-title-size: 48px;
  --type-marketing-title-line: 56px;
  --type-marketing-title-weight: 600;
  --radius-control: 6px;
  --radius-panel: 8px;
  --radius-dialog: 12px;
  --radius-pill: 999px;
  --radius-primary-action: 2px;
  --layout-rail-collapsed-width: 72px;
  --layout-rail-expanded-width: 220px;
  --layout-rail-collapsed-width-mobile: 54px;
  --layout-rail-expanded-width-mobile: 175px;
  --layout-header-height: 72px;
  --layout-activity-pane-width: 250px;
  --layout-avatar-header-size: 34px;
  --layout-avatar-profile-size: 60px;
  --layout-content-max: 1440px;
  --size-target: 44px;
  --shadow-overlay: 0 16px 48px rgb(33 31 41 / 20%);
  --motion-duration: 160ms;
  --tab-overview-surface: #EEF1FD;
  --tab-overview-ink: #4C55B0;
  --tab-knowledge-surface: #F2E6F3;
  --tab-knowledge-ink: #683980;
  --tab-sources-surface: #DAF3FA;
  --tab-sources-ink: #075973;
  --tab-tasks-surface: #EAF7E7;
  --tab-tasks-ink: #315F32;
  --tab-activity-surface: #FFF0DF;
  --tab-activity-ink: #834710;
  --status-draft-surface: #EEF1F4;
  --status-draft-ink: #465466;
  --status-pending-review-surface: #FFF3D9;
  --status-pending-review-ink: #77510D;
  --status-approved-surface: #E8F6EA;
  --status-approved-ink: #285738;
  --status-rejected-surface: #FBE9EE;
  --status-rejected-ink: #8E3F54;
}
.ds-workarea { container: workarea / inline-size; }
.ds-grid {
  --grid-columns: 4;
  --grid-gap: 16px;
  --grid-inset: 16px;
  --grid-main: 4;
  --grid-side: 0;
}
@container workarea (min-width: 640px) {
  .ds-grid {
    --grid-columns: 8;
    --grid-gap: 24px;
    --grid-inset: 24px;
    --grid-main: 8;
    --grid-side: 0;
  }
}
@container workarea (min-width: 1024px) {
  .ds-grid {
    --grid-columns: 12;
    --grid-gap: 32px;
    --grid-inset: 32px;
    --grid-main: 9;
    --grid-side: 3;
  }
}