/* CT System — generated design tokens 2026-09-11T05:21:18+00:00 */

:root {
    /* ── Color Types ── */
    --color-white: #ffffff;
    --color-gray_50: #fafafa;
    --color-gray-50: #F9FAFB;
    --color-gray_100: #f5f5f5;
    --color-gray_200: #e5e5e5;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray_300: #d4d4d4;
    --color-gray_400: #a3a3a3;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray_500: #737373;
    --color-gray-500: #6B7280;
    --color-gray_600: #525252;
    --color-gray-600: #4B5563;
    --color-gray_700: #404040;
    --color-gray-700: #374151;
    --color-gray_800: #262626;
    --color-gray-800: #1F2937;
    --color-gray_900: #171717;
    --color-gray-900: #111827;
    --color-slate_50: #f8fafc;
    --color-slate: #2C3E50;
    --color-slate_100: #f1f5f9;
    --color-slate_200: #e2e8f0;
    --color-slate_300: #cbd5e1;
    --color-slate_400: #94a3b8;
    --color-blue-light: #DBEAFE;
    --color-slate_500: #64748b;
    --color-blue-soft: #EFF6FF;
    --color-slate_600: #475569;
    --color-button-blue: #3B82F6;
    --color-slate_700: #334155;
    --color-blue-dark: #2563EB;
    --color-slate_800: #1e293b;
    --color-slate_900: #0f172a;
    --color-red_50: #fef2f2;
    --color-green-soft: #D1FAE5;
    --color-red_100: #fee2e2;
    --color-green: #22C55E;
    --color-red_200: #fecaca;
    --color-green-dark: #15803D;
    --color-red_300: #fca5a5;
    --color-red_400: #f87171;
    --color-red_500: #ef4444;
    --color-red_600: #dc2626;
    --color-red_700: #b91c1c;
    --color-red_800: #991b1b;
    --color-red_900: #7f1d1d;
    --color-yellow-soft: #FEF3C7;
    --color-yellow: #EAB308;
    --color-yellow-dark: #92400E;
    --color-orange_50: #fff7ed;
    --color-orange_100: #ffedd5;
    --color-orange_200: #fed7aa;
    --color-orange_300: #fdba74;
    --color-orange_400: #fb923c;
    --color-red-soft: #FEE2E2;
    --color-orange_500: #f97316;
    --color-orange_600: #ea580c;
    --color-red: #EF4444;
    --color-red-dark: #B91C1C;
    --color-orange_700: #c2410c;
    --color-orange_800: #9a3412;
    --color-orange_900: #7c2d12;
    --color-orange-soft: #FFEDD5;
    --color-yellow_50: #fefce8;
    --color-yellow_100: #fef9c3;
    --color-orange: #F97316;
    --color-yellow_200: #fef08a;
    --color-orange-dark: #C2410C;
    --color-yellow_300: #fde047;
    --color-yellow_400: #facc15;
    --color-yellow_500: #eab308;
    --color-yellow_600: #ca8a04;
    --color-yellow_700: #a16207;
    --color-yellow_800: #854d0e;
    --color-yellow_900: #713f12;
    --color-purple-soft: #EDE9FE;
    --color-purple: #8B5CF6;
    --color-purple-dark: #6D28D9;
    --color-green_50: #f0fdf4;
    --color-green_100: #dcfce7;
    --color-green_200: #bbf7d0;
    --color-green_300: #86efac;
    --color-green_400: #4ade80;
    --color-teal-soft: #CCFBF1;
    --color-green_500: #22c55e;
    --color-green_600: #16a34a;
    --color-teal: #14B8A6;
    --color-teal-dark: #0F766E;
    --color-green_700: #15803d;
    --color-green_800: #166534;
    --color-green_900: #14532d;
    --color-primary: #3B82F6;
    --color-teal_50: #f0fdfa;
    --color-primary-hover: #2563EB;
    --color-teal_100: #ccfbf1;
    --color-success: #22C55E;
    --color-teal_200: #99f6e4;
    --color-warning: #EAB308;
    --color-teal_300: #5eead4;
    --color-teal_400: #2dd4bf;
    --color-error: #EF4444;
    --color-info: #3B82F6;
    --color-teal_500: #14b8a6;
    --color-teal_600: #0d9488;
    --color-teal_700: #0f766e;
    --color-teal_800: #115e59;
    --color-teal_900: #134e4a;
    --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-blue_50: #eff6ff;
    --color-blue_100: #dbeafe;
    --color-background-selected: #DBEAFE;
    --color-background-overlay: rgba(255,255,255,0.8);
    --color-blue_200: #bfdbfe;
    --color-blue_300: #93c5fd;
    --color-blue_400: #60a5fa;
    --color-text-primary: #1F2937;
    --color-blue_500: #3b82f6;
    --color-text-secondary: #374151;
    --color-blue_600: #2563eb;
    --color-text-muted: #6B7280;
    --color-blue_700: #1d4ed8;
    --color-blue_800: #1e40af;
    --color-text-disabled: #9CA3AF;
    --color-text-inverse: #FFFFFF;
    --color-blue_900: #1e3a8a;
    --color-border-default: #D1D5DB;
    --color-purple_50: #faf5ff;
    --color-purple_100: #f3e8ff;
    --color-border-subtle: #E5E7EB;
    --color-border-strong: #2C3E50;
    --color-purple_200: #e9d5ff;
    --color-border-focus: #3B82F6;
    --color-purple_300: #d8b4fe;
    --color-purple_400: #c084fc;
    --color-purple_500: #a855f7;
    --color-purple_600: #9333ea;
    --color-purple_700: #7e22ce;
    --color-purple_800: #6b21a8;
    --color-purple_900: #581c87;
    --color-pink_50: #fdf2f8;
    --color-pink_100: #fce7f3;
    --color-pink_200: #fbcfe8;
    --color-pink_300: #f9a8d4;
    --color-pink_400: #f472b6;
    --color-pink_500: #ec4899;
    --color-pink_600: #db2777;
    --color-pink_700: #be185d;
    --color-pink_800: #9d174d;
    --color-pink_900: #831843;
    --color-black: #000000;
}

: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-title-lg-family: 'Segoe UI', sans-serif;
    --font-title-lg-size: 20px;
    --font-title-lg-weight: 700;
    --font-title-lg-style: normal;
    --font-title-lg-color: var(--color-gray_900);
    --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-title-family: 'Segoe UI', sans-serif;
    --font-title-size: 17px;
    --font-title-weight: 700;
    --font-title-style: normal;
    --font-title-color: var(--color-gray_900);
    --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-title-sm-family: 'Segoe UI', sans-serif;
    --font-title-sm-size: 14px;
    --font-title-sm-weight: 700;
    --font-title-sm-style: normal;
    --font-title-sm-color: var(--color-gray_900);
    --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-heading-family: 'Segoe UI', sans-serif;
    --font-heading-size: 13px;
    --font-heading-weight: 700;
    --font-heading-style: normal;
    --font-heading-color: var(--color-gray_900);
    --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-heading-sm-family: 'Segoe UI', sans-serif;
    --font-heading-sm-size: 11px;
    --font-heading-sm-weight: 700;
    --font-heading-sm-style: normal;
    --font-heading-sm-color: var(--color-gray_600);
    --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-label-family: 'Segoe UI', sans-serif;
    --font-label-size: 12px;
    --font-label-weight: 600;
    --font-label-style: normal;
    --font-label-color: var(--color-gray_600);
    --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-sm-family: 'Segoe UI', sans-serif;
    --font-label-sm-size: 11px;
    --font-label-sm-weight: 600;
    --font-label-sm-style: normal;
    --font-label-sm-color: var(--color-gray_600);
    --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-field-family: 'Segoe UI', sans-serif;
    --font-field-size: 12px;
    --font-field-weight: 500;
    --font-field-style: normal;
    --font-field-color: var(--color-gray_600);
    --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-body-lg-family: 'Segoe UI', sans-serif;
    --font-body-lg-size: 14px;
    --font-body-lg-weight: 400;
    --font-body-lg-style: normal;
    --font-body-lg-color: var(--color-gray_900);
    --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-body-family: 'Segoe UI', sans-serif;
    --font-body-size: 13px;
    --font-body-weight: 400;
    --font-body-style: normal;
    --font-body-color: var(--color-gray_900);
    --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);
    --font-body-sm-family: 'Segoe UI', sans-serif;
    --font-body-sm-size: 12px;
    --font-body-sm-weight: 400;
    --font-body-sm-style: normal;
    --font-body-sm-color: var(--color-gray_900);
    --font-caption-family: 'Segoe UI', sans-serif;
    --font-caption-size: 11px;
    --font-caption-weight: 400;
    --font-caption-style: normal;
    --font-caption-color: var(--color-gray_600);
    --font-hint-family: 'Segoe UI', sans-serif;
    --font-hint-size: 11px;
    --font-hint-weight: 400;
    --font-hint-style: oblique;
    --font-hint-color: var(--color-gray_500);
}

:root {
    /* ── Dialog Item Font Types ── */
    --dialog_title_font_family: -apple-system, BlinkMacSystemFont, sans-serif;
    --dialog_title_font_size: 16px;
    --dialog_title_font_weight: 700;
    --dialog_title_font_style: normal;
    --dialog_title_font_color: #1a1a2e;
    --dialog_body_font_family: -apple-system, BlinkMacSystemFont, sans-serif;
    --dialog_body_font_size: 14px;
    --dialog_body_font_weight: 400;
    --dialog_body_font_style: normal;
    --dialog_body_font_color: #1a1a2e;
    --dialog_text_link_font_family: -apple-system, BlinkMacSystemFont, sans-serif;
    --dialog_text_link_font_size: 14px;
    --dialog_text_link_font_weight: 500;
    --dialog_text_link_font_style: normal;
    --dialog_text_link_font_color: #3b82f6;
    --dialog_label_font_family: -apple-system, BlinkMacSystemFont, sans-serif;
    --dialog_label_font_size: 12px;
    --dialog_label_font_weight: 500;
    --dialog_label_font_style: normal;
    --dialog_label_font_color: #5a6a7a;
    --dialog_caption_font_family: -apple-system, BlinkMacSystemFont, sans-serif;
    --dialog_caption_font_size: 12px;
    --dialog_caption_font_weight: 400;
    --dialog_caption_font_style: italic;
    --dialog_caption_font_color: #8a9aaa;
}

