/* Modern UI design tokens and density/theme variables. */
:root {
  --fkf-primary: #0a6464;
  --fkf-primary-rgb: 10, 100, 100;
  --fkf-secondary: #26684e;
  --fkf-tertiary: #f4b400;
  --fkf-accent: #1f8a70;
  --fkf-link: #0969da;
  --fkf-success: #198754;
  --fkf-danger: #dc3545;
  --fkf-warning: #ffc107;
  --fkf-info: #0dcaf0;
  --fkf-nav-icon: var(--fkf-primary);
  --fkf-bg: #f5f7fb;
  --fkf-surface: #ffffff;
  --fkf-surface-muted: #f0f4f8;
  --fkf-text: #17212f;
  --fkf-text-muted: #5b6b82;
  --fkf-border: #d5dfeb;
  --fkf-shadow-soft: 0 10px 30px rgba(15, 23, 42, 0.08);
  --fkf-radius-xs: 4px;
  --fkf-radius-sm: 6px;
  --fkf-radius-md: 8px;
  --fkf-font-weight-semibold: 500;
  --fkf-font-weight-bold: 600;
  --fkf-font-weight-heavy: 600;
  --fkf-topbar-height: 46px;
  --fkf-sidebar-width: 236px;
  --fkf-density-font-size: 13px;
  --fkf-content-padding: 10px;
  --fkf-content-padding-mobile: 6px;
  --fkf-layout-gap: 5px;
  --fkf-grid-gap: 5px;
  --fkf-space-1: 0.12rem;
  --fkf-space-2: 0.22rem;
  --fkf-space-3: 0.36rem;
  --fkf-space-4: 0.5rem;
  --fkf-space-5: 0.7rem;
  --fkf-card-spacer-y: 0.42rem;
  --fkf-card-spacer-x: 0.52rem;
  --fkf-card-cap-padding-y: 0.32rem;
  --fkf-card-cap-padding-x: 0.52rem;
  --fkf-topbar-action-gap: 2px;
  --fkf-btn-padding-y: 0.18rem;
  --fkf-btn-padding-x: 0.44rem;
  --fkf-btn-font-size: 0.78rem;
  --fkf-btn-sm-padding-y: 0.18rem;
  --fkf-btn-sm-padding-x: 0.38rem;
  --fkf-btn-sm-font-size: 0.76rem;
  --fkf-control-padding-y: 0.24rem;
  --fkf-control-padding-x: 0.48rem;
  --fkf-control-font-size: 0.84rem;
  --fkf-control-min-height: 30px;
  --fkf-label-margin-bottom: 0.18rem;
  --fkf-table-font-size: 0.82rem;
  --fkf-table-cell-padding-y: 0.28rem;
  --fkf-table-cell-padding-x: 0.38rem;
  --fkf-modal-padding: 0.68rem;
  --fkf-modal-header-padding-y: 0.5rem;
  --fkf-page-heading-size: 19px;
  --fkf-page-intro-size: 12px;
  --fkf-page-intro-line-height: 1.35;
  --fkf-nav-shell-y: 9px;
  --fkf-nav-shell-x: 8px;
  --fkf-nav-item-gap: 3px;
  --fkf-nav-link-y: 7px;
  --fkf-nav-link-x: 8px;
  --fkf-nav-link-gap: 8px;
  --fkf-nav-sublist-y: 3px;
  --fkf-nav-sublist-x: 15px;
  --fkf-nav-subitem-y: 5px;
  --fkf-nav-subitem-x: 7px;
  --fkf-dashboard-card-padding: 6px;
  --fkf-dashboard-card-gap: 5px;
  --fkf-dashboard-action-min-height: 60px;
  --fkf-dashboard-stat-min-height: 50px;
  --fkf-dashboard-avatar-size: 46px;
  --fkf-dashboard-heading-size: 22px;
  --fkf-dashboard-intro-size: 0.9rem;
  --fkf-dashboard-access-font-size: 10px;
  --fkf-dashboard-action-icon-size: 30px;
  --fkf-dashboard-action-title-size: 0.9rem;
  --fkf-dashboard-action-desc-size: 11px;
  --fkf-dashboard-stat-value-size: 17px;
  --fkf-dashboard-stat-label-size: 11px;
}

