:root {
    --usim-theme-name: light;
    color-scheme: light;

    /* Semantic color tokens */
    --usim-color-bg: #f5f7fa;
    --usim-color-surface: #ffffff;
    --usim-color-surface-muted: #f8f9fa;
    --usim-color-surface-hover: #e9ecef;
    --usim-color-border: #dcdde1;
    --usim-color-border-strong: #e0e0e0;
    --usim-color-text: #34495e;
    --usim-color-text-strong: #2c3e50;
    --usim-color-text-muted: #6c757d;
    --usim-color-text-inverse: #ffffff;

    /* Elevation tokens */
    --usim-shadow-soft: rgba(0, 0, 0, 0.1);
    --usim-shadow-medium: rgba(0, 0, 0, 0.15);
    --usim-container-bg: rgba(255, 255, 255, 0.96);
    --usim-container-border: rgba(30, 41, 59, 0.08);
    --usim-container-shadow: 0 2px 6px rgba(15, 23, 36, 0.1);
    --usim-container-shadow-hover: 0 10px 26px rgba(15, 23, 36, 0.12);
    --usim-container-title-border: rgba(52, 152, 219, 0.32);
    --usim-container-title-text: var(--usim-color-text-strong);
    --usim-container-title-shadow: none;
    --usim-tooltip-bg: #1f2937;
    --usim-tooltip-text: #f9fafb;
    --usim-tooltip-shadow: 0 4px 12px rgba(15, 23, 36, 0.24);

    /* Action tokens */
    --usim-color-primary: #3498db;
    --usim-color-success: #2ecc71;
    --usim-color-danger: #e74c3c;
    --usim-color-warning: #f39c12;
    --usim-color-info: #17a2b8;

    /* Button tokens */
    --usim-button-text: var(--usim-color-text-inverse);
    --usim-button-shadow-hover: 0 4px 12px rgba(15, 23, 36, 0.15);
    --usim-button-primary-bg: var(--usim-color-primary);
    --usim-button-success-bg: var(--usim-color-success);
    --usim-button-danger-bg: var(--usim-color-danger);
    --usim-button-warning-bg: var(--usim-color-warning);
    --usim-button-info-bg: var(--usim-color-info);

    /* Form state tokens */
    --usim-form-required-color: var(--usim-color-danger);
    --usim-form-control-bg: var(--usim-color-surface);
    --usim-form-control-border: var(--usim-color-border);
    --usim-form-control-text: var(--usim-color-text);
    --usim-form-control-disabled-bg: var(--usim-color-surface-muted);
    --usim-form-control-focus-border: var(--usim-color-primary);
    --usim-form-control-focus-ring: rgba(52, 152, 219, 0.12);
    --usim-form-control-error-border: var(--usim-color-danger);
    --usim-form-control-error-ring: rgba(231, 76, 60, 0.18);
    --usim-form-checkbox-accent: var(--usim-color-primary);

    /* Card tokens */
    --usim-card-bg: var(--usim-color-surface);
    --usim-card-border: var(--usim-color-border);
    --usim-card-shadow: 0 2px 8px rgba(15, 23, 36, 0.1);
    --usim-card-shadow-hover: 0 8px 25px rgba(15, 23, 36, 0.15);
    --usim-card-shadow-elevated: 0 4px 20px rgba(15, 23, 36, 0.15);
    --usim-card-shadow-low: 0 1px 3px rgba(15, 23, 36, 0.12);
    --usim-card-shadow-medium: 0 2px 8px rgba(15, 23, 36, 0.15);
    --usim-card-shadow-high: 0 8px 30px rgba(15, 23, 36, 0.2);
    --usim-card-gradient-bg: linear-gradient(135deg, rgba(52, 152, 219, 0.95), rgba(23, 162, 184, 0.95));
    --usim-card-gradient-text: var(--usim-color-text-inverse);
    --usim-card-badge-bg: var(--usim-color-danger);
    --usim-card-badge-text: var(--usim-color-text-inverse);
    --usim-card-theme-primary: var(--usim-color-primary);
    --usim-card-theme-secondary: var(--usim-color-text-muted);
    --usim-card-theme-success: var(--usim-color-success);
    --usim-card-theme-warning: var(--usim-color-warning);
    --usim-card-theme-danger: var(--usim-color-danger);
    --usim-card-theme-info: var(--usim-color-info);

    /* Toast tokens */
    --usim-toast-bg: var(--usim-color-surface);
    --usim-toast-success-bg: rgba(46, 204, 113, 0.12);
    --usim-toast-info-bg: rgba(52, 152, 219, 0.12);
    --usim-toast-warning-bg: rgba(243, 156, 18, 0.14);
    --usim-toast-shadow: 0 4px 12px rgba(15, 23, 36, 0.15);
    --usim-toast-border-info: var(--usim-color-primary);
    --usim-toast-border-success: #27ae60;
    --usim-toast-border-error: var(--usim-color-danger);
    --usim-toast-border-warning: var(--usim-color-warning);

    /* Label semantic tokens */
    --usim-label-success-bg: rgba(46, 204, 113, 0.16);
    --usim-label-success-text: #1d6f44;
    --usim-label-success-border: rgba(46, 204, 113, 0.35);
    --usim-label-warning-bg: rgba(243, 156, 18, 0.18);
    --usim-label-warning-text: #8a5b12;
    --usim-label-warning-border: rgba(243, 156, 18, 0.35);
    --usim-label-error-bg: rgba(231, 76, 60, 0.16);
    --usim-label-error-text: #8f2e22;
    --usim-label-error-border: rgba(231, 76, 60, 0.35);
    --usim-label-info-bg: rgba(52, 152, 219, 0.16);
    --usim-label-info-text: #1f4f82;
    --usim-label-info-border: rgba(52, 152, 219, 0.34);

    /* Modal and error-screen tokens */
    --usim-modal-overlay-bg: rgba(0, 0, 0, 0.5);
    --usim-modal-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    --usim-error-screen-text: #721c24;
    --usim-error-screen-bg: #f8d7da;
    --usim-error-button-bg: #dc3545;
    --usim-error-button-text: #ffffff;
    --usim-error-button-bg-hover: #bb2d3b;
    --usim-error-button-shadow: 0 1px 3px rgba(15, 23, 36, 0.1), 0 1px 2px rgba(15, 23, 36, 0.06);

    /* Menu tokens */
    --usim-menu-bar-bg: var(--usim-color-surface);
    --usim-menu-bar-border: rgba(30, 41, 59, 0.08);
    --usim-menu-bar-shadow: 0 2px 10px rgba(15, 23, 36, 0.08);

    --usim-menu-trigger-bg: var(--usim-color-surface);
    --usim-menu-trigger-bg-hover: var(--usim-color-surface-hover);
    --usim-menu-trigger-bg-active: var(--usim-color-surface-muted);
    --usim-menu-trigger-border: var(--usim-color-border);
    --usim-menu-trigger-border-hover: var(--usim-color-border-strong);
    --usim-menu-trigger-border-active: var(--usim-color-border-strong);
    --usim-menu-trigger-text: var(--usim-color-text-strong);
    --usim-menu-trigger-shadow: 0 1px 4px rgba(15, 23, 36, 0.08);
    --usim-menu-trigger-shadow-hover: 0 4px 14px rgba(15, 23, 36, 0.14);
    --usim-menu-trigger-shadow-active: 0 2px 8px rgba(15, 23, 36, 0.12);
    --usim-menu-trigger-image-border: rgba(15, 23, 36, 0.16);
    --usim-menu-trigger-image-border-hover: rgba(15, 23, 36, 0.28);

    --usim-menu-dropdown-shadow: 0 10px 32px rgba(15, 23, 36, 0.18);
    --usim-menu-submenu-shadow: 0 8px 28px rgba(15, 23, 36, 0.2);
    --usim-menu-arrow-shadow: drop-shadow(0 -2px 4px rgba(15, 23, 36, 0.12));
    --usim-menu-item-hover-bg: rgba(52, 152, 219, 0.12);
    --usim-menu-item-active-bg: rgba(52, 152, 219, 0.2);
    --usim-menu-item-hover-text: var(--usim-color-text-strong);
    --usim-menu-accent: var(--usim-color-primary);
    --usim-menu-scrollbar-track: var(--usim-color-surface-muted);
    --usim-menu-scrollbar-thumb: var(--usim-color-border-strong);
    --usim-menu-scrollbar-thumb-hover: var(--usim-color-border);

    /* Table tokens */
    --usim-table-title-bg: linear-gradient(180deg, rgba(52, 152, 219, 0.12), rgba(52, 152, 219, 0.04));
    --usim-table-title-text: var(--usim-color-text-strong);
    --usim-table-title-border: var(--usim-color-border);
    --usim-table-title-accent: var(--usim-color-primary);
    --usim-table-title-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    --usim-table-wrapper-border: var(--usim-color-border);
    --usim-table-wrapper-shadow: 0 8px 20px rgba(15, 23, 36, 0.09);
    --usim-table-header-bg: linear-gradient(180deg, rgba(248, 249, 250, 0.95), rgba(237, 241, 247, 0.95));
    --usim-table-header-text: var(--usim-color-text-strong);
    --usim-table-header-border: var(--usim-color-border);
    --usim-table-header-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    --usim-table-header-sort-hover: rgba(52, 152, 219, 0.12);
    --usim-table-row-hover-bg: var(--usim-color-surface-muted);
    --usim-table-row-hover-shadow: 0 2px 4px rgba(15, 23, 36, 0.05);
    --usim-table-row-selected-bg: rgba(52, 152, 219, 0.14);
    --usim-table-row-primary-bg: rgba(52, 152, 219, 0.14);
    --usim-table-row-success-bg: rgba(46, 204, 113, 0.12);
    --usim-table-row-warning-bg: rgba(243, 156, 18, 0.14);
    --usim-table-row-danger-bg: rgba(231, 76, 60, 0.12);
    --usim-table-row-zebra-bg: #f9fbff;
    --usim-table-row-zebra-hover-bg: #eef3fa;

    --usim-pagination-bg: var(--usim-color-surface-muted);
    --usim-pagination-button-bg: var(--usim-color-surface);
    --usim-pagination-button-border: var(--usim-color-border);
    --usim-pagination-button-text: var(--usim-color-text);
    --usim-pagination-button-hover-bg: var(--usim-color-primary);
    --usim-pagination-button-hover-border: var(--usim-color-primary);
    --usim-pagination-button-hover-text: var(--usim-color-text-inverse);
    --usim-pagination-button-hover-shadow: 0 4px 10px rgba(52, 152, 219, 0.2);
    --usim-pagination-button-active-bg: var(--usim-color-primary);
    --usim-pagination-button-active-border: var(--usim-color-primary);
    --usim-pagination-button-active-text: var(--usim-color-text-inverse);
    --usim-pagination-button-active-shadow: 0 2px 8px rgba(52, 152, 219, 0.24);
    --usim-pagination-spinner-track: rgba(15, 23, 36, 0.12);
    --usim-pagination-spinner-indicator: var(--usim-color-primary);
}

