/* CT System — generated design tokens 2026-05-30T03:26:22+00:00 */

:root {
    /* ── Color Types ── */
    --color-white: #FFFFFF;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    --color-black: #000000;
    --color-slate: #2C3E50;
    --color-blue-light: #DBEAFE;
    --color-blue-soft: #EFF6FF;
    --color-button-blue: #3B82F6;
    --color-blue-dark: #2563EB;
    --color-green-soft: #D1FAE5;
    --color-green: #22C55E;
    --color-green-dark: #15803D;
    --color-yellow-soft: #FEF3C7;
    --color-yellow: #EAB308;
    --color-yellow-dark: #92400E;
    --color-red-soft: #FEE2E2;
    --color-red: #EF4444;
    --color-red-dark: #B91C1C;
    --color-orange-soft: #FFEDD5;
    --color-orange: #F97316;
    --color-orange-dark: #C2410C;
    --color-purple-soft: #EDE9FE;
    --color-purple: #8B5CF6;
    --color-purple-dark: #6D28D9;
    --color-teal-soft: #CCFBF1;
    --color-teal: #14B8A6;
    --color-teal-dark: #0F766E;
    --color-primary: #3B82F6;
    --color-primary-hover: #2563EB;
    --color-success: #22C55E;
    --color-warning: #EAB308;
    --color-error: #EF4444;
    --color-info: #3B82F6;
    --color-background-page: #F3F4F6;
    --color-background-content: #FFFFFF;
    --color-background-alternate: #F9FAFB;
    --color-background-muted: #F3F4F6;
    --color-background-deeper: #E5E7EB;
    --color-background-hover: #EFF6FF;
    --color-background-selected: #DBEAFE;
    --color-background-overlay: rgba(255,255,255,0.8);
    --color-text-primary: #1F2937;
    --color-text-secondary: #374151;
    --color-text-muted: #6B7280;
    --color-text-disabled: #9CA3AF;
    --color-text-inverse: #FFFFFF;
    --color-border-default: #D1D5DB;
    --color-border-subtle: #E5E7EB;
    --color-border-strong: #2C3E50;
    --color-border-focus: #3B82F6;
}

:root {
    /* ── Font Types ── */
    --font-display-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display-size: 32px;
    --font-display-weight: 700;
    --font-display-style: normal;
    --font-display-color: var(--color-text-primary);
    --font-page-title-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-page-title-size: 24px;
    --font-page-title-weight: 600;
    --font-page-title-style: normal;
    --font-page-title-color: var(--color-text-primary);
    --font-page-subtitle-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-page-subtitle-size: 20px;
    --font-page-subtitle-weight: 600;
    --font-page-subtitle-style: normal;
    --font-page-subtitle-color: var(--color-text-primary);
    --font-section-title-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-section-title-size: 16px;
    --font-section-title-weight: 600;
    --font-section-title-style: normal;
    --font-section-title-color: var(--color-text-primary);
    --font-subsection-title-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-subsection-title-size: 14px;
    --font-subsection-title-weight: 600;
    --font-subsection-title-style: normal;
    --font-subsection-title-color: var(--color-text-primary);
    --font-header-title-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-header-title-size: 18px;
    --font-header-title-weight: 600;
    --font-header-title-style: normal;
    --font-header-title-color: var(--color-text-primary);
    --font-body-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body-size: 14px;
    --font-body-weight: 400;
    --font-body-style: normal;
    --font-body-color: var(--color-text-primary);
    --font-body-strong-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body-strong-size: 14px;
    --font-body-strong-weight: 600;
    --font-body-strong-style: normal;
    --font-body-strong-color: var(--color-text-primary);
    --font-body-compact-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-body-compact-size: 13px;
    --font-body-compact-weight: 400;
    --font-body-compact-style: normal;
    --font-body-compact-color: var(--color-text-primary);
    --font-column-title-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-column-title-size: 13px;
    --font-column-title-weight: 600;
    --font-column-title-style: normal;
    --font-column-title-color: var(--color-text-secondary);
    --font-label-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-label-size: 12px;
    --font-label-weight: 500;
    --font-label-style: normal;
    --font-label-color: var(--color-text-secondary);
    --font-caption-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-caption-size: 12px;
    --font-caption-weight: 400;
    --font-caption-style: normal;
    --font-caption-color: var(--color-text-secondary);
    --font-caption-strong-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-caption-strong-size: 12px;
    --font-caption-strong-weight: 600;
    --font-caption-strong-style: normal;
    --font-caption-strong-color: var(--color-text-primary);
    --font-micro-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-micro-size: 11px;
    --font-micro-weight: 400;
    --font-micro-style: normal;
    --font-micro-color: var(--color-text-secondary);
    --font-stage-label-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-stage-label-size: 11px;
    --font-stage-label-weight: 700;
    --font-stage-label-style: normal;
    --font-stage-label-color: var(--color-text-primary);
    --font-button-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-button-size: 13px;
    --font-button-weight: 500;
    --font-button-style: normal;
    --font-button-color: var(--color-text-primary);
    --font-data-mono-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Courier New', monospace;
    --font-data-mono-size: 13px;
    --font-data-mono-weight: 400;
    --font-data-mono-style: normal;
    --font-data-mono-color: var(--color-text-primary);
}

