:root,
html[data-ui="a"] {
    --ds-font: "Thmanyah Sans", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
    --ds-fs: 15px;
    --ds-fs-sm: 13px;
    --ds-fs-lg: 17px;

    --ds-bg: #f5f6f8;
    --ds-surface: #ffffff;
    --ds-surface-2: #f9fafb;
    --ds-surface-hover: #f2f4f7;
    --ds-ink: #152033;
    --ds-ink-2: #344054;
    --ds-muted: #667085;
    --ds-faint: #98a2b3;
    --ds-line: #e6e8ec;
    --ds-line-strong: #d0d5dd;
    --ds-row-line: #eef0f3;

    --ds-primary: #0a2559;
    --ds-primary-hover: #0d2c68;
    --ds-primary-soft: #eef2f9;
    --ds-primary-ink: #ffffff;
    --ds-accent: #f5620e;
    --ds-accent-hover: #dc560c;
    --ds-accent-soft: #fff0e6;
    --ds-link: #0a2559;

    --ds-success: #12805c;
    --ds-success-soft: #e6f5ef;
    --ds-warning: #b54708;
    --ds-warning-soft: #fef0e2;
    --ds-danger: #d92d20;
    --ds-danger-soft: #fdecea;
    --ds-info: #175cd3;
    --ds-info-soft: #e9f0fd;
    --ds-neutral-soft: #f0f2f5;

    --ds-side-w: 256px;
    --ds-side-bg: #ffffff;
    --ds-side-ink: #344054;
    --ds-side-strong: #0a2559;
    --ds-side-muted: #98a2b3;
    --ds-side-border: 1px solid #e6e8ec;
    --ds-side-hover: #f5f6f8;
    --ds-nav-r: 10px;
    --ds-nav-pad: 10px 12px;
    --ds-nav-active-bg: #eef2f9;
    --ds-nav-active-ink: #0a2559;
    --ds-nav-active-icon: #f5620e;
    --ds-nav-active-bar: none;

    --ds-header-bg: #ffffff;
    --ds-header-border: 1px solid #e6e8ec;

    --ds-r-sm: 8px;
    --ds-r: 12px;
    --ds-r-lg: 14px;
    --ds-r-input: 10px;
    --ds-r-btn: 10px;
    --ds-r-badge: 8px;
    --ds-r-check: 6px;
    --ds-r-pill: 999px;
    --ds-r-modal: 16px;

    --ds-h-input: 44px;
    --ds-h-btn: 44px;
    --ds-h-btn-sm: 34px;
    --ds-gap: 20px;
    --ds-card-pad: 20px;

    --ds-input-bg: #ffffff;
    --ds-input-border: #d0d5dd;
    --ds-input-bw: 1px;
    --ds-focus: #0a2559;
    --ds-focus-ring: 0 0 0 4px rgba(10, 37, 89, .10);
    --ds-input-focus-bg: #ffffff;
    --ds-error-bg: #ffffff;
    --ds-disabled-bg: #f2f4f7;

    --ds-btn-primary-bg: #0a2559;
    --ds-btn-primary-hover: #0d2c68;
    --ds-btn-primary-ink: #ffffff;
    --ds-btn-secondary-bg: #f5620e;
    --ds-btn-secondary-hover: #dc560c;
    --ds-btn-secondary-ink: #ffffff;

    --ds-card-border: 1px solid #e6e8ec;
    --ds-card-divider: 1px solid #eef0f3;
    --ds-th-bg: #f9fafb;
    --ds-th-ink: #667085;
    --ds-cell-py: 13px;
    --ds-cell-px: 16px;
    --ds-zebra: transparent;

    --ds-seg-bg: #ffffff;
    --ds-seg-border: 1px solid #e6e8ec;
    --ds-seg-pad: 4px;
    --ds-seg-on-bg: #0a2559;
    --ds-seg-on-ink: #ffffff;
    --ds-seg-on-bar: none;

    --ds-badge-dot: inline-block;
    --ds-overlay: rgba(16, 24, 40, .45);
    --ds-pop-shadow: 0 8px 24px rgba(16, 24, 40, .08);
    --ds-modal-shadow: 0 20px 40px rgba(16, 24, 40, .18);
    --ds-modal-foot-bg: #f9fafb;
    --ds-dd-hl-bg: #eef2f9;
    --ds-dd-hl-ink: #0a2559;
    --ds-toast-bg: #ffffff;
    --ds-toast-ink: #152033;
    --ds-toast-border: 1px solid #e6e8ec;

    --ds-layout: side;
}

