:root {
  --on30-color-text-primary: #103055;
  --on30-color-text-muted: #526a7e;
  --on30-color-canvas: #f7fbff;
  --on30-color-surface: #ffffff;
  --on30-color-border: #d7e8f7;
  --on30-color-blue: #147bd1;
  --on30-color-blue-dark: #0d5fae;
  --on30-color-sky: #0fb2eb;
  --on30-color-sky-soft: #e8f6ff;
  --on30-color-success: #198754;
  --on30-color-warning: #b7791f;
  --on30-color-danger: #b42318;
  --on30-color-neutral: #64748b;
  --on30-shadow-card: 0 24px 60px rgba(20, 123, 209, 0.13);
  --on30-shadow-header: 0 12px 24px rgba(20, 123, 209, 0.16);
  --on30-shadow-action: 0 16px 32px rgba(15, 178, 235, 0.26);
  --on30-focus-ring: 0 0 0 3px rgba(20, 123, 209, 0.34);
  --on30-radius-base: 8px;
  --on30-grid-line-blue: rgba(20, 123, 209, 0.08);
  --on30-grid-line-sky: rgba(15, 178, 235, 0.09);
  --on30-dashboard-surface: rgba(255, 255, 255, 0.92);
  --on30-dashboard-surface-soft: rgba(255, 255, 255, 0.68);
  --on30-dashboard-row-alt: rgba(232, 246, 255, 0.58);
  --on30-dashboard-panel-shadow: 0 18px 42px rgba(20, 123, 209, 0.08);
  --on30-dashboard-primary-bg: linear-gradient(135deg, rgba(13, 95, 174, 0.96), rgba(20, 123, 209, 0.9) 58%, rgba(15, 178, 235, 0.88));
  --on30-dashboard-primary-border: rgba(15, 178, 235, 0.34);
  --on30-dashboard-primary-shadow: 0 24px 48px rgba(20, 123, 209, 0.18);
  --on30-dashboard-primary-muted: rgba(255, 255, 255, 0.82);
  --on30-dashboard-focus-border: rgba(20, 123, 209, 0.34);
  --on30-dashboard-chart-warning-bg: rgba(183, 121, 31, 0.18);
  --on30-dashboard-chart-blue-bg: rgba(20, 123, 209, 0.2);
  --on30-dashboard-chart-success-bg: rgba(25, 135, 84, 0.18);
  --on30-dashboard-chart-danger-bg: rgba(180, 35, 24, 0.16);

  --on30-app-bg: var(--on30-color-canvas);
  --on30-topbar-bg: linear-gradient(
    90deg,
    var(--on30-color-blue-dark),
    var(--on30-color-blue) 54%,
    var(--on30-color-sky)
  );
  --on30-sidebar-bg: var(--on30-color-sky-soft);
  --on30-sidebar-active-bg: var(--on30-color-blue);
  --on30-sidebar-active-text: #ffffff;
  --on30-table-header-bg: var(--on30-color-blue-dark);
  --on30-table-header-text: #ffffff;
  --on30-table-border: var(--on30-color-border);
  --on30-row-hover-bg: var(--on30-color-sky-soft);
  --on30-button-primary-bg: var(--on30-color-sky);
  --on30-button-primary-hover-bg: var(--on30-color-blue);
  --on30-link-color: var(--on30-color-blue);
  --on30-topbar-height: 58px;
}