:root[data-density="comfortable"],
body.fkf-modern[data-density="comfortable"] {
  --fkf-topbar-height: 52px;
  --fkf-density-font-size: 14px;
  --fkf-content-padding: 14px;
  --fkf-content-padding-mobile: 9px;
  --fkf-layout-gap: 7px;
  --fkf-grid-gap: 7px;
  --fkf-space-1: 0.18rem;
  --fkf-space-2: 0.3rem;
  --fkf-space-3: 0.48rem;
  --fkf-space-4: 0.65rem;
  --fkf-space-5: 0.9rem;
  --fkf-card-spacer-y: 0.58rem;
  --fkf-card-spacer-x: 0.7rem;
  --fkf-card-cap-padding-y: 0.42rem;
  --fkf-card-cap-padding-x: 0.7rem;
  --fkf-topbar-action-gap: 3px;
  --fkf-btn-padding-y: 0.24rem;
  --fkf-btn-padding-x: 0.55rem;
  --fkf-btn-font-size: 0.84rem;
  --fkf-btn-sm-padding-y: 0.24rem;
  --fkf-btn-sm-padding-x: 0.48rem;
  --fkf-btn-sm-font-size: 0.82rem;
  --fkf-control-padding-y: 0.3rem;
  --fkf-control-padding-x: 0.56rem;
  --fkf-control-font-size: 0.9rem;
  --fkf-control-min-height: 32px;
  --fkf-label-margin-bottom: 0.24rem;
  --fkf-table-font-size: 0.88rem;
  --fkf-table-cell-padding-y: 0.36rem;
  --fkf-table-cell-padding-x: 0.48rem;
  --fkf-modal-padding: 0.8rem;
  --fkf-modal-header-padding-y: 0.6rem;
  --fkf-page-heading-size: 21px;
  --fkf-page-intro-size: 13px;
  --fkf-page-intro-line-height: 1.38;
  --fkf-nav-shell-y: 12px;
  --fkf-nav-shell-x: 10px;
  --fkf-nav-item-gap: 4px;
  --fkf-nav-link-y: 9px;
  --fkf-nav-link-x: 10px;
  --fkf-nav-link-gap: 10px;
  --fkf-nav-sublist-y: 4px;
  --fkf-nav-sublist-x: 18px;
  --fkf-nav-subitem-y: 7px;
  --fkf-nav-subitem-x: 9px;
  --fkf-dashboard-card-padding: 8px;
  --fkf-dashboard-card-gap: 7px;
  --fkf-dashboard-action-min-height: 72px;
  --fkf-dashboard-stat-min-height: 58px;
  --fkf-dashboard-avatar-size: 50px;
  --fkf-dashboard-heading-size: 24px;
  --fkf-dashboard-intro-size: 0.95rem;
  --fkf-dashboard-access-font-size: 10.5px;
  --fkf-dashboard-action-icon-size: 33px;
  --fkf-dashboard-action-title-size: 0.95rem;
  --fkf-dashboard-action-desc-size: 11.5px;
  --fkf-dashboard-stat-value-size: 18px;
  --fkf-dashboard-stat-label-size: 11.5px;
}

:root[data-density="spacious"],
body.fkf-modern[data-density="spacious"] {
  --fkf-topbar-height: 56px;
  --fkf-density-font-size: 15px;
  --fkf-content-padding: 18px;
  --fkf-content-padding-mobile: 11px;
  --fkf-layout-gap: 9px;
  --fkf-grid-gap: 9px;
  --fkf-space-1: 0.22rem;
  --fkf-space-2: 0.4rem;
  --fkf-space-3: 0.62rem;
  --fkf-space-4: 0.82rem;
  --fkf-space-5: 1.05rem;
  --fkf-card-spacer-y: 0.76rem;
  --fkf-card-spacer-x: 0.84rem;
  --fkf-card-cap-padding-y: 0.54rem;
  --fkf-card-cap-padding-x: 0.84rem;
  --fkf-topbar-action-gap: 4px;
  --fkf-btn-padding-y: 0.34rem;
  --fkf-btn-padding-x: 0.68rem;
  --fkf-btn-font-size: 0.88rem;
  --fkf-btn-sm-padding-y: 0.3rem;
  --fkf-btn-sm-padding-x: 0.58rem;
  --fkf-btn-sm-font-size: 0.86rem;
  --fkf-control-padding-y: 0.38rem;
  --fkf-control-padding-x: 0.68rem;
  --fkf-control-font-size: 0.94rem;
  --fkf-control-min-height: 36px;
  --fkf-label-margin-bottom: 0.3rem;
  --fkf-table-font-size: 0.92rem;
  --fkf-table-cell-padding-y: 0.48rem;
  --fkf-table-cell-padding-x: 0.62rem;
  --fkf-modal-padding: 0.92rem;
  --fkf-modal-header-padding-y: 0.74rem;
  --fkf-page-heading-size: 24px;
  --fkf-page-intro-size: 14px;
  --fkf-page-intro-line-height: 1.42;
  --fkf-nav-shell-y: 13px;
  --fkf-nav-shell-x: 11px;
  --fkf-nav-item-gap: 5px;
  --fkf-nav-link-y: 10px;
  --fkf-nav-link-x: 11px;
  --fkf-nav-link-gap: 11px;
  --fkf-nav-sublist-y: 5px;
  --fkf-nav-sublist-x: 20px;
  --fkf-nav-subitem-y: 8px;
  --fkf-nav-subitem-x: 10px;
  --fkf-dashboard-card-padding: 10px;
  --fkf-dashboard-card-gap: 9px;
  --fkf-dashboard-action-min-height: 84px;
  --fkf-dashboard-stat-min-height: 68px;
  --fkf-dashboard-avatar-size: 54px;
  --fkf-dashboard-heading-size: 26px;
  --fkf-dashboard-intro-size: 1rem;
  --fkf-dashboard-access-font-size: 11px;
  --fkf-dashboard-action-icon-size: 36px;
  --fkf-dashboard-action-title-size: 1rem;
  --fkf-dashboard-action-desc-size: 12px;
  --fkf-dashboard-stat-value-size: 20px;
  --fkf-dashboard-stat-label-size: 12px;
}

:root[data-theme="dark"],
body.fkf-modern[data-theme="dark"],
html[data-theme="dark"] body.fkf-modern {
  --fkf-primary: #109a8d;
  --fkf-primary-rgb: 16, 154, 141;
  --fkf-secondary: #63c6ad;
  --fkf-accent: #17a98f;
  --fkf-bg: #101820;
  --fkf-surface: #16212b;
  --fkf-surface-muted: #1d2a35;
  --fkf-text: #edf4f7;
  --fkf-text-muted: #a8b7c3;
  --fkf-border: #2c3e4b;
  --fkf-link: #7ec8ff;
  --fkf-nav-icon: #8df0da;
  --fkf-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.3);
}