html[data-ui="b"] {
    --ds-fs: 15.5px;

    --ds-bg: #eef1f6;
    --ds-surface: #ffffff;
    --ds-surface-2: #f6f8fb;
    --ds-surface-hover: #eef1f6;
    --ds-ink: #131b2e;
    --ds-ink-2: #313b52;
    --ds-muted: #5f6b80;
    --ds-faint: #97a1b3;
    --ds-line: #e3e7ee;
    --ds-line-strong: #c7cedb;
    --ds-row-line: #eef1f6;

    --ds-primary-soft: #fff0e6;
    --ds-link: #0a2559;

    --ds-success: #0f7a55;
    --ds-success-soft: #def5ea;
    --ds-warning: #b54a00;
    --ds-warning-soft: #ffedd9;
    --ds-danger: #cc2b2b;
    --ds-danger-soft: #fde6e6;
    --ds-info: #1c56c7;
    --ds-info-soft: #e3ecfd;
    --ds-neutral-soft: #eceff4;

    --ds-side-bg: #0a2559;
    --ds-side-ink: #c9d3e6;
    --ds-side-strong: #ffffff;
    --ds-side-muted: #8193b8;
    --ds-side-border: none;
    --ds-side-hover: rgba(255, 255, 255, .06);
    --ds-nav-r: 14px;
    --ds-nav-pad: 11px 14px;
    --ds-nav-active-bg: #f5620e;
    --ds-nav-active-ink: #ffffff;
    --ds-nav-active-icon: #ffffff;

    --ds-header-bg: #eef1f6;
    --ds-header-border: none;

    --ds-r-sm: 12px;
    --ds-r: 18px;
    --ds-r-lg: 20px;
    --ds-r-input: 14px;
    --ds-r-btn: 999px;
    --ds-r-badge: 999px;
    --ds-r-check: 7px;
    --ds-r-modal: 24px;

    --ds-h-input: 50px;
    --ds-h-btn: 48px;
    --ds-h-btn-sm: 36px;
    --ds-gap: 22px;
    --ds-card-pad: 22px;

    --ds-input-bg: #f2f4f8;
    --ds-input-border: transparent;
    --ds-input-bw: 2px;
    --ds-focus-ring: none;
    --ds-error-bg: #fff7f7;
    --ds-disabled-bg: #eceff4;

    --ds-btn-primary-bg: #f5620e;
    --ds-btn-primary-hover: #dc560c;
    --ds-btn-secondary-bg: #0a2559;
    --ds-btn-secondary-hover: #0d2c68;

    --ds-card-border: none;
    --ds-card-divider: 1px solid #f0f2f6;
    --ds-th-bg: #ffffff;
    --ds-th-ink: #5f6b80;
    --ds-cell-py: 15px;
    --ds-cell-px: 18px;

    --ds-seg-border: none;
    --ds-seg-pad: 5px;

    --ds-badge-dot: none;
    --ds-overlay: rgba(10, 37, 89, .35);
    --ds-pop-shadow: 0 10px 28px rgba(10, 37, 89, .12);
    --ds-modal-shadow: 0 24px 48px rgba(10, 37, 89, .18);
    --ds-modal-foot-bg: #ffffff;
    --ds-dd-hl-bg: #fff0e6;
    --ds-dd-hl-ink: #b54a00;
    --ds-toast-bg: #0a2559;
    --ds-toast-ink: #ffffff;
    --ds-toast-border: none;
}