html[data-theme="light"],
body[data-theme="light"] {
    --usim-theme-name: light;
    color-scheme: light;
}

html[data-theme="dark"],
body[data-theme="dark"] {
    --usim-theme-name: dark;
    color-scheme: dark;

    --usim-color-bg: #0f1724;
    --usim-color-surface: #162033;
    --usim-color-surface-muted: #1b263a;
    --usim-color-surface-hover: #24314a;
    --usim-color-border: #2f3f5f;
    --usim-color-border-strong: #3a4d72;
    --usim-color-text: #d7e0ef;
    --usim-color-text-strong: #eef3ff;
    --usim-color-text-muted: #99a9c2;
    --usim-color-text-inverse: #ffffff;

    --usim-shadow-soft: rgba(0, 0, 0, 0.35);
    --usim-shadow-medium: rgba(0, 0, 0, 0.45);
    --usim-container-bg: linear-gradient(180deg, rgba(23, 34, 54, 0.97), rgba(19, 28, 45, 0.97));
    --usim-container-border: rgba(143, 169, 205, 0.24);
    --usim-container-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
    --usim-container-shadow-hover: 0 14px 30px rgba(0, 0, 0, 0.34);
    --usim-container-title-border: rgba(143, 169, 205, 0.46);
    --usim-container-title-text: #f1f5ff;
    --usim-container-title-shadow: 0 1px 0 rgba(255, 255, 255, 0.03);
    --usim-tooltip-bg: #0b1220;
    --usim-tooltip-text: #e6edf9;
    --usim-tooltip-shadow: 0 8px 18px rgba(0, 0, 0, 0.4);

    --usim-menu-bar-bg: var(--usim-color-surface);
    --usim-menu-bar-border: rgba(143, 169, 205, 0.2);
    --usim-menu-bar-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);

    --usim-menu-trigger-bg: rgba(22, 32, 51, 0.96);
    --usim-menu-trigger-bg-hover: rgba(36, 49, 74, 0.98);
    --usim-menu-trigger-bg-active: rgba(27, 38, 58, 1);
    --usim-menu-trigger-border: rgba(143, 169, 205, 0.25);
    --usim-menu-trigger-border-hover: rgba(143, 169, 205, 0.4);
    --usim-menu-trigger-border-active: rgba(143, 169, 205, 0.5);
    --usim-menu-trigger-text: #f8fafc;
    --usim-menu-trigger-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    --usim-menu-trigger-shadow-hover: 0 6px 20px rgba(0, 0, 0, 0.3);
    --usim-menu-trigger-shadow-active: 0 3px 12px rgba(0, 0, 0, 0.32);
    --usim-menu-trigger-image-border: rgba(248, 250, 252, 0.35);
    --usim-menu-trigger-image-border-hover: rgba(248, 250, 252, 0.6);

    --usim-menu-dropdown-shadow: 0 12px 36px rgba(0, 0, 0, 0.38);
    --usim-menu-submenu-shadow: 0 8px 30px rgba(0, 0, 0, 0.42);
    --usim-menu-arrow-shadow: drop-shadow(0 -2px 6px rgba(0, 0, 0, 0.3));
    --usim-menu-item-hover-bg: rgba(143, 169, 205, 0.14);
    --usim-menu-item-active-bg: rgba(143, 169, 205, 0.2);
    --usim-menu-item-hover-text: #eef3ff;
    --usim-menu-accent: #8fa9cd;
    --usim-menu-scrollbar-track: rgba(27, 38, 58, 0.96);
    --usim-menu-scrollbar-thumb: rgba(143, 169, 205, 0.42);
    --usim-menu-scrollbar-thumb-hover: rgba(143, 169, 205, 0.58);

    --usim-table-title-bg: linear-gradient(180deg, rgba(143, 169, 205, 0.16), rgba(143, 169, 205, 0.06));
    --usim-table-title-text: #eef3ff;
    --usim-table-title-border: rgba(143, 169, 205, 0.24);
    --usim-table-title-accent: #8fa9cd;
    --usim-table-title-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --usim-table-wrapper-border: rgba(143, 169, 205, 0.2);
    --usim-table-wrapper-shadow: 0 10px 26px rgba(0, 0, 0, 0.26);
    --usim-table-header-bg: linear-gradient(180deg, rgba(30, 44, 67, 0.98), rgba(20, 30, 48, 0.98));
    --usim-table-header-text: #eef3ff;
    --usim-table-header-border: rgba(143, 169, 205, 0.25);
    --usim-table-header-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --usim-table-header-sort-hover: rgba(143, 169, 205, 0.14);
    --usim-table-row-hover-bg: rgba(27, 38, 58, 0.94);
    --usim-table-row-hover-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    --usim-table-row-selected-bg: rgba(143, 169, 205, 0.16);
    --usim-table-row-primary-bg: rgba(143, 169, 205, 0.16);
    --usim-table-row-success-bg: rgba(61, 214, 140, 0.14);
    --usim-table-row-warning-bg: rgba(243, 156, 18, 0.18);
    --usim-table-row-danger-bg: rgba(231, 76, 60, 0.16);
    --usim-table-row-zebra-bg: rgba(22, 32, 51, 0.9);
    --usim-table-row-zebra-hover-bg: rgba(36, 49, 74, 0.94);

    --usim-pagination-bg: rgba(22, 32, 51, 0.94);
    --usim-pagination-button-bg: rgba(27, 38, 58, 1);
    --usim-pagination-button-border: rgba(143, 169, 205, 0.22);
    --usim-pagination-button-text: #d7e0ef;
    --usim-pagination-button-hover-bg: #8fa9cd;
    --usim-pagination-button-hover-border: #8fa9cd;
    --usim-pagination-button-hover-text: #0f1724;
    --usim-pagination-button-hover-shadow: 0 6px 14px rgba(143, 169, 205, 0.3);
    --usim-pagination-button-active-bg: #8fa9cd;
    --usim-pagination-button-active-border: #8fa9cd;
    --usim-pagination-button-active-text: #0f1724;
    --usim-pagination-button-active-shadow: 0 4px 12px rgba(143, 169, 205, 0.34);
    --usim-pagination-spinner-track: rgba(215, 224, 239, 0.16);
    --usim-pagination-spinner-indicator: #8fa9cd;

    --usim-button-text: #f8fafc;
    --usim-button-shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.28);

    --usim-form-control-bg: rgba(22, 32, 51, 0.96);
    --usim-form-control-border: rgba(143, 169, 205, 0.24);
    --usim-form-control-text: #d7e0ef;
    --usim-form-control-disabled-bg: rgba(27, 38, 58, 0.9);
    --usim-form-control-focus-border: #8fa9cd;
    --usim-form-control-focus-ring: rgba(143, 169, 205, 0.18);
    --usim-form-control-error-border: #ff7a7a;
    --usim-form-control-error-ring: rgba(255, 122, 122, 0.22);
    --usim-form-checkbox-accent: #8fa9cd;

    --usim-card-bg: rgba(22, 32, 51, 0.96);
    --usim-card-border: rgba(143, 169, 205, 0.22);
    --usim-card-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    --usim-card-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.28);
    --usim-card-shadow-elevated: 0 6px 22px rgba(0, 0, 0, 0.3);
    --usim-card-shadow-low: 0 2px 6px rgba(0, 0, 0, 0.2);
    --usim-card-shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.24);
    --usim-card-shadow-high: 0 10px 32px rgba(0, 0, 0, 0.34);
    --usim-card-gradient-bg: linear-gradient(135deg, rgba(36, 49, 74, 0.98), rgba(22, 32, 51, 0.98));
    --usim-card-gradient-text: #eef3ff;
    --usim-card-badge-bg: #ff7a7a;
    --usim-card-badge-text: #0f1724;
    --usim-card-theme-primary: #8fa9cd;
    --usim-card-theme-secondary: #99a9c2;
    --usim-card-theme-success: #3dd68c;
    --usim-card-theme-warning: #f7b955;
    --usim-card-theme-danger: #ff7a7a;
    --usim-card-theme-info: #6fb8e8;

    --usim-toast-bg: rgba(22, 32, 51, 0.98);
    --usim-toast-success-bg: rgba(61, 214, 140, 0.2);
    --usim-toast-info-bg: rgba(143, 169, 205, 0.22);
    --usim-toast-warning-bg: rgba(247, 185, 85, 0.2);
    --usim-toast-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
    --usim-toast-border-info: #8fa9cd;
    --usim-toast-border-success: #3dd68c;
    --usim-toast-border-error: #ff7a7a;
    --usim-toast-border-warning: #f7b955;

    --usim-label-success-bg: rgba(61, 214, 140, 0.2);
    --usim-label-success-text: #9be6bf;
    --usim-label-success-border: rgba(61, 214, 140, 0.4);
    --usim-label-warning-bg: rgba(247, 185, 85, 0.2);
    --usim-label-warning-text: #fcd896;
    --usim-label-warning-border: rgba(247, 185, 85, 0.4);
    --usim-label-error-bg: rgba(255, 122, 122, 0.2);
    --usim-label-error-text: #ffc2c2;
    --usim-label-error-border: rgba(255, 122, 122, 0.4);
    --usim-label-info-bg: rgba(143, 169, 205, 0.2);
    --usim-label-info-text: #cfe0f5;
    --usim-label-info-border: rgba(143, 169, 205, 0.4);

    --usim-modal-overlay-bg: rgba(3, 7, 18, 0.62);
    --usim-modal-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
    --usim-error-screen-text: #ffc2c2;
    --usim-error-screen-bg: rgba(136, 34, 49, 0.28);
    --usim-error-button-bg: #ff7a7a;
    --usim-error-button-text: #0f1724;
    --usim-error-button-bg-hover: #ff6262;
    --usim-error-button-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}