:root {
    /* ── Line Types ── */
    --line-none-weight: 0;
    --line-none-style: none;
    --line-none-color: currentColor;
    --line-none: 0 none currentColor;
    --line-hairline-weight: 0.5px;
    --line-hairline-style: solid;
    --line-hairline-color: var(--color-gray_200);
    --line-hairline: 0.5px solid var(--color-gray_200);
    --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-normal-weight: 1px;
    --line-normal-style: solid;
    --line-normal-color: var(--color-gray_200);
    --line-normal: 1px solid var(--color-gray_200);
    --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-thick-weight: 2px;
    --line-thick-style: solid;
    --line-thick-color: var(--color-gray_300);
    --line-thick: 2px solid var(--color-gray_300);
    --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-weight: 4px;
    --line-heavy-style: solid;
    --line-heavy-color: var(--color-gray_400);
    --line-heavy: 4px solid var(--color-gray_400);
    --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-dashed-weight: 1px;
    --line-dashed-style: dashed;
    --line-dashed-color: var(--color-gray_300);
    --line-dashed: 1px dashed var(--color-gray_300);
    --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-thick-dashed-weight: 2px;
    --line-thick-dashed-style: dashed;
    --line-thick-dashed-color: var(--color-gray_300);
    --line-thick-dashed: 2px dashed var(--color-gray_300);
    --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-dotted-weight: 1px;
    --line-dotted-style: dotted;
    --line-dotted-color: var(--color-gray_300);
    --line-dotted: 1px dotted var(--color-gray_300);
    --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 {
    /* ── Shadow Types ── */
    --shadow-none: none;
    --shadow-sm: 0 1px 4px 0 rgba(0,0,0,0.06);
    --shadow-md: 0 8px 24px 0 rgba(0,0,0,0.16);
    --shadow-lg: 0 24px 70px 0 rgba(0,0,0,0.4);
    --shadow-focus: 0 0 0 3px rgba(59,130,246,0.4);
}

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

    /* accounting */
    --cfg-account-opening-balance-equity: 39000;
    --cfg-account-revenue: 41000;
    --cfg-account-sales-discounts: 47000;
    --cfg-account-retained-earnings: 32000;
    --cfg-account-bad-debts: 78200;
    --cfg-account-receivable: 12100;
    --cfg-account-cogs: 51000;
    --cfg-account-unbilled-receivables: 12500;
    --cfg-account-customer-prepayments: 25100;
    --cfg-account-sales-tax-payable: 24100;
    --cfg-account-rounding: 93000;
    --cfg-account-payable: 21100;
    --cfg-account-customer-refunds: 25200;
    --cfg-account-fx-gain-loss: 85000;
    --cfg-accounting-inventory-cost-method: average;
    --cfg-account-inventory: 13100;
    --cfg-account-landed-cost-clearing: 13300;

    /* calendar */
    --cfg-calendar-hour-line-weight: var(--line-normal-weight);
    --cfg-calendar-hour-line-style: var(--line-normal-style);
    --cfg-calendar-hour-line-color: var(--line-normal-color);
    --cfg-calendar-hour-line: var(--line-normal);
    --cfg-calendar-header-padding: 10px;
    --cfg-calendar-drag-gap-width: 8px;
    --cfg-calendar-item-padding: 6px;
    --cfg-calendar-time-scale-font-family: var(--font-field-family);
    --cfg-calendar-time-scale-font-size: var(--font-field-size);
    --cfg-calendar-time-scale-font-weight: var(--font-field-weight);
    --cfg-calendar-time-scale-font-style: var(--font-field-style);
    --cfg-calendar-time-scale-font-color: var(--font-field-color);
    --cfg-calendar-work-week-end: 5;
    --cfg-calendar-work-week-start: 1;
    --cfg-calendar-day-font-family: var(--font-label-family);
    --cfg-calendar-day-font-size: var(--font-label-size);
    --cfg-calendar-day-font-weight: var(--font-label-weight);
    --cfg-calendar-day-font-style: var(--font-label-style);
    --cfg-calendar-day-font-color: var(--font-label-color);
    --cfg-calendar-day-end: 24;
    --cfg-calendar-workday-start-line-weight: var(--line-normal-weight);
    --cfg-calendar-workday-start-line-style: var(--line-normal-style);
    --cfg-calendar-workday-start-line: var(--line-normal);
    --cfg-calendar-workday-end-line-color: var(--color-red_600);
    --cfg-calendar-time-to-item-spacing: 51px;
    --cfg-calendar-workday-end-line-weight: var(--line-normal-weight);
    --cfg-calendar-workday-end-line-style: var(--line-normal-style);
    --cfg-calendar-workday-end-line: var(--line-normal);
    --cfg-calendar-workday-start-line-color: var(--color-green-dark);
    --cfg-calendar-time-scale-to-column-gap: 8px;
    --cfg-calendar-page-edge-to-hour-line-spacing: 8px;
    --cfg-calendar-work-day-start: 09:00;
    --cfg-calendar-personal-day-end: 22:00;
    --cfg-calendar-personal-day-start: 08:00;
    --cfg-calendar-time-pixels-per-minute: 4px;
    --cfg-calendar-work-day-end: 16:00;
    --cfg-calendar-deadline-days: 7;
    --cfg-calendar-item-border-shadow: var(--shadow-none);
    --cfg-calendar-day-start: 0;
    --cfg-calendar-item-background-opacity: 0.85;
    --cfg-calendar-item-hover-background-color: var(--color-blue_100);
    --cfg-calendar-page-edge-to-item-spacing: 54px;
    --cfg-calendar-item-border-line-weight: var(--line-normal-weight);
    --cfg-calendar-item-border-line-style: var(--line-normal-style);
    --cfg-calendar-item-border-line-color: var(--line-normal-color);
    --cfg-calendar-item-border-line: var(--line-normal);
    --cfg-calendar-icon-spacing: 4px;
    --cfg-calendar-auto-scroll-rate: 200;
    --cfg-calendar-auto-revert-interval: 30;
    --cfg-calendar-header-background-normal-color: var(--color-white);
    --cfg-calendar-item-border-color: var(--color-blue_500);
    --cfg-calendar-day-hover-background-color: var(--color-gray_100);
    --cfg-calendar-header-background-filter-color: var(--color-yellow_100);
    --cfg-calendar-icon-height: 16px;
    --cfg-calendar-item-border-radius: 4px;
    --cfg-calendar-item-font-family: var(--font-body-family);
    --cfg-calendar-item-font-size: var(--font-body-size);
    --cfg-calendar-item-font-weight: var(--font-body-weight);
    --cfg-calendar-item-font-style: var(--font-body-style);
    --cfg-calendar-item-font-color: var(--font-body-color);

    /* checkboxes */
    --cfg-checkbox-disabled-border-color: var(--color-gray_200);
    --cfg-checkbox-border-radius: 4px;
    --cfg-checkbox-check-mark-color: var(--color-white);
    --cfg-checkbox-checked-border-color: var(--color-slate_700);
    --cfg-checkbox-disabled-background-color: var(--color-gray_100);
    --cfg-checkbox-checked-background-color: var(--color-blue_500);
    --cfg-checkbox-border-line-weight: var(--line-normal-weight);
    --cfg-checkbox-border-line-style: var(--line-normal-style);
    --cfg-checkbox-border-line-color: var(--line-normal-color);
    --cfg-checkbox-border-line: var(--line-normal);
    --cfg-checkbox-idle-background-color: var(--color-white);
    --cfg-checkbox-idle-border-color: var(--color-gray_300);
    --cfg-checkbox-indeterminate-mark-color: var(--color-white);

    /* component palette */
    --cfg-editor-palette-item-height: 24px;
    --cfg-editor-palette-hover-background: var(--color-gray_50);
    --cfg-editor-palette-grip-color: var(--color-gray_400);

    /* control bars */
    --cfg-control-bar-selected-background-color: var(--color-gray_800);
    --cfg-control-bar-border-color: var(--color-gray_300);
    --cfg-control-bar-idle-content-color: var(--color-gray_600);
    --cfg-control-bar-hover-background-color: var(--color-gray_100);
    --cfg-control-bar-font-family: var(--font-label-family);
    --cfg-control-bar-font-size: var(--font-label-size);
    --cfg-control-bar-font-weight: var(--font-label-weight);
    --cfg-control-bar-font-style: var(--font-label-style);
    --cfg-control-bar-font-color: var(--font-label-color);
    --cfg-control-bar-position: content_top_centre;
    --cfg-control-bar-idle-background-color: var(--color-white);
    --cfg-control-bar-height: 32px;
    --cfg-control-bar-hover-content-color: var(--color-gray_900);
    --cfg-control-bar-border-radius: 7px;
    --cfg-control-bar-divider-color: var(--color-gray_300);
    --cfg-control-bar-border-line-weight: var(--line-normal-weight);
    --cfg-control-bar-border-line-style: var(--line-normal-style);
    --cfg-control-bar-border-line-color: var(--line-normal-color);
    --cfg-control-bar-border-line: var(--line-normal);
    --cfg-control-bar-padding-horizontal: 17px;
    --cfg-control-bar-selected-content-color: var(--color-white);

    /* country */

    /* dashboard */
    --cfg-dashboard-tile-icon-height: 32px;
    --cfg-dashboard-tile-selected-border-color: var(--color-blue_500);
    --cfg-dashboard-tile-idle-border-color: var(--color-gray_200);
    --cfg-dashboard-tile-idle-background-color: var(--color-white);
    --cfg-tile-status-urgent-color: var(--color-red_500);
    --cfg-tile-status-warning-color: var(--color-yellow_500);
    --cfg-tile-status-normal-color: var(--color-green_500);
    --cfg-dashboard-tile-hover-background-color: var(--color-gray_50);
    --cfg-dashboard-tile-icon-to-text-spacing: 10px;
    --cfg-dashboard-tile-hover-border-color: var(--color-gray_300);
    --cfg-dashboard-tile-count-font-family: var(--font-title-lg-family);
    --cfg-dashboard-tile-count-font-size: var(--font-title-lg-size);
    --cfg-dashboard-tile-count-font-weight: var(--font-title-lg-weight);
    --cfg-dashboard-tile-count-font-style: var(--font-title-lg-style);
    --cfg-dashboard-tile-count-font-color: var(--font-title-lg-color);
    --cfg-dashboard-tile-selected-background-color: var(--color-blue_50);
    --cfg-dashboard-tile-spacing: 12px;
    --cfg-dashboard-tile-border-radius: 6px;
    --cfg-dashboard-tile-title-font-family: var(--font-heading-sm-family);
    --cfg-dashboard-tile-title-font-size: var(--font-heading-sm-size);
    --cfg-dashboard-tile-title-font-weight: var(--font-heading-sm-weight);
    --cfg-dashboard-tile-title-font-style: var(--font-heading-sm-style);
    --cfg-dashboard-tile-title-font-color: var(--font-heading-sm-color);
    --cfg-dashboard-tile-padding: 12px;
    --cfg-dashboard-tile-border-shadow: var(--shadow-sm);
    --cfg-dashboard-tile-height: 90px;

    /* date picker */
    --cfg-date-picker-day-selected-background-color: var(--color-blue_500);
    --cfg-date-picker-day-hover-background-color: var(--color-gray_100);
    --cfg-date-picker-header-font-family: var(--font-heading-sm-family);
    --cfg-date-picker-header-font-size: var(--font-heading-sm-size);
    --cfg-date-picker-header-font-weight: var(--font-heading-sm-weight);
    --cfg-date-picker-header-font-style: var(--font-heading-sm-style);
    --cfg-date-picker-header-font-color: var(--font-heading-sm-color);
    --cfg-date-picker-nav-icon-color: var(--color-gray_600);
    --cfg-date-picker-time-font-family: var(--font-body-family);
    --cfg-date-picker-time-font-size: var(--font-body-size);
    --cfg-date-picker-time-font-weight: var(--font-body-weight);
    --cfg-date-picker-time-font-style: var(--font-body-style);
    --cfg-date-picker-time-font-color: var(--font-body-color);
    --cfg-date-picker-weekday-font-family: var(--font-caption-family);
    --cfg-date-picker-weekday-font-size: var(--font-caption-size);
    --cfg-date-picker-weekday-font-weight: var(--font-caption-weight);
    --cfg-date-picker-weekday-font-style: var(--font-caption-style);
    --cfg-date-picker-weekday-font-color: var(--font-caption-color);
    --cfg-date-picker-background-color: var(--color-white);
    --cfg-date-picker-border-line-weight: var(--line-normal-weight);
    --cfg-date-picker-border-line-style: var(--line-normal-style);
    --cfg-date-picker-border-line-color: var(--line-normal-color);
    --cfg-date-picker-border-line: var(--line-normal);
    --cfg-date-picker-border-shadow: var(--shadow-md);
    --cfg-date-picker-border-radius: 80px;
    --cfg-date-picker-day-today-border-color: var(--color-blue_500);
    --cfg-date-picker-day-selected-text-color: var(--color-white);
    --cfg-date-picker-day-disabled-text-color: var(--color-gray_400);
    --cfg-date-picker-day-font-family: var(--font-body-family);
    --cfg-date-picker-day-font-size: var(--font-body-size);
    --cfg-date-picker-day-font-weight: var(--font-body-weight);
    --cfg-date-picker-day-font-style: var(--font-body-style);
    --cfg-date-picker-day-font-color: var(--font-body-color);

    /* dialogs */
    --cfg-dialog-item-input-border-color: var(--color-gray_300);
    --cfg-dialog-footer-padding-horizontal: 16px;
    --cfg-dialog-footer-padding-vertical: 12px;
    --cfg-dialog-overlay-color: var(--color-black);
    --cfg-dialog-item-input-focus-border-color: var(--color-blue_500);
    --cfg-dialog-transition-duration: 150ms;
    --cfg-dialog-small-width: 400px;
    --cfg-dialog-overlay-blur: 4px;
    --cfg-dialog-medium-width: 560px;
    --cfg-dialog-max-height-default: 600px;
    --cfg-dialog-margin: 24px;
    --cfg-dialog-large-width: 720px;
    --cfg-dialog-item-vertical-spacing: 16px;
    --cfg-dialog-item-required-indicator: *;
    --cfg-dialog-item-pad-right: 8px;
    --cfg-dialog-item-pad-left: 8px;
    --cfg-dialog-item-label-width: 120px;
    --cfg-dialog-item-label-to-data-spacing: 8px;
    --cfg-dialog-item-label-font-family: var(--font-field-family);
    --cfg-dialog-item-label-font-size: var(--font-field-size);
    --cfg-dialog-item-label-font-weight: var(--font-field-weight);
    --cfg-dialog-item-label-font-style: var(--font-field-style);
    --cfg-dialog-item-label-font-color: var(--font-field-color);
    --cfg-dialog-item-label-alignment: left;
    --cfg-dialog-item-input-required-color: var(--color-red_600);
    --cfg-dialog-item-input-placeholder-font-family: var(--font-hint-family);
    --cfg-dialog-item-input-placeholder-font-size: var(--font-hint-size);
    --cfg-dialog-item-input-placeholder-font-weight: var(--font-hint-weight);
    --cfg-dialog-item-input-placeholder-font-style: var(--font-hint-style);
    --cfg-dialog-item-input-placeholder-font-color: var(--font-hint-color);
    --cfg-dialog-item-input-padding: 12px;
    --cfg-dialog-item-input-height: 36px;
    --cfg-dialog-background-color: var(--color-white);
    --cfg-dialog-header-footer-background-color: var(--color-gray_50);
    --cfg-dialog-footer-height: 60px;
    --cfg-dialog-item-input-disabled-opacity: 0.5;
    --cfg-dialog-item-input-border-radius: 6px;
    --cfg-dialog-item-input-border-line-weight: var(--line-normal-weight);
    --cfg-dialog-item-input-border-line-style: var(--line-normal-style);
    --cfg-dialog-item-input-border-line-color: var(--line-normal-color);
    --cfg-dialog-item-input-border-line: var(--line-normal);
    --cfg-dialog-item-input-background-color: var(--color-white);
    --cfg-dialog-item-data-font-family: var(--font-body-family);
    --cfg-dialog-item-data-font-size: var(--font-body-size);
    --cfg-dialog-item-data-font-weight: var(--font-body-weight);
    --cfg-dialog-item-data-font-style: var(--font-body-style);
    --cfg-dialog-item-data-font-color: var(--font-body-color);
    --cfg-dialog-header-padding-vertical: 12px;
    --cfg-dialog-header-padding-horizontal: 16px;
    --cfg-dialog-header-height: 60px;
    --cfg-dialog-header-footer-border-line-weight: var(--line-normal-weight);
    --cfg-dialog-header-footer-border-line-style: var(--line-normal-style);
    --cfg-dialog-header-footer-border-line-color: var(--line-normal-color);
    --cfg-dialog-header-footer-border-line: var(--line-normal);
    --cfg-dialog-header-footer-border-color: var(--color-gray_200);
    --cfg-dialog-content-background-color: var(--color-white);
    --cfg-dialog-border-shadow: var(--shadow-lg);
    --cfg-dialog-border-radius: 8px;
    --cfg-dialog-border-color: var(--color-gray_200);
    --cfg-dialog-divider-line-weight: var(--line-normal-weight);
    --cfg-dialog-divider-line-style: var(--line-normal-style);
    --cfg-dialog-divider-line-color: var(--line-normal-color);
    --cfg-dialog-divider-line: var(--line-normal);
    --cfg-dialog-divider-color: var(--color-gray_200);
    --cfg-dialog-content-padding-vertical: 16px;
    --cfg-dialog-content-padding-horizontal: 16px;
    --cfg-dialog-border-line-weight: var(--line-normal-weight);
    --cfg-dialog-border-line-style: var(--line-normal-style);
    --cfg-dialog-border-line-color: var(--line-normal-color);
    --cfg-dialog-border-line: var(--line-normal);
    --cfg-dialog-animation-duration: 200ms;
    --cfg-dialog-animation: fade;

    /* dropdowns */
    --cfg-dropdown-border-color: var(--color-gray_200);
    --cfg-dropdown-border-radius: 8px;
    --cfg-dropdown-border-line-weight: var(--line-normal-weight);
    --cfg-dropdown-border-line-style: var(--line-normal-style);
    --cfg-dropdown-border-line-color: var(--line-normal-color);
    --cfg-dropdown-border-line: var(--line-normal);
    --cfg-dropdown-border-shadow: var(--shadow-md);

    /* editor canvas */
    --cfg-editor-canvas-background: var(--color-gray_100);
    --cfg-editor-canvas-gap: 16px;

    /* editor header */
    --cfg-editor-header-item-height: 32px;

    /* editor sub headers */
    --cfg-editor-subheader-background-color: var(--color-white);
    --cfg-editor-subheader-border-color: var(--color-gray_300);
    --cfg-editor-subheader-border-line-weight: var(--line-normal-weight);
    --cfg-editor-subheader-border-line-style: var(--line-normal-style);
    --cfg-editor-subheader-border-line-color: var(--line-normal-color);
    --cfg-editor-subheader-border-line: var(--line-normal);
    --cfg-editor-subheader-border-radius: 7px;
    --cfg-editor-subheader-padding-horizontal: 12px;
    --cfg-editor-subheader-padding-vertical: 8px;
    --cfg-editor-subheader-item-height: 26px;
    --cfg-editor-subheader-item-spacing: 9px;
    --cfg-editor-subheader-zone-gap: 12px;

    /* editor window */
    --cfg-editor-narrow-width: 820px;
    --cfg-editor-overlay-color: rgba(15,23,42,.30);
    --cfg-editor-wide-width: 1180px;
    --cfg-editor-border-radius: 8px;
    --cfg-editor-outer-margin: 24px;
    --cfg-editor-height-formula: 100vh - page_header - 2 x margin;
    --cfg-editor-shadow: var(--shadow-lg);
    --cfg-editor-overlay-blur: 0px;

    /* field display */
    --cfg-color-field-border-color: var(--color-gray_300);

    /* form fields */
    --cfg-form-field-label-to-border-vertical-spacing: 8px;
    --cfg-form-field-height: 30px;
    --cfg-form-field-label-width: 120px;
    --cfg-form-field-background-color-read-only: var(--color-gray_100);
    --cfg-form-field-border-radius: 6px;
    --cfg-form-field-background-color-editable: var(--color-gray_50);
    --cfg-form-field-alignment: left;
    --cfg-form-field-data-font-family: var(--font-body-family);
    --cfg-form-field-data-font-size: var(--font-body-size);
    --cfg-form-field-data-font-weight: var(--font-body-weight);
    --cfg-form-field-data-font-style: var(--font-body-style);
    --cfg-form-field-data-font-color: var(--font-body-color);
    --cfg-form-field-disabled-border-color: var(--color-gray_200);
    --cfg-form-field-label-font-family: var(--font-field-family);
    --cfg-form-field-label-font-size: var(--font-field-size);
    --cfg-form-field-label-font-weight: var(--font-field-weight);
    --cfg-form-field-label-font-style: var(--font-field-style);
    --cfg-form-field-label-font-color: var(--font-field-color);
    --cfg-form-field-horizontal-spacing: 36px;
    --cfg-form-field-border-shadow: var(--shadow-none);
    --cfg-form-field-disabled-background-color: var(--color-gray_100);
    --cfg-form-field-border-color: var(--color-gray_200);
    --cfg-form-field-focus-border-color: var(--color-blue_500);
    --cfg-form-field-hover-border-color: var(--color-gray_400);
    --cfg-form-field-label-position: top;
    --cfg-form-field-label-to-border-horizontal-spacing: 8px;
    --cfg-form-field-padding-horizontal: 10px;
    --cfg-form-field-padding-vertical: 5px;
    --cfg-form-field-panel-padding: 18px;
    --cfg-form-field-required-indicator-color: var(--color-red_600);
    --cfg-form-field-vertical-spacing: 6px;

    /* form pages */
    --cfg-form-page-horizontal-margin: 18px;
    --cfg-form-page-background-color: var(--color-gray_100);

    /* form panels */
    --cfg-form-panel-header-search-border-radius: 4px;
    --cfg-form-panel-header-search-border-color: var(--color-gray_300);
    --cfg-form-panel-header-item-border-radius: 4px;
    --cfg-form-panel-header-search-padding-horizontal: 8px;
    --cfg-form-panel-header-search-placeholder-font-family: var(--font-hint-family);
    --cfg-form-panel-header-search-placeholder-font-size: var(--font-hint-size);
    --cfg-form-panel-header-search-placeholder-font-weight: var(--font-hint-weight);
    --cfg-form-panel-header-search-placeholder-font-style: var(--font-hint-style);
    --cfg-form-panel-header-search-placeholder-font-color: var(--font-hint-color);
    --cfg-form-panel-header-search-width: 150px;
    --cfg-form-panel-header-title-font-family: var(--font-heading-family);
    --cfg-form-panel-header-title-font-size: var(--font-heading-size);
    --cfg-form-panel-header-title-font-weight: var(--font-heading-weight);
    --cfg-form-panel-header-title-font-style: var(--font-heading-style);
    --cfg-form-panel-header-title-font-color: var(--font-heading-color);
    --cfg-form-panel-to-panel-spacing: 16px;
    --cfg-form-panel-border-line-weight: var(--line-normal-weight);
    --cfg-form-panel-border-line-style: var(--line-normal-style);
    --cfg-form-panel-border-line-color: var(--line-normal-color);
    --cfg-form-panel-border-line: var(--line-normal);
    --cfg-form-panel-header-item-to-title-spacing: 6px;
    --cfg-form-panel-header-padding-horizontal: 14px;
    --cfg-form-panel-header-padding-vertical: 10px;
    --cfg-form-panel-header-item-border-color: var(--color-gray_300);
    --cfg-form-panel-header-item-height: 26px;
    --cfg-form-panel-header-background-color: var(--color-white);
    --cfg-form-panel-header-search-background-color: var(--color-white);
    --cfg-form-panel-border-color: var(--color-gray_200);
    --cfg-form-panel-header-search-border-line-weight: var(--line-normal-weight);
    --cfg-form-panel-header-search-border-line-style: var(--line-normal-style);
    --cfg-form-panel-header-search-border-line-color: var(--line-normal-color);
    --cfg-form-panel-header-search-border-line: var(--line-normal);
    --cfg-form-panel-header-search-focus-border-color: var(--color-blue_500);
    --cfg-form-panel-header-search-font-family: var(--font-label-family);
    --cfg-form-panel-header-search-font-size: var(--font-label-size);
    --cfg-form-panel-header-search-font-weight: var(--font-label-weight);
    --cfg-form-panel-header-search-font-style: var(--font-label-style);
    --cfg-form-panel-header-search-font-color: var(--font-label-color);
    --cfg-form-panel-header-search-height: 26px;
    --cfg-form-panel-header-item-to-item-spacing: 6px;
    --cfg-form-panel-border-radius: 8px;
    --cfg-form-panel-border-shadow: var(--shadow-sm);
    --cfg-form-panel-content-background-color: var(--color-white);
    --cfg-form-panel-header-button-to-title-spacing: 8px;
    --cfg-form-panel-header-counter-font-family: var(--font-caption-family);
    --cfg-form-panel-header-counter-font-size: var(--font-caption-size);
    --cfg-form-panel-header-counter-font-weight: var(--font-caption-weight);
    --cfg-form-panel-header-counter-font-style: var(--font-caption-style);
    --cfg-form-panel-header-counter-font-color: var(--font-caption-color);
    --cfg-form-panel-header-divider-line-weight: var(--line-normal-weight);
    --cfg-form-panel-header-divider-line-style: var(--line-normal-style);
    --cfg-form-panel-header-divider-line: var(--line-normal);
    --cfg-form-panel-header-divider-line-color: var(--color-gray_300);
    --cfg-form-panel-header-hover-background-color: var(--color-gray_50);
    --cfg-form-panel-header-item-border-line-weight: var(--line-normal-weight);
    --cfg-form-panel-header-item-border-line-style: var(--line-normal-style);
    --cfg-form-panel-header-item-border-line-color: var(--line-normal-color);
    --cfg-form-panel-header-item-border-line: var(--line-normal);

    /* form sections */
    --cfg-form-section-header-margin-bottom: 10px;
    --cfg-form-section-toggle-to-title-spacing: 8px;
    --cfg-form-section-header-hover-background-color: var(--color-gray_50);
    --cfg-form-section-divider-color: var(--color-gray_200);
    --cfg-form-section-title-font-family: var(--font-heading-sm-family);
    --cfg-form-section-title-font-size: var(--font-heading-sm-size);
    --cfg-form-section-title-font-weight: var(--font-heading-sm-weight);
    --cfg-form-section-title-font-style: var(--font-heading-sm-style);
    --cfg-form-section-title-font-color: var(--font-heading-sm-color);
    --cfg-form-section-divider-weight: var(--line-normal-weight);
    --cfg-form-section-divider-style: var(--line-normal-style);
    --cfg-form-section-divider: var(--line-normal);
    --cfg-form-section-header-toggle-height: 14px;

    /* form titles */
    --cfg-form-title-padding-vertical: 16px;
    --cfg-form-title-to-icon-spacing: 12px;
    --cfg-form-title-icon-content-color: var(--color-blue_500);
    --cfg-form-title-icon-height: 18px;
    --cfg-form-title-icon-background-color: var(--color-white);
    --cfg-form-title-font-family: var(--font-title-family);
    --cfg-form-title-font-size: var(--font-title-size);
    --cfg-form-title-font-weight: var(--font-title-weight);
    --cfg-form-title-font-style: var(--font-title-style);
    --cfg-form-title-font-color: var(--font-title-color);

    /* form_view */

    /* gantt */
    --cfg-gantt-row-alternate-background-color: var(--color-gray_50);
    --cfg-gantt-bar-hover-background-color: var(--color-blue_600);
    --cfg-gantt-bar-dragging-opacity: 0.6;
    --cfg-gantt-bar-border-radius: 4px;
    --cfg-gantt-timeline-header-border-color: var(--color-gray_200);
    --cfg-gantt-timeline-header-background-color: var(--color-gray_50);
    --cfg-gantt-task-panel-width: 280px;
    --cfg-gantt-task-name-font-family: var(--font-body-family);
    --cfg-gantt-task-name-font-size: var(--font-body-size);
    --cfg-gantt-task-name-font-weight: var(--font-body-weight);
    --cfg-gantt-task-name-font-style: var(--font-body-style);
    --cfg-gantt-task-name-font-color: var(--font-body-color);
    --cfg-gantt-task-indent: 16px;
    --cfg-gantt-row-line-color: var(--color-gray_100);
    --cfg-gantt-row-hover-background-color: var(--color-blue_50);
    --cfg-gantt-row-height: 36px;
    --cfg-gantt-bar-height: 20px;
    --cfg-gantt-bar-idle-background-color: var(--color-blue_500);
    --cfg-gantt-weekend-background-color: var(--color-gray_50);
    --cfg-gantt-today-marker-color: var(--color-red_500);
    --cfg-gantt-timeline-period-font-family: var(--font-caption-family);
    --cfg-gantt-timeline-period-font-size: var(--font-caption-size);
    --cfg-gantt-timeline-period-font-weight: var(--font-caption-weight);
    --cfg-gantt-timeline-period-font-style: var(--font-caption-style);
    --cfg-gantt-timeline-period-font-color: var(--font-caption-color);
    --cfg-gantt-timeline-header-font-family: var(--font-label-family);
    --cfg-gantt-timeline-header-font-size: var(--font-label-size);
    --cfg-gantt-timeline-header-font-weight: var(--font-label-weight);
    --cfg-gantt-timeline-header-font-style: var(--font-label-style);
    --cfg-gantt-timeline-header-font-color: var(--font-label-color);
    --cfg-gantt-background-color: var(--color-white);
    --cfg-gantt-dependency-line-weight: var(--line-normal-weight);
    --cfg-gantt-dependency-line-style: var(--line-normal-style);
    --cfg-gantt-dependency-line: var(--line-normal);
    --cfg-gantt-milestone-size: 14px;
    --cfg-gantt-milestone-color: var(--color-purple_500);
    --cfg-gantt-grid-line-color: var(--color-gray_200);
    --cfg-gantt-grid-line-weight: var(--line-hairline-weight);
    --cfg-gantt-grid-line-style: var(--line-hairline-style);
    --cfg-gantt-grid-line: var(--line-hairline);
    --cfg-gantt-dependency-line-color: var(--color-gray_400);
    --cfg-gantt-dependency-arrow-color: var(--color-gray_400);
    --cfg-gantt-critical-path-color: var(--color-red_500);
    --cfg-gantt-bar-track-color: var(--color-gray_200);
    --cfg-gantt-bar-selected-border-color: var(--color-blue_700);
    --cfg-gantt-bar-progress-fill-color: var(--color-blue_700);
    --cfg-gantt-bar-label-font-family: var(--font-caption-family);
    --cfg-gantt-bar-label-font-size: var(--font-caption-size);
    --cfg-gantt-bar-label-font-weight: var(--font-caption-weight);
    --cfg-gantt-bar-label-font-style: var(--font-caption-style);
    --cfg-gantt-bar-label-font-color: var(--font-caption-color);
    --cfg-gantt-bar-label-color: var(--color-white);

    /* headers button colors */
    --cfg-header-button-selected-content-color: var(--color-background-content);
    --cfg-header-button-idle-content-color: var(--color-black);
    --cfg-header-button-hover-background-color: var(--color-gray_100);
    --cfg-header-button-idle-border-color: var(--color-gray_300);
    --cfg-header-button-hover-content-color: var(--color-gray_900);
    --cfg-header-button-disabled-content-color: var(--color-gray_400);
    --cfg-header-button-hover-border-color: var(--color-gray_400);
    --cfg-header-button-selected-border-color: var(--color-slate_700);
    --cfg-header-button-disabled-border-color: var(--color-gray_200);
    --cfg-header-button-selected-background-color: var(--color-slate_700);
    --cfg-header-button-idle-background-color: var(--color-background-content);
    --cfg-header-button-disabled-background-color: var(--color-gray_100);

    /* icons */
    --cfg-icon-border-corner-radius: 8px;
    --cfg-icon-text-letter-spacing: 0.5px;
    --cfg-icon-padding-horizontal: 8px;
    --cfg-icon-content-to-height-ratio: 0.6;
    --cfg-icon-border-width: 2px;
    --cfg-icon-text-font-family: var(--font-label-family);
    --cfg-icon-text-font-size: var(--font-label-size);
    --cfg-icon-text-font-weight: var(--font-label-weight);
    --cfg-icon-text-font-style: var(--font-label-style);
    --cfg-icon-text-font-color: var(--font-label-color);
    --cfg-icon-border-reference-height: 48px;

    /* kanban */
    --cfg-kanban-card-border-color: var(--color-gray_200);
    --cfg-kanban-card-stripe-color: var(--color-blue_500);
    --cfg-kanban-card-selected-border-color: var(--color-blue_500);
    --cfg-kanban-card-padding: 12px;
    --cfg-kanban-card-hover-shadow: var(--shadow-md);
    --cfg-kanban-card-footer-font-family: var(--font-caption-family);
    --cfg-kanban-card-footer-font-size: var(--font-caption-size);
    --cfg-kanban-card-footer-font-weight: var(--font-caption-weight);
    --cfg-kanban-card-footer-font-style: var(--font-caption-style);
    --cfg-kanban-card-footer-font-color: var(--font-caption-color);
    --cfg-kanban-card-dragging-opacity: 0.6;
    --cfg-kanban-card-border-shadow: var(--shadow-sm);
    --cfg-kanban-card-border-radius: 6px;
    --cfg-kanban-card-border-line-weight: var(--line-normal-weight);
    --cfg-kanban-card-border-line-style: var(--line-normal-style);
    --cfg-kanban-card-border-line-color: var(--line-normal-color);
    --cfg-kanban-card-border-line: var(--line-normal);
    --cfg-kanban-column-border-color: var(--color-gray_200);
    --cfg-kanban-card-spacing: 8px;
    --cfg-kanban-placeholder-background-color: var(--color-gray_200);
    --cfg-kanban-dropzone-border-line-weight: var(--line-dashed-weight);
    --cfg-kanban-dropzone-border-line-style: var(--line-dashed-style);
    --cfg-kanban-dropzone-border-line-color: var(--line-dashed-color);
    --cfg-kanban-dropzone-border-line: var(--line-dashed);
    --cfg-kanban-dropzone-border-color: var(--color-blue_500);
    --cfg-kanban-dropzone-background-color: var(--color-blue_50);
    --cfg-kanban-card-background-color: var(--color-white);
    --cfg-kanban-board-padding: 16px;
    --cfg-kanban-column-width: 280px;
    --cfg-kanban-column-spacing: 12px;
    --cfg-kanban-column-header-padding: 12px;
    --cfg-kanban-column-header-font-family: var(--font-heading-sm-family);
    --cfg-kanban-column-header-font-size: var(--font-heading-sm-size);
    --cfg-kanban-column-header-font-weight: var(--font-heading-sm-weight);
    --cfg-kanban-column-header-font-style: var(--font-heading-sm-style);
    --cfg-kanban-column-header-font-color: var(--font-heading-sm-color);
    --cfg-kanban-column-header-background-color: var(--color-white);
    --cfg-kanban-column-count-font-family: var(--font-caption-family);
    --cfg-kanban-column-count-font-size: var(--font-caption-size);
    --cfg-kanban-column-count-font-weight: var(--font-caption-weight);
    --cfg-kanban-column-count-font-style: var(--font-caption-style);
    --cfg-kanban-column-count-font-color: var(--font-caption-color);
    --cfg-kanban-board-background-color: var(--color-white);
    --cfg-kanban-column-count-background-color: var(--color-gray_200);
    --cfg-kanban-column-collapsed-width: 48px;
    --cfg-kanban-column-border-radius: 8px;
    --cfg-kanban-column-border-line-weight: var(--line-normal-weight);
    --cfg-kanban-column-border-line-style: var(--line-normal-style);
    --cfg-kanban-column-border-line-color: var(--line-normal-color);
    --cfg-kanban-column-border-line: var(--line-normal);
    --cfg-kanban-column-background-color: var(--color-gray_50);
    --cfg-kanban-card-title-font-family: var(--font-label-family);
    --cfg-kanban-card-title-font-size: var(--font-label-size);
    --cfg-kanban-card-title-font-weight: var(--font-label-weight);
    --cfg-kanban-card-title-font-style: var(--font-label-style);
    --cfg-kanban-card-title-font-color: var(--font-label-color);
    --cfg-kanban-card-subtitle-font-family: var(--font-body-sm-family);
    --cfg-kanban-card-subtitle-font-size: var(--font-body-sm-size);
    --cfg-kanban-card-subtitle-font-weight: var(--font-body-sm-weight);
    --cfg-kanban-card-subtitle-font-style: var(--font-body-sm-style);
    --cfg-kanban-card-subtitle-font-color: var(--font-body-sm-color);

    /* list columns */
    --cfg-list-control-dialog-icon: expand;
    --cfg-list-column-title-idle-background-color: var(--color-gray_50);
    --cfg-list-column-resize-indicator-color: var(--color-blue_500);
    --cfg-list-column-label-font-family: var(--font-label-family);
    --cfg-list-column-label-font-size: var(--font-label-size);
    --cfg-list-column-label-font-weight: var(--font-label-weight);
    --cfg-list-column-label-font-style: var(--font-label-style);
    --cfg-list-column-label-font-color: var(--font-label-color);
    --cfg-list-column-horizontal-padding: 12px;
    --cfg-list-column-divider-weight: var(--line-normal-weight);
    --cfg-list-column-divider-style: var(--line-normal-style);
    --cfg-list-column-divider: var(--line-normal);
    --cfg-list-column-label-idle-background-color: var(--color-gray_50);
    --cfg-list-column-label-selected-background-color: var(--color-blue_50);
    --cfg-list-column-divider-color: var(--color-gray_200);
    --cfg-list-column-label-hover-background-color: var(--color-gray_200);
    --cfg-list-column-label-active-background-color: var(--color-gray_100);

    /* list groups */
    --cfg-list-group-header-font-family: var(--font-label-family);
    --cfg-list-group-header-font-size: var(--font-label-size);
    --cfg-list-group-header-font-weight: var(--font-label-weight);
    --cfg-list-group-header-font-style: var(--font-label-style);
    --cfg-list-group-header-font-color: var(--font-label-color);
    --cfg-list-group-header-background-color: var(--color-slate_100);
    --cfg-list-group-header-level-2-font-family: var(--font-label-sm-family);
    --cfg-list-group-header-level-2-font-size: var(--font-label-sm-size);
    --cfg-list-group-header-level-2-font-weight: var(--font-label-sm-weight);
    --cfg-list-group-header-level-2-font-style: var(--font-label-sm-style);
    --cfg-list-group-header-level-2-font-color: var(--font-label-sm-color);
    --cfg-list-group-indent-width: 16px;
    --cfg-list-group-header-counter-font-family: var(--font-caption-family);
    --cfg-list-group-header-counter-font-size: var(--font-caption-size);
    --cfg-list-group-header-counter-font-weight: var(--font-caption-weight);
    --cfg-list-group-header-counter-font-style: var(--font-caption-style);
    --cfg-list-group-header-counter-font-color: var(--font-caption-color);

    /* list pages */
    --cfg-list-page-outer-margin: 18px;
    --cfg-list-border-color: var(--color-gray_200);
    --cfg-list-border-line-weight: var(--line-normal-weight);
    --cfg-list-border-line-style: var(--line-normal-style);
    --cfg-list-border-line-color: var(--line-normal-color);
    --cfg-list-border-line: var(--line-normal);

    /* list rows */
    --cfg-list-row-selected-background-color: var(--color-blue_50);
    --cfg-list-row-action-icon-color: var(--color-gray_500);
    --cfg-list-alternate-row-idle-background-color: var(--color-white);
    --cfg-list-bulk-edit-bar-background-color: var(--color-red_50);
    --cfg-list-bulk-edit-bar-border-color: var(--color-red_200);
    --cfg-list-drag-icon: dots;
    --cfg-list-inline-edit-input-height: 26px;
    --cfg-list-inline-edit-input-padding-horizontal: 7px;
    --cfg-list-row-action-icon-disabled-color: var(--color-gray_300);
    --cfg-list-row-action-icon-hover-color: var(--color-blue_500);
    --cfg-list-row-disabled-background-color: var(--color-gray_100);
    --cfg-list-row-divider-color: var(--color-gray_100);
    --cfg-list-row-idle-background-color: var(--color-white);
    --cfg-list-row-vertical-padding: 8px;
    --cfg-list-subtotal-row-background-color: var(--color-gray_50);
    --cfg-list-drag-icon-size: 16px;
    --cfg-list-row-font-family: var(--font-body-family);
    --cfg-list-row-font-size: var(--font-body-size);
    --cfg-list-row-font-weight: var(--font-body-weight);
    --cfg-list-row-font-style: var(--font-body-style);
    --cfg-list-row-font-color: var(--font-body-color);
    --cfg-list-inline-edit-focus-ring-color: var(--color-gray_200);
    --cfg-list-drag-icon-color: var(--color-slate_400);
    --cfg-list-row-hover-background-color: var(--color-gray_200);
    --cfg-list-row-editing-background-color: var(--color-blue_50);
    --cfg-list-row-divider-weight: var(--line-normal-weight);
    --cfg-list-row-divider-style: var(--line-normal-style);
    --cfg-list-row-divider: var(--line-normal);

    /* list_view */

    /* menu */
    --cfg-menu-font-hover-color: var(--color-gray_800);
    --cfg-menu-item-height: 32px;
    --cfg-menu-width: 220px;
    --cfg-menu-child-indent: 20px;
    --cfg-menu-hover-background-color: var(--color-gray_100);
    --cfg-menu-font-selected-color: var(--color-blue_500);
    --cfg-menu-font-idle-color: var(--color-gray_800);
    --cfg-menu-font-family: var(--font-body-family);
    --cfg-menu-font-size: var(--font-body-size);
    --cfg-menu-font-weight: var(--font-body-weight);
    --cfg-menu-font-style: var(--font-body-style);
    --cfg-menu-font-color: var(--font-body-color);
    --cfg-menu-idle-background-color: var(--color-white);
    --cfg-menu-slide-timer: 0.3;
    --cfg-menu-selected-background-color: var(--color-blue_50);
    --cfg-menu-left-padding: 16px;

    /* multi select */
    --cfg-dropdown-max-items: 8;
    --cfg-multi-select-border-radius: 4px;
    --cfg-multi-select-background-color: var(--color-blue_50);
    --cfg-multi-select-border-line-weight: var(--line-none-weight);
    --cfg-multi-select-border-line-style: var(--line-none-style);
    --cfg-multi-select-border-line-color: var(--line-none-color);
    --cfg-multi-select-border-line: var(--line-none);
    --cfg-multi-select-padding-horizontal: 8px;
    --cfg-multi-select-spacing: 4px;
    --cfg-multi-select-remove-icon-color: var(--color-blue_600);
    --cfg-multi-select-remove-icon: remove_icon.close;
    --cfg-multi-select-padding-vertical: 3px;

    /* page headers */
    --cfg-page-header-title-font-family: var(--font-title-lg-family);
    --cfg-page-header-title-font-size: var(--font-title-lg-size);
    --cfg-page-header-title-font-weight: var(--font-title-lg-weight);
    --cfg-page-header-title-font-style: var(--font-title-lg-style);
    --cfg-page-header-title-font-color: var(--font-title-lg-color);
    --cfg-page-header-item-border-color: var(--color-gray_300);
    --cfg-page-header-item-border-line-weight: var(--line-normal-weight);
    --cfg-page-header-item-border-line-style: var(--line-normal-style);
    --cfg-page-header-item-border-line-color: var(--line-normal-color);
    --cfg-page-header-item-border-line: var(--line-normal);
    --cfg-page-header-item-border-radius: 4px;
    --cfg-page-header-item-to-title-spacing: 6px;
    --cfg-page-header-padding-horizontal: 16px;
    --cfg-page-header-record-counter-color: var(--color-gray_500);
    --cfg-page-header-record-counter-font-family: var(--font-caption-family);
    --cfg-page-header-record-counter-font-size: var(--font-caption-size);
    --cfg-page-header-record-counter-font-weight: var(--font-caption-weight);
    --cfg-page-header-record-counter-font-style: var(--font-caption-style);
    --cfg-page-header-record-counter-font-color: var(--font-caption-color);
    --cfg-page-header-search-border-color: var(--color-gray_300);
    --cfg-page-header-search-border-line-weight: var(--line-normal-weight);
    --cfg-page-header-search-border-line-style: var(--line-normal-style);
    --cfg-page-header-search-border-line-color: var(--line-normal-color);
    --cfg-page-header-search-border-line: var(--line-normal);
    --cfg-page-header-button-padding-vertical: 0px;
    --cfg-page-header-background-color: #ffffff;
    --cfg-page-header-button-padding-horizontal: 10px;
    --cfg-page-header-search-background-color: var(--color-white);
    --cfg-page-header-divider-line-color: var(--color-gray_300);
    --cfg-page-header-dropdown-item-hover-background-color: var(--color-gray_200);
    --cfg-page-header-padding-vertical: 8px;
    --cfg-page-header-dropdown-font-family: var(--font-body-family);
    --cfg-page-header-dropdown-font-size: var(--font-body-size);
    --cfg-page-header-dropdown-font-weight: var(--font-body-weight);
    --cfg-page-header-dropdown-font-style: var(--font-body-style);
    --cfg-page-header-dropdown-font-color: var(--font-body-color);
    --cfg-page-header-search-focus-border-color: var(--color-blue_500);
    --cfg-page-header-search-font-family: var(--font-body-family);
    --cfg-page-header-search-font-size: var(--font-body-size);
    --cfg-page-header-search-font-weight: var(--font-body-weight);
    --cfg-page-header-search-font-style: var(--font-body-style);
    --cfg-page-header-search-font-color: var(--font-body-color);
    --cfg-page-header-search-height: 32px;
    --cfg-page-header-search-padding-horizontal: 10px;
    --cfg-page-header-search-placeholder-font-family: var(--font-hint-family);
    --cfg-page-header-search-placeholder-font-size: var(--font-hint-size);
    --cfg-page-header-search-placeholder-font-weight: var(--font-hint-weight);
    --cfg-page-header-search-placeholder-font-style: var(--font-hint-style);
    --cfg-page-header-search-placeholder-font-color: var(--font-hint-color);
    --cfg-page-header-search-width: 220px;
    --cfg-page-header-dropdown-background-color: var(--color-white);
    --cfg-page-header-divider-line-weight: var(--line-normal-weight);
    --cfg-page-header-divider-line-style: var(--line-normal-style);
    --cfg-page-header-divider-line: var(--line-normal);
    --cfg-page-header-dropdown-item-selected-background-color: var(--color-blue_50);
    --cfg-page-header-padding-top: 8px;
    --cfg-page-header-padding-bottom: 8px;
    --cfg-page-header-search-border-radius: 4px;
    --cfg-page-header-item-height: 32px;
    --cfg-page-header-shadow: var(--shadow-sm);
    --cfg-page-header-item-to-item-spacing: 7px;

    /* pages */
    --cfg-page-outer-margin: 16px;
    --cfg-page-minor-border-weight: 1px;
    --cfg-page-minor-border-color: #f0f0f0;
    --cfg-page-major-border-weight: 1px;
    --cfg-page-major-border-color: var(--color-slate_200);
    --cfg-page-font-family: var(--font-body-family);
    --cfg-page-font-size: var(--font-body-size);
    --cfg-page-font-weight: var(--font-body-weight);
    --cfg-page-font-style: var(--font-body-style);
    --cfg-page-font-color: var(--font-body-color);
    --cfg-page-background-color: var(--color-gray_100);

    /* priority indicators */
    --cfg-priority-star-size: 16px;
    --cfg-priority-star-idle-color: var(--color-gray_300);
    --cfg-priority-star-active-color: var(--color-yellow_500);

    /* progress indicators */
    --cfg-progress-field-height: 8px;
    --cfg-loading-overlay-color: var(--color-white);
    --cfg-progress-field-border-radius: 4px;
    --cfg-loading-spinner-color: var(--color-blue_500);
    --cfg-progress-field-bar-color: var(--color-blue_500);
    --cfg-progress-field-track-color: var(--color-gray_200);

    /* radio buttons */
    --cfg-radio-selected-border-color: var(--color-slate_700);
    --cfg-radio-idle-background-color: var(--color-white);
    --cfg-radio-disabled-border-color: var(--color-gray_200);
    --cfg-radio-disabled-background-color: var(--color-gray_100);
    --cfg-radio-border-line-weight: var(--line-normal-weight);
    --cfg-radio-border-line-style: var(--line-normal-style);
    --cfg-radio-border-line-color: var(--line-normal-color);
    --cfg-radio-border-line: var(--line-normal);
    --cfg-radio-selected-dot-color: var(--color-slate_700);
    --cfg-radio-idle-border-color: var(--color-gray_300);

    /* schematic layout */
    --cfg-schematic-separator-background: var(--color-gray_100);
    --cfg-schematic-separator-color: var(--color-gray_500);
    --cfg-schematic-item-spacing: 4px;
    --cfg-schematic-row-spacing: 6px;
    --cfg-schematic-container-border-style-weight: var(--line-dashed-weight);
    --cfg-schematic-container-border-style-style: var(--line-dashed-style);
    --cfg-schematic-container-border-style-color: var(--line-dashed-color);
    --cfg-schematic-container-border-style: var(--line-dashed);
    --cfg-schematic-selected-outline-color: var(--color-blue_500);
    --cfg-schematic-box-font-size: 12.5px;
    --cfg-schematic-box-padding: 4px 9px;
    --cfg-schematic-box-radius: 5px;
    --cfg-schematic-box-border-weight: 1px;
    --cfg-schematic-box-border-color: var(--color-gray_300);
    --cfg-schematic-box-background: var(--color-white);

    /* segmented control */
    --cfg-segmented-control-max-segments: 5;
    --cfg-segmented-control-idle-content: var(--color-gray_600);
    --cfg-segmented-control-idle-background: var(--color-white);
    --cfg-segmented-control-height: 32px;
    --cfg-segmented-control-selected-content: var(--color-white);
    --cfg-segmented-control-border-color: var(--color-gray_300);
    --cfg-segmented-control-border-radius: 7px;
    --cfg-segmented-control-min-segments: 2;
    --cfg-segmented-control-selected-background: var(--color-gray_800);

    /* selection */
    --cfg-editor-selection-halo: 6px blue at 16%;
    --cfg-editor-selection-outline-offset: 3px;
    --cfg-editor-selection-outline-color: var(--color-blue_500);

    /* settings panel */
    --cfg-editor-panel-tab-radius: 7px;
    --cfg-editor-panel-tab-active-color: var(--color-gray_900);
    --cfg-editor-panel-pane-padding: 10px;
    --cfg-editor-panel-tab-font-size: 10.5px;
    --cfg-editor-panel-tab-height: 32px;
    --cfg-editor-panel-width: 286px;
    --cfg-editor-panel-tab-active-background: var(--color-white);
    --cfg-editor-panel-border-radius: 8px;
    --cfg-editor-panel-border-weight: 1px;
    --cfg-editor-panel-border-color: var(--color-gray_300);
    --cfg-editor-panel-background: var(--color-white);
    --cfg-editor-panel-tab-idle-background: var(--color-gray_200);
    --cfg-editor-panel-empty-hint-color: var(--color-gray_400);
    --cfg-editor-panel-shadow: var(--shadow-sm);

    /* settings section */
    --cfg-editor-section-marker-size: 14px;
    --cfg-editor-section-default-state: collapsed;
    --cfg-editor-section-spacing: 8px;
    --cfg-editor-section-border-color: var(--color-gray_300);
    --cfg-editor-section-header-font-size: 10px;
    --cfg-editor-section-radius: 6px;
    --cfg-editor-section-header-background: var(--color-gray_100);

    /* stage indicators */
    --cfg-stage-indicator-segment-gap: 4px;
    --cfg-stage-indicator-flat-padding: 12px;
    --cfg-stage-indicator-text-to-height-ratio: 0.8;
    --cfg-stage-indicator-tail-padding: 12px;
    --cfg-stage-indicator-selected-content-color: var(--color-white);
    --cfg-stage-indicator-point-padding: 16px;
    --cfg-stage-indicator-letter-spacing: 0.5px;
    --cfg-stage-indicator-idle-content-color: var(--color-gray_500);
    --cfg-stage-indicator-idle-background-color: var(--color-white);
    --cfg-stage-indicator-font-family: var(--font-label-family);
    --cfg-stage-indicator-font-size: var(--font-label-size);
    --cfg-stage-indicator-font-weight: var(--font-label-weight);
    --cfg-stage-indicator-font-style: var(--font-label-style);
    --cfg-stage-indicator-font-color: var(--font-label-color);
    --cfg-stage-indicator-border-color: var(--color-gray_300);
    --cfg-stage-indicator-arrow-depth: 8px;
    --cfg-stage-indicator-border-line-weight: var(--line-normal-weight);
    --cfg-stage-indicator-border-line-style: var(--line-normal-style);
    --cfg-stage-indicator-border-line-color: var(--line-normal-color);
    --cfg-stage-indicator-border-line: var(--line-normal);
    --cfg-stage-indicator-selected-background-color: var(--color-green_600);

    /* stage selectors */
    --cfg-stage-selector-arrow-depth: 8px;
    --cfg-stage-selector-flat-padding: 12px;
    --cfg-stage-selector-point-padding: 16px;
    --cfg-stage-selector-tail-padding: 12px;
    --cfg-stage-selector-segment-gap: 4px;
    --cfg-stage-selector-letter-spacing: 0.5px;
    --cfg-stage-selector-text-to-height-ratio: 0.8;
    --cfg-stage-selector-font-family: var(--font-label-family);
    --cfg-stage-selector-font-size: var(--font-label-size);
    --cfg-stage-selector-font-weight: var(--font-label-weight);
    --cfg-stage-selector-font-style: var(--font-label-style);
    --cfg-stage-selector-font-color: var(--font-label-color);
    --cfg-stage-selector-border-line-weight: var(--line-normal-weight);
    --cfg-stage-selector-border-line-style: var(--line-normal-style);
    --cfg-stage-selector-border-line-color: var(--line-normal-color);
    --cfg-stage-selector-border-line: var(--line-normal);
    --cfg-stage-selector-idle-background-color: var(--color-white);
    --cfg-stage-selector-idle-content-color: var(--color-gray_500);
    --cfg-stage-selector-border-color: var(--color-gray_300);
    --cfg-stage-selector-selected-background-color: var(--color-gray_200);
    --cfg-stage-selector-selected-content-color: var(--color-gray_900);
    --cfg-stage-selector-hover-background-color: var(--color-gray_100);
    --cfg-stage-selector-hover-content-color: var(--color-gray_900);
    --cfg-stage-selector-hover-border-color: var(--color-gray_400);
    --cfg-stage-selector-selected-border-color: var(--color-gray_400);
    --cfg-stage-selector-disabled-background-color: var(--color-white);
    --cfg-stage-selector-disabled-content-color: var(--color-gray_400);
    --cfg-stage-selector-segment-width: fixed;

    /* status colors */
    --cfg-status-color-warning: var(--color-green_600);
    --cfg-status-color-inactive: var(--color-gray_400);
    --cfg-status-color-normal: var(--color-green_500);
    --cfg-status-color-urgent: var(--color-green_600);
    --cfg-status-color-delay: var(--color-green_700);
    --cfg-status-color-done: var(--color-gray_500);
    --cfg-status-color-ahead: var(--color-blue_500);

    /* text buttons */
    --cfg-text-button-secondary-hover-background-color: var(--color-gray_100);
    --cfg-text-button-secondary-selected-text-color: var(--color-white);
    --cfg-text-button-secondary-selected-border-color: var(--color-slate_700);
    --cfg-text-button-secondary-selected-background-color: var(--color-slate_700);
    --cfg-text-button-secondary-idle-text-color: var(--color-gray_500);
    --cfg-text-button-secondary-idle-border-color: var(--color-gray_300);
    --cfg-text-button-secondary-idle-background-color: var(--color-white);
    --cfg-text-button-secondary-hover-text-color: var(--color-gray_900);
    --cfg-text-button-secondary-hover-border-color: var(--color-gray_400);
    --cfg-text-button-secondary-disabled-text-color: var(--color-gray_400);
    --cfg-text-button-secondary-disabled-border-color: var(--color-gray_200);
    --cfg-text-button-to-button-spacing: 8px;
    --cfg-text-button-secondary-disabled-background-color: var(--color-gray_100);
    --cfg-text-button-primary-selected-text-color: var(--color-white);
    --cfg-text-button-primary-selected-border-color: var(--color-blue_800);
    --cfg-text-button-primary-selected-background-color: var(--color-blue_700);
    --cfg-text-button-primary-idle-text-color: var(--color-white);
    --cfg-text-button-primary-idle-border-color: var(--color-blue_600);
    --cfg-text-button-primary-idle-background-color: var(--color-blue_500);
    --cfg-text-button-primary-hover-text-color: var(--color-white);
    --cfg-text-button-primary-hover-border-color: var(--color-blue_700);
    --cfg-text-button-primary-hover-background-color: var(--color-blue_600);
    --cfg-text-button-primary-disabled-text-color: var(--color-gray_400);
    --cfg-text-button-primary-disabled-border-color: var(--color-gray_200);
    --cfg-text-button-primary-disabled-background-color: var(--color-gray_100);
    --cfg-text-button-padding-vertical: 9px;
    --cfg-text-button-border-radius: 6px;
    --cfg-text-button-padding-horizontal: 20px;
    --cfg-text-button-font-family: var(--font-label-family);
    --cfg-text-button-font-size: var(--font-label-size);
    --cfg-text-button-font-weight: var(--font-label-weight);
    --cfg-text-button-font-style: var(--font-label-style);
    --cfg-text-button-font-color: var(--font-label-color);
    --cfg-text-button-border-line-weight: var(--line-normal-weight);
    --cfg-text-button-border-line-style: var(--line-normal-style);
    --cfg-text-button-border-line-color: var(--line-normal-color);
    --cfg-text-button-border-line: var(--line-normal);

    /* tiles */
    --cfg-tile-border-selected-shadow: var(--shadow-none);
    --cfg-tile-border-color-selected: var(--color-blue_600);
    --cfg-tile-title-size: 11px;
    --cfg-tile-title-weight: 700;
    --cfg-tile-count-size: 20px;
    --cfg-tile-count-weight: 700;
    --cfg-tile-min-width: 200px;
    --cfg-tile-border-weight: 1px;
    --cfg-tile-vertical-gap: 14px;
    --cfg-tile-select-button-height: 0px;
    --cfg-tile-border-color-editable: var(--color-red_700);
    --cfg-tile-relative-height: equal_per_row;
    --cfg-tile-padding-vertical: 14px;
    --cfg-tile-padding-horizontal: 16px;
    --cfg-tile-minimum-width: 240px;
    --cfg-tile-minimum-height: 0px;
    --cfg-tile-background-color: var(--color-white);
    --cfg-tile-maximum-width: 360px;
    --cfg-tile-horizontal-gap: 14px;
    --cfg-tile-border-color-read-only: var(--color-gray_200);
    --cfg-tile-border-selected-line-weight: var(--line-thick-weight);
    --cfg-tile-border-selected-line-style: var(--line-thick-style);
    --cfg-tile-border-selected-line-color: var(--line-thick-color);
    --cfg-tile-border-selected-line: var(--line-thick);

    /* toggles */
    --cfg-toggle-transition-duration: 150ms;
    --cfg-toggle-disabled-track-color: var(--color-gray_200);
    --cfg-toggle-knob-color: var(--color-white);
    --cfg-toggle-knob-size: 16px;
    --cfg-toggle-off-track-color: var(--color-gray_300);
    --cfg-toggle-on-track-color: var(--color-slate_700);
    --cfg-toggle-track-height: 20px;
    --cfg-toggle-track-width: 36px;

    /* tooltips */
    --cfg-tooltip-padding-horizontal: 8px;
    --cfg-tooltip-padding-vertical: 5px;
    --cfg-tooltip-text-color: var(--color-white);
    --cfg-tooltip-arrow-size: 6px;
    --cfg-tooltip-border-radius: 4px;
    --cfg-tooltip-border-shadow: var(--shadow-sm);
    --cfg-tooltip-background-color: var(--color-black);
    --cfg-tooltip-delay: 400ms;
    --cfg-tooltip-font-family: var(--font-caption-family);
    --cfg-tooltip-font-size: var(--font-caption-size);
    --cfg-tooltip-font-weight: var(--font-caption-weight);
    --cfg-tooltip-font-style: var(--font-caption-style);
    --cfg-tooltip-font-color: var(--font-caption-color);
    --cfg-tooltip-max-width: 240px;

    /* uploads */
    --cfg-upload-dropzone-background-color: var(--color-gray_50);
    --cfg-upload-hint-font-family: var(--font-hint-family);
    --cfg-upload-hint-font-size: var(--font-hint-size);
    --cfg-upload-hint-font-weight: var(--font-hint-weight);
    --cfg-upload-hint-font-style: var(--font-hint-style);
    --cfg-upload-hint-font-color: var(--font-hint-color);
    --cfg-upload-icon-color: var(--color-gray_400);
    --cfg-upload-preview-border-radius: 6px;
    --cfg-upload-preview-size: 64px;
    --cfg-upload-dropzone-border-color: var(--color-gray_300);
    --cfg-upload-dropzone-border-line-weight: var(--line-dashed-weight);
    --cfg-upload-dropzone-border-line-style: var(--line-dashed-style);
    --cfg-upload-dropzone-border-line-color: var(--line-dashed-color);
    --cfg-upload-dropzone-border-line: var(--line-dashed);
    --cfg-upload-dropzone-hover-background-color: var(--color-gray_100);
    --cfg-upload-progress-track-color: var(--color-gray_200);
    --cfg-upload-dropzone-border-radius: 8px;
    --cfg-upload-progress-bar-color: var(--color-blue_500);

    /* validation rows */
    --cfg-validation-row-settled-background-color: var(--color-green_100);
    --cfg-validation-row-unsettled-background-color: var(--color-red_100);
    --cfg-validation-row-settled-input-background-color: var(--color-transparent);
    --cfg-validation-row-settled-input-border-color: var(--color-green_400);
    --cfg-validation-row-accept-icon-color: var(--color-green_600);
    --cfg-validation-row-reject-icon-color: var(--color-red_600);
}