html[data-ui="c"] {
    --ds-fs: 14px;
    --ds-fs-sm: 12.5px;

    --ds-bg: #eceef1;
    --ds-surface-2: #f6f7f9;
    --ds-surface-hover: #f1f3f6;
    --ds-ink: #1d2433;
    --ds-ink-2: #3b4453;
    --ds-muted: #5d6675;
    --ds-faint: #9199a6;
    --ds-line: #d5d9e0;
    --ds-line-strong: #b9c0cb;
    --ds-row-line: #e4e7ec;

    --ds-primary-soft: #e6ebf4;
    --ds-link: #1e4284;

    --ds-success: #137a4a;
    --ds-success-soft: #e2f3ea;
    --ds-warning: #a65800;
    --ds-warning-soft: #fcefdc;
    --ds-danger: #c42b1c;
    --ds-danger-soft: #fbe7e5;
    --ds-info: #1e4db7;
    --ds-info-soft: #e5ecfa;
    --ds-neutral-soft: #e9ecf0;

    --ds-side-w: 232px;
    --ds-side-bg: #122033;
    --ds-side-ink: #c3cad6;
    --ds-side-strong: #ffffff;
    --ds-side-muted: #7f8a9d;
    --ds-side-border: none;
    --ds-side-hover: rgba(255, 255, 255, .06);
    --ds-nav-r: 4px;
    --ds-nav-pad: 8px 10px;
    --ds-nav-active-bg: rgba(255, 255, 255, .08);
    --ds-nav-active-ink: #ffffff;
    --ds-nav-active-icon: #f5620e;
    --ds-nav-active-bar: inset -3px 0 0 #f5620e;

    --ds-header-border: 1px solid #d5d9e0;

    --ds-r-sm: 4px;
    --ds-r: 6px;
    --ds-r-lg: 6px;
    --ds-r-input: 4px;
    --ds-r-btn: 4px;
    --ds-r-badge: 3px;
    --ds-r-check: 3px;
    --ds-r-pill: 4px;
    --ds-r-modal: 8px;

    --ds-h-input: 36px;
    --ds-h-btn: 36px;
    --ds-h-btn-sm: 30px;
    --ds-gap: 14px;
    --ds-card-pad: 16px;

    --ds-input-border: #b9c0cb;
    --ds-focus: #1e4284;
    --ds-focus-ring: 0 0 0 2px rgba(30, 66, 132, .25);
    --ds-error-bg: #fffafa;
    --ds-disabled-bg: #f1f3f6;

    --ds-card-border: 1px solid #d5d9e0;
    --ds-card-divider: 1px solid #d5d9e0;
    --ds-th-bg: #f1f3f6;
    --ds-th-ink: #3b4453;
    --ds-cell-py: 8px;
    --ds-cell-px: 12px;
    --ds-zebra: #fafbfc;

    --ds-seg-border: 1px solid #b9c0cb;
    --ds-seg-pad: 0;
    --ds-seg-on-bg: #1e4284;

    --ds-badge-dot: none;
    --ds-overlay: rgba(18, 32, 51, .55);
    --ds-pop-shadow: 0 4px 12px rgba(0, 0, 0, .10);
    --ds-modal-shadow: 0 8px 24px rgba(0, 0, 0, .20);
    --ds-modal-foot-bg: #f1f3f6;
    --ds-dd-hl-bg: #1e4284;
    --ds-dd-hl-ink: #ffffff;
    --ds-toast-border: 1px solid #b9c0cb;
}

html[data-ui="d"] {
    --ds-bg: #faf8f4;
    --ds-surface-2: #faf8f4;
    --ds-surface-hover: #f5f1ea;
    --ds-ink: #1f1b16;
    --ds-ink-2: #3d362d;
    --ds-muted: #6f675c;
    --ds-faint: #a39a8d;
    --ds-line: #ece5da;
    --ds-line-strong: #d8cebf;
    --ds-row-line: #f1ebe2;

    --ds-primary-soft: #fdeee4;
    --ds-link: #c2410c;

    --ds-success: #15803d;
    --ds-success-soft: #e7f5ea;
    --ds-warning: #b45309;
    --ds-warning-soft: #fdf1dd;
    --ds-danger: #c2261b;
    --ds-danger-soft: #fdebe8;
    --ds-info: #1d4ed8;
    --ds-info-soft: #e8eefc;
    --ds-neutral-soft: #f1ece4;

    --ds-header-border: 1px solid #ece5da;

    --ds-r-sm: 8px;
    --ds-r: 12px;
    --ds-r-lg: 12px;
    --ds-r-input: 8px;
    --ds-r-btn: 8px;
    --ds-r-badge: 6px;
    --ds-r-check: 5px;
    --ds-r-modal: 14px;

    --ds-input-border: #d8cebf;
    --ds-focus: #f5620e;
    --ds-focus-ring: 0 0 0 4px rgba(245, 98, 14, .12);
    --ds-disabled-bg: #f5f1ea;

    --ds-btn-primary-bg: #f5620e;
    --ds-btn-primary-hover: #dc560c;
    --ds-btn-secondary-bg: #0a2559;
    --ds-btn-secondary-hover: #0d2c68;

    --ds-card-border: 1px solid #ece5da;
    --ds-card-divider: 1px solid #f1ebe2;
    --ds-th-bg: #faf8f4;
    --ds-th-ink: #6f675c;

    --ds-seg-bg: transparent;
    --ds-seg-border: none;
    --ds-seg-pad: 0;
    --ds-seg-on-bg: transparent;
    --ds-seg-on-ink: #c2410c;
    --ds-seg-on-bar: inset 0 -2px 0 #f5620e;

    --ds-overlay: rgba(31, 27, 22, .40);
    --ds-pop-shadow: 0 8px 22px rgba(31, 27, 22, .08);
    --ds-modal-shadow: 0 18px 40px rgba(31, 27, 22, .18);
    --ds-modal-foot-bg: #faf8f4;
    --ds-dd-hl-bg: #fdeee4;
    --ds-dd-hl-ink: #c2410c;
    --ds-toast-border: 1px solid #ece5da;

    --ds-layout: top;
}