:root {
    /* ── Line Types ── */
    --line-hairline-weight: 1px;
    --line-hairline-style: solid;
    --line-hairline-color: var(--color-border-subtle);
    --line-hairline: 1px solid var(--color-border-subtle);
    --line-hairline-dashed-weight: 1px;
    --line-hairline-dashed-style: dashed;
    --line-hairline-dashed-color: var(--color-border-subtle);
    --line-hairline-dashed: 1px dashed var(--color-border-subtle);
    --line-minor-weight: 1px;
    --line-minor-style: solid;
    --line-minor-color: var(--color-border-subtle);
    --line-minor: 1px solid var(--color-border-subtle);
    --line-minor-dashed-weight: 1px;
    --line-minor-dashed-style: dashed;
    --line-minor-dashed-color: var(--color-border-subtle);
    --line-minor-dashed: 1px dashed var(--color-border-subtle);
    --line-minor-dotted-weight: 1px;
    --line-minor-dotted-style: dotted;
    --line-minor-dotted-color: var(--color-border-subtle);
    --line-minor-dotted: 1px dotted var(--color-border-subtle);
    --line-major-weight: 1px;
    --line-major-style: solid;
    --line-major-color: var(--color-border-default);
    --line-major: 1px solid var(--color-border-default);
    --line-major-dashed-weight: 1px;
    --line-major-dashed-style: dashed;
    --line-major-dashed-color: var(--color-border-default);
    --line-major-dashed: 1px dashed var(--color-border-default);
    --line-emphasis-weight: 2px;
    --line-emphasis-style: solid;
    --line-emphasis-color: var(--color-border-strong);
    --line-emphasis: 2px solid var(--color-border-strong);
    --line-heavy-mark-weight: 3px;
    --line-heavy-mark-style: solid;
    --line-heavy-mark-color: var(--color-border-strong);
    --line-heavy-mark: 3px solid var(--color-border-strong);
    --line-accent-weight: 1px;
    --line-accent-style: solid;
    --line-accent-color: var(--color-primary);
    --line-accent: 1px solid var(--color-primary);
    --line-accent-dashed-weight: 1px;
    --line-accent-dashed-style: dashed;
    --line-accent-dashed-color: var(--color-primary);
    --line-accent-dashed: 1px dashed var(--color-primary);
    --line-focus-ring-weight: 2px;
    --line-focus-ring-style: solid;
    --line-focus-ring-color: var(--color-border-focus);
    --line-focus-ring: 2px solid var(--color-border-focus);
    --line-status-success-weight: 1px;
    --line-status-success-style: solid;
    --line-status-success-color: var(--color-success);
    --line-status-success: 1px solid var(--color-success);
    --line-status-warning-weight: 1px;
    --line-status-warning-style: solid;
    --line-status-warning-color: var(--color-warning);
    --line-status-warning: 1px solid var(--color-warning);
    --line-status-error-weight: 1px;
    --line-status-error-style: solid;
    --line-status-error-color: var(--color-error);
    --line-status-error: 1px solid var(--color-error);
}