:root {
    /* ── Legacy aliases (layout compatibility) ── */
    --page-background-color: var(--cfg-page-background-color, #f5f7fa);
    --page-outer-margin: var(--cfg-page-outer-margin, 16px);
    --page-font-color: var(--cfg-page-font-color, var(--color-text-primary, #1a202c));
    --page-major-border-color: var(--cfg-page-major-border-color, #e2e8f0);
    --page-major-border-weight: var(--cfg-page-major-border-weight, 1px);
    --page-minor-border-color: var(--cfg-page-minor-border-color, #f0f0f0);
    --page-minor-border-weight: var(--cfg-page-minor-border-weight, 1px);
    --major-border-color: var(--cfg-page-header-divider-line-color);
    --major-border-weight: var(--cfg-page-header-divider-line-weight);
    --minor-border-color: var(--color-border-subtle);
    --font-color: var(--color-text-primary);
    --header-vertical-padding: var(--cfg-page-header-padding-vertical);
    --header-padding-top: var(--cfg-page-header-padding-top, var(--cfg-page-header-padding-vertical, 12px));
    --header-padding-bottom: var(--cfg-page-header-padding-bottom, var(--cfg-page-header-padding-vertical, 12px));
    --title-text-font: var(--cfg-page-header-title-font-family);
    --title-text-size: var(--cfg-page-header-title-font-size);
    --title-text-style: var(--cfg-page-header-title-font-weight);
    --button-height: var(--cfg-page-header-item-height);
    --button-horizontal-spacing: var(--cfg-page-header-item-to-item-spacing);
    --button-idle-background-color: var(--cfg-header-button-idle-background-color);
    --button-hover-background-color: var(--cfg-header-button-hover-background-color);
    --button-selected-background-color: var(--cfg-header-button-selected-background-color);
    --button-idle-symbol-color: var(--cfg-header-button-idle-content-color);
    --button-hover-symbol-color: var(--cfg-header-button-hover-content-color);
    --button-selected-symbol-color: var(--cfg-header-button-selected-content-color);
    --button-idle-border-color: var(--cfg-header-button-idle-border-color);
    --button-hover-border-color: var(--cfg-header-button-hover-border-color);
    --button-selected-border-color: var(--cfg-header-button-selected-border-color);
    --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-width);
    --search-box-height: var(--cfg-page-header-search-height);
    --search-text-font: var(--cfg-page-header-search-font-family);
    --search-text-size: var(--cfg-page-header-search-font-size);
    --menu-width: var(--cfg-menu-width, 220px);
    --menu-slide-timer: var(--cfg-menu-slide-timer, 0.25s);
    --menu-background-color: var(--cfg-menu-idle-background-color, #ffffff);
    --menu-text-color: var(--cfg-menu-font-idle-color, #1f2937);
    --menu-hover-background-color: var(--cfg-menu-hover-background-color, #f3f4f6);
    --menu-font: var(--cfg-menu-font-family, "Segoe UI", sans-serif);
    --menu-font-size: var(--cfg-menu-font-size, 14px);
    --menu-item-height: var(--cfg-menu-item-height, 34px);
    --menu-child-indent: var(--cfg-menu-child-indent, 18px);
    --menu-left-padding: var(--cfg-menu-left-padding, 18px);
    --list-header-bg: var(--cfg-list-column-title-idle-background-color);
    --list-header-color: var(--color-text-secondary);
    --list-row-bg: var(--cfg-list-row-idle-background-color);
    --list-row-alt-bg: var(--cfg-list-alternate-row-idle-background-color);
    --list-row-hover-bg: var(--cfg-list-row-hover-background-color);
    --list-row-selected-bg: var(--cfg-list-row-selected-background-color);
    --status-normal-color: var(--cfg-status-color-normal);
    --status-warning-color: var(--cfg-status-color-warning);
    --status-urgent-color: var(--cfg-status-color-urgent);
    --header-chevron-bg-idle: var(--cfg-stage-indicator-idle-background-color, #e2e8f0);
    --header-chevron-font-idle: var(--cfg-stage-indicator-idle-content-color, #4b5563);
    --header-chevron-bg-selected: var(--cfg-stage-indicator-selected-background-color, #3b82f6);
    --header-chevron-font-selected: var(--cfg-stage-indicator-selected-content-color, #ffffff);
    --header-chevron-arrow-size: var(--cfg-stage-indicator-arrow-depth, 12px);
    --header-chevron-gap: var(--cfg-stage-indicator-segment-gap, 2px);
    --header-chevron-h-padding: var(--cfg-stage-indicator-flat-padding, 12px);
    --header-chevron-end-padding: var(--cfg-stage-indicator-flat-padding, 16px);
    --header-chevron-tail-padding: var(--cfg-stage-indicator-tail-padding, 12px);
    --header-chevron-head-padding: var(--cfg-stage-indicator-point-padding, 12px);
    --header-chevron-border-weight: var(--cfg-stage-indicator-border-line-weight, 1px);
    --header-chevron-border-color: var(--cfg-stage-indicator-border-color, transparent);
    --header-stage-font-family: var(--cfg-stage-indicator-font-family);
    --header-stage-font-size: var(--cfg-stage-indicator-font-size);
    --header-stage-font-weight: var(--cfg-stage-indicator-font-weight);
    --header-stage-letter-spacing: var(--cfg-stage-indicator-letter-spacing, 0.5px);
    --cfg-calendar-hour-line-width: var(--cfg-calendar-hour-line-weight);
    --cfg-calendar-item-border-width: var(--cfg-calendar-item-border-line-weight);
}

input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: var(--cfg-checkbox-border-line-weight, 1px) var(--cfg-checkbox-border-line-style, solid) var(--cfg-checkbox-idle-border-color, #d4d4d4);
    border-radius: var(--cfg-checkbox-border-radius, 4px);
    background-color: var(--cfg-checkbox-idle-background-color, #ffffff);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}
input[type="checkbox"]::after {
    content: "";
    width: 10px;
    height: 10px;
    transform: scale(0);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.5 6.5 11.5 2.5 7.5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.5 4.5 6.5 11.5 2.5 7.5' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    background-color: var(--cfg-checkbox-check-mark-color, #ffffff);
}
input[type="checkbox"]:checked,
input[type="checkbox"]:indeterminate {
    background-color: var(--cfg-checkbox-checked-background-color, #334155);
    border-color: var(--cfg-checkbox-checked-border-color, #334155);
}
input[type="checkbox"]:checked::after {
    transform: scale(1);
}
input[type="checkbox"]:indeterminate::after {
    transform: scale(1);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    background-color: var(--cfg-checkbox-indeterminate-mark-color, #ffffff);
}
input[type="checkbox"]:disabled {
    background-color: var(--cfg-checkbox-disabled-background-color, #f5f5f5);
    border-color: var(--cfg-checkbox-disabled-border-color, #e5e5e5);
    cursor: not-allowed;
}
/* The form view's readonly checkboxes draw their own check via background-image
   (input.field-checkbox.readonly) — suppress the mask mark so they don't get two. */
input[type="checkbox"].readonly::after {
    content: none;
}

/* ── RADIO BUTTONS (radio buttons category) ─────────────────────────────── */
/* Same approach as the checkbox block above: appearance:none is required
   because a native radio ignores border/background, and the dot is drawn with
   ::after so radio_selected_dot_color stays configurable. Radios appear on
   eight pages (forms, popup/dialog editors, list columns, dashboard) and all
   of them were rendering in the browser's default colours — none of the seven
   radio_* rows had a consumer. Component rules with higher specificity still
   win, so existing custom radios are unaffected. */
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: var(--cfg-radio-border-line-weight, 1px) var(--cfg-radio-border-line-style, solid) var(--cfg-radio-idle-border-color, #d4d4d4);
    border-radius: 50%;
    background-color: var(--cfg-radio-idle-background-color, #ffffff);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
}
input[type="radio"]::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
    background-color: var(--cfg-radio-selected-dot-color, #334155);
}
input[type="radio"]:checked {
    border-color: var(--cfg-radio-selected-border-color, #334155);
}
input[type="radio"]:checked::after {
    transform: scale(1);
}
input[type="radio"]:disabled {
    background-color: var(--cfg-radio-disabled-background-color, #f5f5f5);
    border-color: var(--cfg-radio-disabled-border-color, #e5e5e5);
    cursor: not-allowed;
}
input[type="radio"]:disabled::after {
    opacity: 0.5;
}

/* ── DIALOGS (dialogs category) ─────────────────────────────────────────── */
/* Selectors cover every dialog markup in the app so one rule set drives them
   all: .custom-popup-* (dashboard), .frm-popup-* / .fcfg-* (form editor),
   .editor-* (list views). Fallbacks reproduce the previously hard-coded look. */

/* dialog_margin — keeps a dialog off the viewport edge.
   dialog_max_height_default — the cap when a dialog sets no explicit height. */
.custom-popup-box,
.frm-popup-box,
.fcfg-modal,
.editor-content {
    margin: var(--cfg-dialog-margin, 24px);
    max-height: var(--cfg-dialog-max-height-default, 85vh);
}

/* dialog_transition_duration — hover/focus feedback inside a dialog. */
.custom-popup-box button,  .custom-popup-box input,  .custom-popup-box select,  .custom-popup-box textarea,
.frm-popup-box button,     .frm-popup-box input,     .frm-popup-box select,     .frm-popup-box textarea,
.fcfg-modal button,        .fcfg-modal input,        .fcfg-modal select,        .fcfg-modal textarea,
.editor-content button,    .editor-content input,    .editor-content select,    .editor-content textarea {
    transition-duration: var(--cfg-dialog-transition-duration, 150ms);
}

/* dialog_divider_line + dialog_divider_color — rules between dialog sections. */
.custom-popup-body hr, .frm-popup-body hr, .fcfg-body hr, .editor-content hr,
.custom-popup-body .dlg-divider, .frm-popup-body .dlg-divider,
.fcfg-body .dlg-divider, .editor-content .dlg-divider {
    border: none;
    border-top: var(--cfg-dialog-divider-line-weight, 1px)
                var(--cfg-dialog-divider-line-style, solid)
                var(--cfg-dialog-divider-color, #e2e8f0);
}

/* ── Dialog item rows ── */
/* dialog_item_vertical_spacing / _pad_left / _pad_right */
.dlg-item {
    margin-bottom: var(--cfg-dialog-item-vertical-spacing, 16px);
    padding-left:  var(--cfg-dialog-item-pad-left, 8px);
    padding-right: var(--cfg-dialog-item-pad-right, 8px);
}

/* dialog_item_label_font / _label_width / _label_alignment / _label_to_data_spacing */
.dlg-item-label {
    display: block;
    /* dialog_item_label_width reserves a minimum label column (so short labels
       line up and text-align has room to act) but must not clip a longer one:
       a hard width made "Major Border Weight (px)" wrap onto a second line.
       fit-content + nowrap keeps every label on one line and lets it grow. */
    width: fit-content;
    min-width: var(--cfg-dialog-item-label-width, 0);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: var(--cfg-dialog-item-label-to-data-spacing, 8px);
    text-align: left;
    font-family: var(--cfg-dialog-item-label-font-family, inherit);
    font-size:   var(--cfg-dialog-item-label-font-size, 11px);
    font-weight: var(--cfg-dialog-item-label-font-weight, 600);
    font-style:  var(--cfg-dialog-item-label-font-style, normal);
    color:       var(--cfg-dialog-item-label-font-color, #718096);
}

/* dialog_item_required_indicator + dialog_item_input_required_color */
.dlg-item-label.required::after {
    content: "*";
    margin-left: 3px;
    color: var(--cfg-dialog-item-input-required-color, #dc2626);
}

/* dialog_item_data_font — the value text of a dialog row. */
.dlg-item-data,
.dlg-item input, .dlg-item select, .dlg-item textarea {
    font-family: var(--cfg-dialog-item-data-font-family, inherit);
    font-size:   var(--cfg-dialog-item-data-font-size, 13px);
    font-weight: var(--cfg-dialog-item-data-font-weight, 400);
    font-style:  var(--cfg-dialog-item-data-font-style, normal);
}

/* dialog_item_input_height + dialog_item_input_padding.
   Colour swatches and toggles carry their own dimensions — excluded. */
.dlg-item input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.dlg-item select {
    min-height: var(--cfg-dialog-item-input-height, 36px);
    padding: 0 var(--cfg-dialog-item-input-padding, 12px);
}
.dlg-item textarea {
    padding: var(--cfg-dialog-item-input-padding, 12px);
}

/* dialog_item_input_placeholder_font */
.dlg-item input::placeholder,
.dlg-item textarea::placeholder {
    font-family: var(--cfg-dialog-item-input-placeholder-font-family, inherit);
    font-size:   var(--cfg-dialog-item-input-placeholder-font-size, 13px);
    font-weight: var(--cfg-dialog-item-input-placeholder-font-weight, 400);
    font-style:  var(--cfg-dialog-item-input-placeholder-font-style, normal);
    color:       var(--cfg-dialog-item-input-placeholder-font-color, #9ca3af);
}

/* dialog_item_input_disabled_opacity */
.dlg-item input:disabled,
.dlg-item select:disabled,
.dlg-item textarea:disabled {
    opacity: var(--cfg-dialog-item-input-disabled-opacity, 0.5);
    cursor: not-allowed;
}

/* ── MULTI SELECT (multi select category) ───────────────────────────────── */
/* Chips-style multi-value picker (public/js/ct-multi-select.js). Every rule
   here is driven by a `multi select` configuration row; the widget itself
   carries no colours of its own. */
.ms-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* multi_select_spacing — gap between chips (and chip → input) */
    gap: var(--cfg-multi-select-spacing, 4px);
}
.ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    /* multi_select_background_color / _border_line / _border_radius /
       _padding_vertical / _padding_horizontal */
    background: var(--cfg-multi-select-background-color, #eff6ff);
    border: var(--cfg-multi-select-border-line-weight, 0)
            var(--cfg-multi-select-border-line-style, none)
            var(--cfg-multi-select-border-line-color, transparent);
    border-radius: var(--cfg-multi-select-border-radius, 4px);
    padding: var(--cfg-multi-select-padding-vertical, 3px)
             var(--cfg-multi-select-padding-horizontal, 8px);
    font-size: 12px;
    line-height: 1.3;
    max-width: 100%;
}
.ms-chip-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-remove {
    /* multi_select_remove_icon_color — the ×/− glyph on each chip */
    color: var(--cfg-multi-select-remove-icon-color, #2563eb);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.ms-remove:hover { opacity: 0.7; }
.ms-input {
    flex: 1;
    min-width: 60px;
    border: none !important;
    outline: none;
    background: transparent !important;
    padding: 2px !important;
    min-height: 0 !important;
    font: inherit;
}
.ms-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 2px);
    z-index: 300;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--color-border-default, #e2e8f0);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    /* dropdown_max_items — visible options before the list scrolls
       (each .ms-menu-item is 30px high). */
    max-height: calc(var(--cfg-dropdown-max-items, 8) * 30px);
}
.ms-menu-item {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-menu-item:hover, .ms-menu-item.active { background: var(--color-background-muted, #f1f5f9); }

/* ── PROGRESS FIELD (progress indicators category) ──────────────────────── */
/* The "Progress bar" column display (view_display_id 108) renders a numeric
   field as a filled bar. The four progress_field_* rows had no consumer at all
   — the only progress bar in the app lives in the Import Utility and carries
   its own hard-coded colours. */
.progress-field {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-width: 60px;
}
.progress-field-track {
    flex: 1;
    overflow: hidden;
    /* progress_field_height / _track_color / _border_radius */
    height: var(--cfg-progress-field-height, 8px);
    background: var(--cfg-progress-field-track-color, #e5e5e5);
    border-radius: var(--cfg-progress-field-border-radius, 4px);
}
.progress-field-bar {
    display: block;
    height: 100%;
    /* progress_field_bar_color — the filled portion */
    background: var(--cfg-progress-field-bar-color, #3b82f6);
    border-radius: var(--cfg-progress-field-border-radius, 4px);
    transition: width 0.25s ease;
}
.progress-field-value {
    flex-shrink: 0;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
}

/* ── UPLOAD PREVIEW + PROGRESS (uploads category) ───────────────────────── */
/* The attachment list (form edit) shows a thumbnail for image files and a
   per-file progress track. The seven dropzone rows were already wired; these
   four had no element to attach to until those two were added. */
.upload-preview {
    /* upload_preview_size / _border_radius */
    width:  var(--cfg-upload-preview-size, 64px);
    height: var(--cfg-upload-preview-size, 64px);
    border-radius: var(--cfg-upload-preview-border-radius, 6px);
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-background-muted, #f1f5f9);
}
.upload-progress {
    display: block;
    width: 100%;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    /* upload_progress_track_color — the unfilled part */
    background: var(--cfg-upload-progress-track-color, #e5e5e5);
}
.upload-progress-bar {
    display: block;
    height: 100%;
    /* upload_progress_bar_color — the filled part */
    background: var(--cfg-upload-progress-bar-color, #3b82f6);
    transition: width 0.2s ease;
}

/* ── TOGGLES (toggles category) ─────────────────────────────────────────── */
/* Sliding on/off switch. Boolean settings across the app render as
   <input type="checkbox" class="ct-toggle">; the checkbox rules above are
   neutralised here so the same element becomes a track + knob. All eight
   toggle_* rows drive it — none of them had a consumer before. */
input[type="checkbox"].ct-toggle {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    vertical-align: middle;
    display: inline-block;
    /* toggle_track_width / _track_height / _off_track_color */
    width:  var(--cfg-toggle-track-width, 36px);
    height: var(--cfg-toggle-track-height, 20px);
    background-color: var(--cfg-toggle-off-track-color, #d4d4d4);
    border: none;
    border-radius: 999px;
    /* toggle_transition_duration */
    transition: background-color var(--cfg-toggle-transition-duration, 150ms) ease;
}
input[type="checkbox"].ct-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    /* toggle_knob_size / _knob_color */
    width:  var(--cfg-toggle-knob-size, 16px);
    height: var(--cfg-toggle-knob-size, 16px);
    left: calc((var(--cfg-toggle-track-height, 20px) - var(--cfg-toggle-knob-size, 16px)) / 2);
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: var(--cfg-toggle-knob-color, #ffffff);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    transition: left var(--cfg-toggle-transition-duration, 150ms) ease;
    /* the checkbox rules above draw a mask-based tick — suppress it here */
    -webkit-mask: none;
    mask: none;
}
input[type="checkbox"].ct-toggle:checked {
    /* toggle_on_track_color */
    background-color: var(--cfg-toggle-on-track-color, #334155);
    border-color: transparent;
}
input[type="checkbox"].ct-toggle:checked::after {
    left: calc(var(--cfg-toggle-track-width, 36px) - var(--cfg-toggle-knob-size, 16px)
               - ((var(--cfg-toggle-track-height, 20px) - var(--cfg-toggle-knob-size, 16px)) / 2));
    transform: translateY(-50%) scale(1);
}
input[type="checkbox"].ct-toggle:disabled {
    /* toggle_disabled_track_color */
    background-color: var(--cfg-toggle-disabled-track-color, #e5e5e5);
    border-color: transparent;
    cursor: not-allowed;
}