html[data-ui] {
    --t-font: var(--ds-font);
    --t-bg: var(--ds-bg);
    --t-surface: var(--ds-surface);
    --t-ink: var(--ds-ink);
    --t-ink-2: var(--ds-ink-2);
    --t-ink-3: var(--ds-muted);
    --t-line: var(--ds-line);
    --t-line-2: var(--ds-line-strong);
    --t-navy: var(--ds-primary);
    --t-navy-2: var(--ds-primary-hover);
    --t-navy-3: var(--ds-link);
    --t-brand: var(--ds-accent);
    --t-brand-600: var(--ds-accent-hover);
    --t-brand-700: var(--ds-accent-hover);
    --t-brand-050: var(--ds-accent-soft);
    --t-success: var(--ds-success);
    --t-success-050: var(--ds-success-soft);
    --t-warning: var(--ds-warning);
    --t-warning-050: var(--ds-warning-soft);
    --t-danger: var(--ds-danger);
    --t-danger-050: var(--ds-danger-soft);
    --t-info: var(--ds-info);
    --t-info-050: var(--ds-info-soft);
    --t-radius-sm: var(--ds-r-sm);
    --t-radius: var(--ds-r);
    --t-radius-lg: var(--ds-r-lg);
}

html[data-ui] {
    --ds-fs: 15px;
    --ds-fs-sm: 13.5px;
    --ds-fs-lg: 17px;
    --ds-fs-title: 24px;
    --ds-fs-card-title: 16.5px;
    --ds-fs-label: 14px;

    --ds-h-input: 44px;
    --ds-h-btn: 44px;
    --ds-h-btn-sm: 36px;
    --ds-gap: 20px;
    --ds-card-pad: 20px;
    --ds-field-gap: 18px;

    --ds-side-w: 272px;
    --ds-nav-pad: 11px 14px;
    --ds-nav-fs: 15px;
    --ds-nav-icon: 17px;

    --ds-input-bg: #ffffff;
    --ds-input-bw: 1px;

    --ds-th-bg: #0a2559;
    --ds-th-ink: #ffffff;
    --ds-th-fs: 14px;
    --ds-cell-py: 13px;
    --ds-cell-px: 16px;
    --ds-zebra: #f6f8fb;
    --ds-row-hover: #fff3ea;
    --ds-row-line: #e4e8ef;
    --ds-table-fs: 15px;
}

html[data-ui="a"] {
    --ds-input-border: #cdd3dc;
}

html[data-ui="b"] {
    --ds-r-btn: 12px;
    --ds-r-input: 12px;
    --ds-r-badge: 8px;
    --ds-r: 16px;
    --ds-r-lg: 16px;
    --ds-input-border: #cdd3dc;
    --ds-focus: #f5620e;
    --ds-focus-ring: 0 0 0 4px rgba(245, 98, 14, .12);
    --ds-card-border: 1px solid #e3e7ee;
    --ds-header-bg: #ffffff;
    --ds-header-border: 1px solid #e3e7ee;
}

html[data-ui="c"] {
    --ds-fs: 14.5px;
    --ds-fs-sm: 13px;
    --ds-fs-title: 22px;
    --ds-h-input: 40px;
    --ds-h-btn: 40px;
    --ds-h-btn-sm: 34px;
    --ds-gap: 16px;
    --ds-card-pad: 16px;
    --ds-field-gap: 14px;
    --ds-side-w: 256px;
    --ds-nav-pad: 10px 12px;
    --ds-nav-fs: 14.5px;
    --ds-th-bg: #1b2a40;
    --ds-cell-py: 10px;
    --ds-cell-px: 12px;
    --ds-table-fs: 14.5px;
    --ds-input-border: #b9c0cb;
}

html[data-ui="d"] {
    --ds-zebra: #fbf8f3;
    --ds-row-line: #ece5da;
}