:root {
    /* ── Configurations ── */

    /* Dashboard */
    --cfg-dashboard-tile-hover-effect: var(--color-background-hover);

    /* Editor Page */
    --cfg-editor-page-headding-font-type-family: var(--font-header-title-family);
    --cfg-editor-page-headding-font-type-size: var(--font-header-title-size);
    --cfg-editor-page-headding-font-type-weight: var(--font-header-title-weight);
    --cfg-editor-page-headding-font-type-style: var(--font-header-title-style);
    --cfg-editor-page-headding-font-type-color: var(--font-header-title-color);

    /* buttons */
    --cfg-button-hover-background-color-type: var(--color-black);
    --cfg-button-hover-border-color-type: var(--color-black);
    --cfg-button-hover-content-color-type: var(--color-white);
    --cfg-button-idle-background-color-type: var(--color-white);
    --cfg-button-idle-border-color-type: var(--color-black);
    --cfg-button-idle-content-color-type: var(--color-black);
    --cfg-button-selected-background-color-type: var(--color-primary);
    --cfg-button-selected-border-color-type: var(--color-primary);
    --cfg-button-selected-content-color-type: var(--color-text-inverse);

    /* calendar */
    --cfg-calendar-auto-revert-interval: 30s;
    --cfg-calendar-auto-scroll-rate: 200;
    --cfg-calendar-day-end: 24;
    --cfg-calendar-day-font-type-family: var(--font-section-title-family);
    --cfg-calendar-day-font-type-size: var(--font-section-title-size);
    --cfg-calendar-day-font-type-weight: var(--font-section-title-weight);
    --cfg-calendar-day-font-type-style: var(--font-section-title-style);
    --cfg-calendar-day-font-type-color: var(--font-section-title-color);
    --cfg-calendar-day-start: 0;
    --cfg-calendar-deadline-days: 7;
    --cfg-calendar-drag-gap-width: 8px;
    --cfg-calendar-header-background-filter-color-type: var(--color-yellow-soft);
    --cfg-calendar-header-background-normal-color-type: var(--color-background-content);
    --cfg-calendar-header-padding: 12px;
    --cfg-calendar-hour-line-type-weight: var(--line-minor-weight);
    --cfg-calendar-hour-line-type-style: var(--line-minor-style);
    --cfg-calendar-hour-line-type-color: var(--line-minor-color);
    --cfg-calendar-hour-line-type: var(--line-minor);
    --cfg-calendar-icon-height: 16px;
    --cfg-calendar-icon-spacing: 4px;
    --cfg-calendar-item-background-opacity: 0.85;
    --cfg-calendar-item-border-line-type-weight: var(--line-accent-weight);
    --cfg-calendar-item-border-line-type-style: var(--line-accent-style);
    --cfg-calendar-item-border-line-type-color: var(--line-accent-color);
    --cfg-calendar-item-border-line-type: var(--line-accent);
    --cfg-calendar-item-border-radius: 4px;
    --cfg-calendar-item-font-type-family: var(--font-caption-family);
    --cfg-calendar-item-font-type-size: var(--font-caption-size);
    --cfg-calendar-item-font-type-weight: var(--font-caption-weight);
    --cfg-calendar-item-font-type-style: var(--font-caption-style);
    --cfg-calendar-item-font-type-color: var(--font-caption-color);
    --cfg-calendar-item-padding: 6px;
    --cfg-calendar-page-edge-to-hour-line-spacing: 8px;
    --cfg-calendar-page-edge-to-item-spacing: 12px;
    --cfg-calendar-personal-day-end: 22;
    --cfg-calendar-personal-day-start: 6;
    --cfg-calendar-time-pixels-per-minute: 1px;
    --cfg-calendar-time-scale-font-type-family: var(--font-micro-family);
    --cfg-calendar-time-scale-font-type-size: var(--font-micro-size);
    --cfg-calendar-time-scale-font-type-weight: var(--font-micro-weight);
    --cfg-calendar-time-scale-font-type-style: var(--font-micro-style);
    --cfg-calendar-time-scale-font-type-color: var(--font-micro-color);
    --cfg-calendar-time-scale-to-column-gap: 8px;
    --cfg-calendar-time-to-item-spacing: 4px;
    --cfg-calendar-work-day-end: 17;
    --cfg-calendar-work-day-start: 9;
    --cfg-calendar-work-week-end: 5;
    --cfg-calendar-work-week-start: 1;
    --cfg-calendar-workday-end-line-color-type: var(--color-error);
    --cfg-calendar-workday-end-line-type-weight: var(--line-heavy-mark-weight);
    --cfg-calendar-workday-end-line-type-style: var(--line-heavy-mark-style);
    --cfg-calendar-workday-end-line-type-color: var(--line-heavy-mark-color);
    --cfg-calendar-workday-end-line-type: var(--line-heavy-mark);
    --cfg-calendar-workday-start-line-color-type: var(--color-success);
    --cfg-calendar-workday-start-line-type-weight: var(--line-heavy-mark-weight);
    --cfg-calendar-workday-start-line-type-style: var(--line-heavy-mark-style);
    --cfg-calendar-workday-start-line-type-color: var(--line-heavy-mark-color);
    --cfg-calendar-workday-start-line-type: var(--line-heavy-mark);

    /* dashboard */
    --cfg-dashboard-tile-border-line-type-weight: var(--line-minor-weight);
    --cfg-dashboard-tile-border-line-type-style: var(--line-minor-style);
    --cfg-dashboard-tile-border-line-type-color: var(--line-minor-color);
    --cfg-dashboard-tile-border-line-type: var(--line-minor);
    --cfg-dashboard-tile-border-radius: 6px;
    --cfg-dashboard-tile-count-font-type-family: var(--font-display-family);
    --cfg-dashboard-tile-count-font-type-size: var(--font-display-size);
    --cfg-dashboard-tile-count-font-type-weight: var(--font-display-weight);
    --cfg-dashboard-tile-count-font-type-style: var(--font-display-style);
    --cfg-dashboard-tile-count-font-type-color: var(--font-display-color);
    --cfg-dashboard-tile-hover-background-color-type: var(--color-background-alternate);
    --cfg-dashboard-tile-hover-border-color-type: var(--color-border-default);
    --cfg-dashboard-tile-icon-height: 32px;
    --cfg-dashboard-tile-icon-to-text-spacing: 10px;
    --cfg-dashboard-tile-idle-background-color-type: var(--color-background-content);
    --cfg-dashboard-tile-padding: 12px;
    --cfg-dashboard-tile-selected-background-color-type: var(--color-background-selected);
    --cfg-dashboard-tile-selected-border-color-type: var(--color-primary);
    --cfg-dashboard-tile-spacing: 12px;
    --cfg-dashboard-tile-title-font-color-type: var(--color-warning);
    --cfg-dashboard-tile-title-font-type-family: var(--font-caption-family);
    --cfg-dashboard-tile-title-font-type-size: var(--font-caption-size);
    --cfg-dashboard-tile-title-font-type-weight: var(--font-caption-weight);
    --cfg-dashboard-tile-title-font-type-style: var(--font-caption-style);
    --cfg-dashboard-tile-title-font-type-color: var(--font-caption-color);

    /* form_view */

    /* forms */
    --cfg-form-field-box-background-color-type: var(--color-white);
    --cfg-form-field-box-border-line-type-weight: var(--line-major-weight);
    --cfg-form-field-box-border-line-type-style: var(--line-major-style);
    --cfg-form-field-box-border-line-type-color: var(--line-major-color);
    --cfg-form-field-box-border-line-type: var(--line-major);
    --cfg-form-field-box-border-radius: 3px;
    --cfg-form-field-box-padding: 6px;
    --cfg-form-field-data-font-type-family: var(--font-body-compact-family);
    --cfg-form-field-data-font-type-size: var(--font-body-compact-size);
    --cfg-form-field-data-font-type-weight: var(--font-body-compact-weight);
    --cfg-form-field-data-font-type-style: var(--font-body-compact-style);
    --cfg-form-field-data-font-type-color: var(--font-body-compact-color);
    --cfg-form-field-horizontal-spacing: 16px;
    --cfg-form-field-label-font-color-type: var(--color-38);
    --cfg-form-field-label-font-type-family: var(--font-caption-family);
    --cfg-form-field-label-font-type-size: var(--font-caption-size);
    --cfg-form-field-label-font-type-weight: var(--font-caption-weight);
    --cfg-form-field-label-font-type-style: var(--font-caption-style);
    --cfg-form-field-label-font-type-color: var(--font-caption-color);
    --cfg-form-field-label-position: left;
    --cfg-form-field-label-to-data-spacing: 6px;
    --cfg-form-field-label-width: 100px;
    --cfg-form-field-readonly-background-color-type: var(--color-background-muted);
    --cfg-form-field-vertical-spacing: 10px;
    --cfg-form-list-border-line-type-weight: var(--line-minor-weight);
    --cfg-form-list-border-line-type-style: var(--line-minor-style);
    --cfg-form-list-border-line-type-color: var(--line-minor-color);
    --cfg-form-list-border-line-type: var(--line-minor);
    --cfg-form-list-column-divider-line-type-weight: var(--line-minor-weight);
    --cfg-form-list-column-divider-line-type-style: var(--line-minor-style);
    --cfg-form-list-column-divider-line-type-color: var(--line-minor-color);
    --cfg-form-list-column-divider-line-type: var(--line-minor);
    --cfg-form-list-column-horizontal-padding: 12px;
    --cfg-form-list-column-title-font-type-family: var(--font-caption-family);
    --cfg-form-list-column-title-font-type-size: var(--font-caption-size);
    --cfg-form-list-column-title-font-type-weight: var(--font-caption-weight);
    --cfg-form-list-column-title-font-type-style: var(--font-caption-style);
    --cfg-form-list-column-title-font-type-color: var(--font-caption-color);
    --cfg-form-list-column-title-hover-background-color-type: var(--color-background-deeper);
    --cfg-form-list-column-title-idle-background-color-type: var(--color-background-muted);
    --cfg-form-list-row-alternate-idle-background-color-type: var(--color-background-alternate);
    --cfg-form-list-row-divider-line-type-weight: var(--line-hairline-weight);
    --cfg-form-list-row-divider-line-type-style: var(--line-hairline-style);
    --cfg-form-list-row-divider-line-type-color: var(--line-hairline-color);
    --cfg-form-list-row-divider-line-type: var(--line-hairline);
    --cfg-form-list-row-font-type-family: var(--font-body-compact-family);
    --cfg-form-list-row-font-type-size: var(--font-body-compact-size);
    --cfg-form-list-row-font-type-weight: var(--font-body-compact-weight);
    --cfg-form-list-row-font-type-style: var(--font-body-compact-style);
    --cfg-form-list-row-font-type-color: var(--font-body-compact-color);
    --cfg-form-list-row-hover-background-color-type: var(--color-background-hover);
    --cfg-form-list-row-idle-background-color-type: var(--color-background-content);
    --cfg-form-list-row-selected-background-color-type: var(--color-background-selected);
    --cfg-form-list-row-vertical-padding: 10px;
    --cfg-form-panel-background-color-type: var(--color-background-content);
    --cfg-form-panel-border-line-type-weight: var(--line-minor-weight);
    --cfg-form-panel-border-line-type-style: var(--line-minor-style);
    --cfg-form-panel-border-line-type-color: var(--line-minor-color);
    --cfg-form-panel-border-line-type: var(--line-minor);
    --cfg-form-panel-border-radius: 4px;
    --cfg-form-panel-header-background-color-type: var(--color-background-content);
    --cfg-form-panel-header-button-height: 28px;
    --cfg-form-panel-header-button-horizontal-spacing: 6px;
    --cfg-form-panel-header-button-margin-bottom: 8px;
    --cfg-form-panel-header-button-to-search-spacing: 8px;
    --cfg-form-panel-header-divider-line-type-weight: var(--line-minor-weight);
    --cfg-form-panel-header-divider-line-type-style: var(--line-minor-style);
    --cfg-form-panel-header-divider-line-type-color: var(--line-minor-color);
    --cfg-form-panel-header-divider-line-type: var(--line-minor);
    --cfg-form-panel-header-horizontal-padding: 12px;
    --cfg-form-panel-header-icon-height: 20px;
    --cfg-form-panel-header-icon-to-title-spacing: 8px;
    --cfg-form-panel-header-search-box-font-type-family: var(--font-body-compact-family);
    --cfg-form-panel-header-search-box-font-type-size: var(--font-body-compact-size);
    --cfg-form-panel-header-search-box-font-type-weight: var(--font-body-compact-weight);
    --cfg-form-panel-header-search-box-font-type-style: var(--font-body-compact-style);
    --cfg-form-panel-header-search-box-font-type-color: var(--font-body-compact-color);
    --cfg-form-panel-header-search-box-height: 28px;
    --cfg-form-panel-header-search-box-width: 200px;
    --cfg-form-panel-header-title-font-color-type: var(--color-22);
    --cfg-form-panel-header-title-font-type-family: var(--font-section-title-family);
    --cfg-form-panel-header-title-font-type-size: var(--font-section-title-size);
    --cfg-form-panel-header-title-font-type-weight: var(--font-section-title-weight);
    --cfg-form-panel-header-title-font-type-style: var(--font-section-title-style);
    --cfg-form-panel-header-title-font-type-color: var(--font-section-title-color);
    --cfg-form-panel-header-title-to-component-spacing: 12px;
    --cfg-form-panel-header-toggle-height: 16px;
    --cfg-form-panel-header-toggle-to-title-spacing: 6px;
    --cfg-form-panel-header-vertical-padding: 8px;
    --cfg-form-panel-padding: 16px;
    --cfg-form-panel-spacing: 16px;
    --cfg-form-section-divider-line-type-weight: var(--line-minor-weight);
    --cfg-form-section-divider-line-type-style: var(--line-minor-style);
    --cfg-form-section-divider-line-type-color: var(--line-minor-color);
    --cfg-form-section-divider-line-type: var(--line-minor);
    --cfg-form-section-header-font-type-family: var(--font-caption-family);
    --cfg-form-section-header-font-type-size: var(--font-caption-size);
    --cfg-form-section-header-font-type-weight: var(--font-caption-weight);
    --cfg-form-section-header-font-type-style: var(--font-caption-style);
    --cfg-form-section-header-font-type-color: var(--font-caption-color);
    --cfg-form-section-header-margin-bottom: 10px;
    --cfg-form-section-header-toggle-height: 16px;
    --cfg-form-section-toggle-to-title-spacing: 6px;
    --cfg-form-title-font-color: var(--color-teal-dark);
    --cfg-form-title-font-type-family: var(--font-page-title-family);
    --cfg-form-title-font-type-size: var(--font-page-title-size);
    --cfg-form-title-font-type-weight: var(--font-page-title-weight);
    --cfg-form-title-font-type-style: var(--font-page-title-style);
    --cfg-form-title-font-type-color: var(--font-page-title-color);
    --cfg-form-title-icon-color-type: var(--color-primary);
    --cfg-form-title-icon-size: 32px;
    --cfg-form-title-margin-bottom: 16px;
    --cfg-form-title-to-icon-spacing: 12px;

    /* global */
    --cfg-autosave-interval: 30s;
    --cfg-country-display-abbreviation: no;
    --cfg-country-hide-primary: 1;
    --cfg-country-primary: US;
    --cfg-loading-overlay-color-type: var(--color-background-overlay);
    --cfg-loading-spinner-color-type: var(--color-primary);
    --cfg-status-color-change-delay-ms: 500ms;
    --cfg-status-color-type-done: var(--color-yellow);
    --cfg-status-color-type-inactive: var(--color-text-disabled);
    --cfg-status-color-type-low-priority: var(--color-text-muted);
    --cfg-status-color-type-normal: var(--color-success);
    --cfg-status-color-type-urgent: var(--color-error);
    --cfg-status-color-type-warning: var(--color-warning);
    --cfg-tooltip-delay-milliseconds: 600ms;

    /* header */

    /* icons */
    --cfg-icon-border-corner-radius: 2;
    --cfg-icon-border-reference-height: 49;
    --cfg-icon-border-width: 4;
    --cfg-icon-padding-horizontal: 8;
    --cfg-icon-padding-vertical: 8;
    --cfg-icon-text-font-base-size: 48;
    --cfg-icon-text-font-family: Arial;
    --cfg-icon-text-font-style: normal;
    --cfg-icon-text-font-weight: bold;
    --cfg-icon-text-letter-spacing: 0;

    /* lists */
    --cfg-list-alternate-row-idle-background-color-type: var(--color-background-content);
    --cfg-list-border-color-type: var(--color-border-strong);
    --cfg-list-border-line-type-weight: var(--line-minor-weight);
    --cfg-list-border-line-type-style: var(--line-minor-style);
    --cfg-list-border-line-type-color: var(--line-minor-color);
    --cfg-list-border-line-type: var(--line-minor);
    --cfg-list-border-radius: 8px;
    --cfg-list-column-divider-line-type-weight: var(--line-minor-weight);
    --cfg-list-column-divider-line-type-style: var(--line-minor-style);
    --cfg-list-column-divider-line-type-color: var(--line-minor-color);
    --cfg-list-column-divider-line-type: var(--line-minor);
    --cfg-list-column-horizontal-padding: 12px;
    --cfg-list-column-title-font-type-family: var(--font-subsection-title-family);
    --cfg-list-column-title-font-type-size: var(--font-subsection-title-size);
    --cfg-list-column-title-font-type-weight: var(--font-subsection-title-weight);
    --cfg-list-column-title-font-type-style: var(--font-subsection-title-style);
    --cfg-list-column-title-font-type-color: var(--font-subsection-title-color);
    --cfg-list-column-title-hover-background-color-type: var(--color-background-deeper);
    --cfg-list-column-title-idle-background-color-type: var(--color-background-muted);
    --cfg-list-row-divider-line-type-weight: var(--line-hairline-weight);
    --cfg-list-row-divider-line-type-style: var(--line-hairline-style);
    --cfg-list-row-divider-line-type-color: var(--line-hairline-color);
    --cfg-list-row-divider-line-type: var(--line-hairline);
    --cfg-list-row-font-type-family: var(--font-body-family);
    --cfg-list-row-font-type-size: var(--font-body-size);
    --cfg-list-row-font-type-weight: var(--font-body-weight);
    --cfg-list-row-font-type-style: var(--font-body-style);
    --cfg-list-row-font-type-color: var(--font-body-color);
    --cfg-list-row-hover-background-color-type: var(--color-background-hover);
    --cfg-list-row-idle-background-color-type: var(--color-background-content);
    --cfg-list-row-selected-background-color-type: var(--color-background-selected);
    --cfg-list-row-vertical-padding: 12px;

    /* menu */
    --cfg-menu-child-indent: 20px;
    --cfg-menu-font-hover-color-type: var(--color-text-primary);
    --cfg-menu-font-selected-color-type: var(--color-primary);
    --cfg-menu-font-type-family: var(--font-body-family);
    --cfg-menu-font-type-size: var(--font-body-size);
    --cfg-menu-font-type-weight: var(--font-body-weight);
    --cfg-menu-font-type-style: var(--font-body-style);
    --cfg-menu-font-type-color: var(--font-body-color);
    --cfg-menu-hover-background-color-type: var(--color-background-muted);
    --cfg-menu-idle-background-color-type: var(--color-background-content);
    --cfg-menu-item-height: 32px;
    --cfg-menu-left-padding: 16px;
    --cfg-menu-selected-background-color-type: var(--color-background-selected);
    --cfg-menu-slide-timer: 0.3s;
    --cfg-menu-width: 250px;

    /* pages */
    --cfg-page-background-color-type: var(--color-background-page);
    --cfg-page-header-background-color-type: var(--color-gray-200);
    --cfg-page-header-button-height: 32px;
    --cfg-page-header-button-horizontal-spacing: 6px;
    --cfg-page-header-chevron-font-type-family: var(--font-caption-family);
    --cfg-page-header-chevron-font-type-size: var(--font-caption-size);
    --cfg-page-header-chevron-font-type-weight: var(--font-caption-weight);
    --cfg-page-header-chevron-font-type-style: var(--font-caption-style);
    --cfg-page-header-chevron-font-type-color: var(--font-caption-color);
    --cfg-page-header-chevron-gap: 2px;
    --cfg-page-header-chevron-horizontal-padding: 12px;
    --cfg-page-header-chevron-idle-background-color-type: var(--color-background-muted);
    --cfg-page-header-chevron-idle-font-color-type: var(--color-text-secondary);
    --cfg-page-header-chevron-selected-background-color-type: var(--color-primary);
    --cfg-page-header-chevron-selected-font-color-type: var(--color-text-inverse);
    --cfg-page-header-divider-line-type-weight: var(--line-major-weight);
    --cfg-page-header-divider-line-type-style: var(--line-major-style);
    --cfg-page-header-divider-line-type-color: var(--line-major-color);
    --cfg-page-header-divider-line-type: var(--line-major);
    --cfg-page-header-horizontal-padding: 16px;
    --cfg-page-header-search-box-font-type-family: var(--font-body-compact-family);
    --cfg-page-header-search-box-font-type-size: var(--font-body-compact-size);
    --cfg-page-header-search-box-font-type-weight: var(--font-body-compact-weight);
    --cfg-page-header-search-box-font-type-style: var(--font-body-compact-style);
    --cfg-page-header-search-box-font-type-color: var(--font-body-compact-color);
    --cfg-page-header-search-box-height: 28px;
    --cfg-page-header-search-box-width: 200px;
    --cfg-page-header-stage-indicator-background-color-type: var(--color-yellow-soft);
    --cfg-page-header-stage-indicator-border-color-type: var(--color-yellow);
    --cfg-page-header-stage-indicator-border-radius: 4px;
    --cfg-page-header-stage-indicator-border-weight: 1px;
    --cfg-page-header-stage-indicator-font-color-type: var(--color-yellow-dark);
    --cfg-page-header-stage-indicator-font-type-family: var(--font-caption-family);
    --cfg-page-header-stage-indicator-font-type-size: var(--font-caption-size);
    --cfg-page-header-stage-indicator-font-type-weight: var(--font-caption-weight);
    --cfg-page-header-stage-indicator-font-type-style: var(--font-caption-style);
    --cfg-page-header-stage-indicator-font-type-color: var(--font-caption-color);
    --cfg-page-header-stage-indicator-height: 28px;
    --cfg-page-header-title-font-color-type: var(--color-black);
    --cfg-page-header-title-font-type-family: var(--font-header-title-family);
    --cfg-page-header-title-font-type-size: var(--font-header-title-size);
    --cfg-page-header-title-font-type-weight: var(--font-header-title-weight);
    --cfg-page-header-title-font-type-style: var(--font-header-title-style);
    --cfg-page-header-title-font-type-color: var(--font-header-title-color);
    --cfg-page-header-title-to-component-spacing: 12px;
    --cfg-page-header-vertical-padding: 8px;
    --cfg-page-margin: 20px;
}

:root {
    /* ── Legacy aliases (layout compatibility) ── */
    --page-background-color: var(--cfg-page-background-color-type);
    --page-outer-margin: var(--cfg-page-margin);
    --major-border-color: var(--cfg-page-header-divider-line-type-color);
    --major-border-weight: var(--cfg-page-header-divider-line-type-weight);
    --minor-border-color: var(--color-border-subtle);
    --font-color: var(--color-text-primary);
    --header-vertical-padding: var(--cfg-page-header-vertical-padding);
    --title-text-font: var(--cfg-page-header-title-font-type-family);
    --title-text-size: var(--cfg-page-header-title-font-type-size);
    --title-text-style: var(--cfg-page-header-title-font-type-weight);
    --button-height: var(--cfg-page-header-button-height);
    --button-horizontal-spacing: var(--cfg-page-header-button-horizontal-spacing);
    --button-idle-background-color: var(--cfg-button-idle-background-color-type);
    --button-hover-background-color: var(--cfg-button-hover-background-color-type);
    --button-selected-background-color: var(--cfg-button-selected-background-color-type);
    --button-idle-symbol-color: var(--cfg-button-idle-content-color-type);
    --button-hover-symbol-color: var(--cfg-button-hover-content-color-type);
    --button-selected-symbol-color: var(--cfg-button-selected-content-color-type);
    --button-idle-border-color: var(--cfg-button-idle-border-color-type);
    --button-hover-border-color: var(--cfg-button-hover-border-color-type);
    --button-selected-border-color: var(--cfg-button-selected-border-color-type);
    --cfg-button-corner-radius: calc(var(--cfg-icon-border-corner-radius, 4) * 1px);
    --cfg-button-border-width: calc(var(--cfg-icon-border-width, 1) * 1px);
    --cfg-button-padding-horizontal: calc(var(--cfg-icon-padding-horizontal, 8) * 1px);
    --cfg-button-padding-vertical: calc(var(--cfg-icon-padding-vertical, 8) * 1px);
    --search-box-width: var(--cfg-page-header-search-box-width);
    --search-box-height: var(--cfg-page-header-search-box-height);
    --search-text-font: var(--cfg-page-header-search-box-font-type-family);
    --search-text-size: var(--cfg-page-header-search-box-font-type-size);
    --menu-width: var(--cfg-menu-width);
    --menu-slide-timer: var(--cfg-menu-slide-timer);
    --menu-background-color: var(--cfg-menu-idle-background-color-type);
    --menu-text-color: var(--color-text-primary);
    --menu-hover-background-color: var(--cfg-menu-hover-background-color-type);
    --menu-font: var(--cfg-menu-font-type-family);
    --menu-font-size: var(--cfg-menu-font-type-size);
    --menu-item-height: var(--cfg-menu-item-height);
    --menu-child-indent: var(--cfg-menu-child-indent);
    --menu-left-padding: var(--cfg-menu-left-padding);
    --list-header-bg: var(--cfg-list-column-title-idle-background-color-type);
    --list-header-color: var(--color-text-secondary);
    --list-row-bg: var(--cfg-list-row-idle-background-color-type);
    --list-row-alt-bg: var(--cfg-list-alternate-row-idle-background-color-type);
    --list-row-hover-bg: var(--cfg-list-row-hover-background-color-type);
    --list-row-selected-bg: var(--cfg-list-row-selected-background-color-type);
    --status-normal-color: var(--cfg-status-color-type-normal);
    --status-warning-color: var(--cfg-status-color-type-warning);
    --status-urgent-color: var(--cfg-status-color-type-urgent);
}