/* ==========================================================================
   Valeron Design System
   Font: Inter Variable
   ========================================================================== */

/* --------------------------------------------------------------------------
   Spacing Tokens
   xs: 4px   — Tight gaps (icon to label, badge padding)
   sm: 8px   — Between related items
   md: 12px  — Between elements inside a card
   lg: 16px  — Component internal spacing
   xl: 24px  — Card padding, between cards
   2xl: 40px — Page sections, major gaps
   -------------------------------------------------------------------------- */

.ds-gap-xs { gap: 4px; }
.ds-gap-sm { gap: 8px; }
.ds-gap-md { gap: 12px; }
.ds-gap-lg { gap: 16px; }
.ds-gap-xl { gap: 24px; }
.ds-gap-2xl { gap: 40px; }

.ds-p-xs { padding: 4px; }
.ds-p-sm { padding: 8px; }
.ds-p-md { padding: 12px; }
.ds-p-lg { padding: 16px; }
.ds-p-xl { padding: 24px; }
.ds-p-2xl { padding: 40px; }

.ds-m-xs { margin: 4px; }
.ds-m-sm { margin: 8px; }
.ds-m-md { margin: 12px; }
.ds-m-lg { margin: 16px; }
.ds-m-xl { margin: 24px; }
.ds-m-2xl { margin: 40px; }

/* --------------------------------------------------------------------------
   Color Palette — Neutrals
   -------------------------------------------------------------------------- */

.ds-neutral-50  { color: #F0F1F3; }
.ds-neutral-100 { color: #D8D9DD; }
.ds-neutral-200 { color: #B6B8BD; }
.ds-neutral-300 { color: #8F9099; }
.ds-neutral-400 { color: #6B6D75; }
.ds-neutral-500 { color: #4D4F55; }
.ds-neutral-600 { color: #33353A; }
.ds-neutral-700 { color: #252629; }
.ds-neutral-800 { color: #1A1B1E; }
.ds-neutral-900 { color: #111214; }
.ds-neutral-950 { color: #090909; }

.ds-bg-neutral-50  { background-color: #F0F1F3; }
.ds-bg-neutral-100 { background-color: #D8D9DD; }
.ds-bg-neutral-200 { background-color: #B6B8BD; }
.ds-bg-neutral-300 { background-color: #8F9099; }
.ds-bg-neutral-400 { background-color: #6B6D75; }
.ds-bg-neutral-500 { background-color: #4D4F55; }
.ds-bg-neutral-600 { background-color: #33353A; }
.ds-bg-neutral-700 { background-color: #252629; }
.ds-bg-neutral-800 { background-color: #1A1B1E; }
.ds-bg-neutral-900 { background-color: #111214; }
.ds-bg-neutral-950 { background-color: #090909; }

/* --------------------------------------------------------------------------
   Color Palette — Accent
   -------------------------------------------------------------------------- */

.ds-accent-50  { color: #EEF0FF; }
.ds-accent-100 { color: #D4D9FF; }
.ds-accent-200 { color: #ABB6FE; }
.ds-accent-300 { color: #8498FE; }
.ds-accent-400 { color: #5A7BFE; }
.ds-accent-500 { color: #155EFD; }
.ds-accent-600 { color: #0850DE; }
.ds-accent-700 { color: #053EB1; }
.ds-accent-800 { color: #022B81; }
.ds-accent-900 { color: #011750; }
.ds-accent-950 { color: #000D36; }

.ds-bg-accent-50  { background-color: #EEF0FF; }
.ds-bg-accent-100 { background-color: #D4D9FF; }
.ds-bg-accent-200 { background-color: #ABB6FE; }
.ds-bg-accent-300 { background-color: #8498FE; }
.ds-bg-accent-400 { background-color: #5A7BFE; }
.ds-bg-accent-500 { background-color: #155EFD; }
.ds-bg-accent-600 { background-color: #0850DE; }
.ds-bg-accent-700 { background-color: #053EB1; }
.ds-bg-accent-800 { background-color: #022B81; }
.ds-bg-accent-900 { background-color: #011750; }
.ds-bg-accent-950 { background-color: #000D36; }

/* --------------------------------------------------------------------------
   Color Palette — Semantic
   -------------------------------------------------------------------------- */

.ds-success-300 { color: #34D058; }
.ds-success-800 { color: #0E1F14; }
.ds-bg-success-300 { background-color: #34D058; }
.ds-bg-success-800 { background-color: #0E1F14; }

.ds-error-300 { color: #FF6B6B; }
.ds-error-800 { color: #2A1215; }
.ds-bg-error-300 { background-color: #FF6B6B; }
.ds-bg-error-800 { background-color: #2A1215; }

.ds-warning-300 { color: #F0A030; }
.ds-warning-800 { color: #261A0E; }
.ds-bg-warning-300 { background-color: #F0A030; }
.ds-bg-warning-800 { background-color: #261A0E; }

.ds-info-300 { color: #00C8DC; }
.ds-info-800 { color: #0E1926; }
.ds-bg-info-300 { background-color: #00C8DC; }
.ds-bg-info-800 { background-color: #0E1926; }

/* --------------------------------------------------------------------------
   Border Radius
   -------------------------------------------------------------------------- */

.ds-radius-sm { border-radius: 6px; }
.ds-radius-md { border-radius: 10px; }
.ds-radius-lg { border-radius: 16px; }
.ds-radius-full { border-radius: 9999px; }

/* --------------------------------------------------------------------------
   Stroke / Borders
   -------------------------------------------------------------------------- */

.ds-stroke { border: 1px solid rgba(255, 255, 255, 0.1); }
.ds-stroke-accent { border: 1px solid rgba(66, 84, 196, 0.4); }

/* --------------------------------------------------------------------------
   Typography — Headings
   -------------------------------------------------------------------------- */

.ds-h1 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 60px;
  line-height: 72px;
}

.ds-h2 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 48px;
  line-height: 56px;
}

.ds-h3 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 40px;
  line-height: 48px;
}

.ds-h4 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 32px;
  line-height: 40px;
}

.ds-h5 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 24px;
  line-height: 28px;
}

.ds-h6 {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
}

/* --------------------------------------------------------------------------
   Typography — Body Large (20/24)
   -------------------------------------------------------------------------- */

.ds-body-lg {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
}

.ds-body-lg-link {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 24px;
  text-decoration-line: underline;
}

.ds-body-lg-semibold {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
}

.ds-body-lg-medium {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
}

/* --------------------------------------------------------------------------
   Typography — Body Medium (16/20)
   -------------------------------------------------------------------------- */

.ds-body-md {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}

.ds-body-md-link {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  text-decoration-line: underline;
}

.ds-body-md-semibold {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 16px;
  line-height: 20px;
}

.ds-body-md-medium {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
}

/* --------------------------------------------------------------------------
   Typography — Body Small (14/16)
   -------------------------------------------------------------------------- */

.ds-body-sm {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
}

.ds-body-sm-link {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  text-decoration-line: underline;
}

.ds-body-sm-semibold {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
}

.ds-body-sm-medium {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
}

/* --------------------------------------------------------------------------
   Typography — Body Extra Small (12/16)
   -------------------------------------------------------------------------- */

.ds-body-xsm {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
}

.ds-body-xsm-link {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  text-decoration-line: underline;
}

.ds-body-xsm-semibold {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
}

.ds-body-xsm-medium {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

/* --------------------------------------------------------------------------
   Buttons
   Sizes: xs (8px 16px), sm (8px 16px), md (12px 24px), lg (16px 32px)
   Variants: primary, secondary, ghost, success, error, warning, icon
   States: default, hover, focus, disabled
   -------------------------------------------------------------------------- */

.ds-btn {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: background-color 0.15s;
  box-sizing: border-box;
}

.ds-btn:disabled {
  cursor: not-allowed;
}

/* --- Sizes --- */

.ds-btn-xs {
  padding: 8px 16px;
  font-size: 12px;
  line-height: 16px;
  border-radius: 10px;
}

.ds-btn-sm {
  padding: 8px 16px;
  font-size: 14px;
  line-height: 16px;
  border-radius: 10px;
}

.ds-btn-md {
  padding: 12px 24px;
  font-size: 16px;
  line-height: 20px;
  border-radius: 10px;
}

.ds-btn-lg {
  padding: 16px 32px;
  font-size: 16px;
  line-height: 20px;
  border-radius: 10px;
}

/* --- Primary --- */

.ds-btn-primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #155EFD;
  box-shadow: 0px 1px 2px rgba(14, 18, 27, 0.24), 0px 0px 0px 1px #3473FD;
  border-radius: 8px;
  color: #FFFFFF;
}

.ds-btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.1104) 100%), #0850DE;
}

.ds-btn-primary:focus:not(:disabled) {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #0850DE;
}

.ds-btn-primary:disabled {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 100%), #155EFD;
  box-shadow: none;
  color: #5A7BFE;
}

/* --- Secondary --- */

.ds-btn-secondary {
  background: #111214;
  border: 1px solid #252629;
  box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.06), inset 0px 1px 2px rgba(255, 255, 255, 0.04);
  color: #FFFFFF;
}

.ds-btn-secondary:hover:not(:disabled) {
  background: #1A1B1E;
}

.ds-btn-secondary:focus:not(:disabled) {
  background: #1A1B1E;
}

.ds-btn-secondary:disabled {
  background: #111214;
  box-shadow: none;
  color: #4D4F55;
}

/* --- Ghost --- */

.ds-btn-ghost {
  background: transparent;
  color: #FFFFFF;
}

.ds-btn-ghost:hover:not(:disabled) {
  background: #1A1B1E;
}

.ds-btn-ghost:focus:not(:disabled) {
  background: #1A1B1E;
}

.ds-btn-ghost:disabled {
  background: #1A1B1E;
  color: #4D4F55;
}

/* --- Success --- */

.ds-btn-success {
  background: #0E1F14;
  box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.06), inset 0px 1px 2px rgba(255, 255, 255, 0.04);
  color: #26A544;
}

.ds-btn-success:hover:not(:disabled) {
  background: #0E2A17;
}

.ds-btn-success:focus:not(:disabled) {
  background: #0E2A17;
}

.ds-btn-success:disabled {
  color: #0E3A1B;
}

/* --- Error --- */

.ds-btn-error {
  background: #2A1215;
  box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.06), inset 0px 1px 2px rgba(255, 255, 255, 0.04);
  color: #F34E52;
}

.ds-btn-error:hover:not(:disabled) {
  background: #4C1618;
}

.ds-btn-error:focus:not(:disabled) {
  background: #4C1618;
}

.ds-btn-error:disabled {
  color: #6E1A1A;
}

/* --- Warning --- */

.ds-btn-warning {
  background: #261A0E;
  box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.06), inset 0px 1px 2px rgba(255, 255, 255, 0.04);
  color: #D48A1A;
}

.ds-btn-warning:hover:not(:disabled) {
  background: #3A260E;
}

.ds-btn-warning:focus:not(:disabled) {
  background: #3A260E;
}

.ds-btn-warning:disabled {
  color: #4D310E;
}

/* --- Icon button --- */

.ds-btn-icon {
  background: #252629;
  box-shadow: inset 0px 0px 6px rgba(255, 255, 255, 0.06), inset 0px 1px 2px rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  color: #FFFFFF;
  gap: 0;
}

.ds-btn-icon.ds-btn-xs { padding: 8px; width: 28px; height: 28px; }
.ds-btn-icon.ds-btn-sm { padding: 8px; width: 30px; height: 30px; }
.ds-btn-icon.ds-btn-md { padding: 12px; width: 40px; height: 40px; }
.ds-btn-icon.ds-btn-lg { padding: 16px; width: 52px; height: 52px; }

.ds-btn-icon:hover:not(:disabled) {
  background: #1A1B1E;
}

.ds-btn-icon:disabled {
  background: #1A1B1E;
  color: #252629;
}

/* --------------------------------------------------------------------------
   Inputs
   States: default, focus, error, disabled
   -------------------------------------------------------------------------- */

.ds-input {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #B6B8BD;
  background: #111214;
  border: 1px solid #252629;
  border-radius: 8px;
  padding: 12px;
  outline: none;
  width: 100%;
  transition: border-color 0.15s;
}

.ds-input::placeholder {
  color: #B6B8BD;
}

.ds-input:focus {
  border-color: #6B6D75;
}

.ds-input-error,
.ds-input.error {
  border-color: #D43A3A;
}

.ds-input:disabled {
  background: #252629;
  border-color: #33353A;
  color: #33353A;
  cursor: not-allowed;
}

.ds-input:disabled::placeholder {
  color: #33353A;
}

/* --------------------------------------------------------------------------
   Input OTP
   -------------------------------------------------------------------------- */

.ds-input-otp-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #252629;
  border-radius: 12px;
  overflow: hidden;
}

.ds-input-otp-group.error {
  border-color: #F34E52;
}

.ds-input-otp {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #4D4F55;
  background: transparent;
  border: none;
  border-left: 1px solid #252629;
  width: 60px;
  min-width: 60px;
  height: 60px;
  text-align: center;
  outline: none;
}

.ds-input-otp:first-child {
  border-left: none;
}

.ds-input-otp-group.error .ds-input-otp {
  border-left-color: #F34E52;
}

.ds-input-otp-group.error .ds-input-otp:first-child {
  border-left: none;
}

/* Compact OTP variant */
.ds-input-otp-group.compact .ds-input-otp {
  width: 40px;
  min-width: 40px;
  height: 40px;
  background: #33353A;
}

/* --------------------------------------------------------------------------
   Select / Dropdown
   -------------------------------------------------------------------------- */

.ds-select {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  color: #B6B8BD;
  background: #1A1B1E;
  border: 1px solid #252629;
  border-radius: 8px;
  padding: 12px;
  padding-right: 36px;
  outline: none;
  width: 100%;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%23B6B8BD' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color 0.15s;
}

.ds-select:hover {
  border-color: #33353A;
}

.ds-select:disabled {
  color: #252629;
  cursor: not-allowed;
}

/* Dropdown menu */
.ds-dropdown-menu {
  background: #1A1B1E;
  border: 1px solid #252629;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-dropdown-item {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #F0F1F3;
  padding: 12px 8px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.1s;
}

.ds-dropdown-item:hover,
.ds-dropdown-item.active {
  background: #252629;
}

/* --------------------------------------------------------------------------
   Checkbox
   -------------------------------------------------------------------------- */

.ds-checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.ds-checkbox:checked {
  background-color: #4254C4;
  border-color: #4254C4;
}

.ds-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid #FFFFFF;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.ds-checkbox:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ds-checkbox-error {
  border-color: #F87171;
}

/* --------------------------------------------------------------------------
   Radio
   -------------------------------------------------------------------------- */

.ds-radio {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  background-color: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.ds-radio:checked {
  border-color: #4254C4;
}

.ds-radio:checked::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #4254C4;
}

.ds-radio:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ds-radio-error {
  border-color: #F87171;
}

/* --------------------------------------------------------------------------
   Toggle / Switch
   -------------------------------------------------------------------------- */

.ds-toggle {
  position: relative;
  width: 40px;
  height: 22px;
  background-color: #3A3A3A;
  border-radius: 11px;
  cursor: pointer;
  transition: background-color 0.2s;
  border: none;
  padding: 0;
}

.ds-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background-color: #FFFFFF;
  transition: transform 0.2s;
}

.ds-toggle.active {
  background-color: #4254C4;
}

.ds-toggle.active::after {
  transform: translateX(18px);
}

.ds-toggle-error {
  background-color: #7F1D1D;
}

.ds-toggle:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Toast / Notification
   -------------------------------------------------------------------------- */

.ds-toast {
  font-family: 'Inter', sans-serif;
  background-color: #1E1E1E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 280px;
}

.ds-toast-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

.ds-toast-message {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #9E9E9E;
}

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.ds-card {
  background-color: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
}

.ds-card-nested {
  background-color: #1E1E1E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 20px;
}

.ds-card-promo {
  background-color: #1E1E1E;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 24px;
}

/* --------------------------------------------------------------------------
   Badge
   -------------------------------------------------------------------------- */

.ds-badge {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  padding: 4px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}

.ds-badge-accent {
  background-color: rgba(66, 84, 196, 0.2);
  color: #9CA7F5;
}

.ds-badge-success {
  background-color: rgba(74, 222, 128, 0.15);
  color: #4ADE80;
}

.ds-badge-error {
  background-color: rgba(248, 113, 113, 0.15);
  color: #F87171;
}

.ds-badge-warning {
  background-color: rgba(251, 191, 36, 0.15);
  color: #FBBF24;
}

.ds-badge-info {
  background-color: rgba(34, 211, 238, 0.15);
  color: #22D3EE;
}

/* --------------------------------------------------------------------------
   Table
   -------------------------------------------------------------------------- */

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
}

.ds-table th {
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #5C5C5C;
  text-align: left;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ds-table td {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #C4C4C4;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ds-table tr:hover td {
  background-color: rgba(255, 255, 255, 0.02);
}

/* --------------------------------------------------------------------------
   Dialog / Modal
   -------------------------------------------------------------------------- */

.ds-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.ds-dialog {
  background-color: #141414;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 32px;
  min-width: 360px;
  max-width: 480px;
  text-align: center;
}

.ds-dialog-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  color: #FFFFFF;
  margin-bottom: 8px;
}

.ds-dialog-message {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #9E9E9E;
  margin-bottom: 24px;
}

/* --------------------------------------------------------------------------
   Label
   -------------------------------------------------------------------------- */

.ds-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  color: #5C5C5C;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ==========================================================================
   Light Mode Overrides
   Applied when <html> does NOT have the 'dark' class
   ========================================================================== */

/* --- Typography colors --- */
html:not(.dark) .ds-h1,
html:not(.dark) .ds-h2,
html:not(.dark) .ds-h3,
html:not(.dark) .ds-h4,
html:not(.dark) .ds-h5,
html:not(.dark) .ds-h6 { color: #111214; }

html:not(.dark) .ds-body-lg,
html:not(.dark) .ds-body-lg-link,
html:not(.dark) .ds-body-lg-semibold,
html:not(.dark) .ds-body-lg-medium,
html:not(.dark) .ds-body-md,
html:not(.dark) .ds-body-md-link,
html:not(.dark) .ds-body-md-semibold,
html:not(.dark) .ds-body-md-medium,
html:not(.dark) .ds-body-sm,
html:not(.dark) .ds-body-sm-link,
html:not(.dark) .ds-body-sm-semibold,
html:not(.dark) .ds-body-sm-medium,
html:not(.dark) .ds-body-xsm,
html:not(.dark) .ds-body-xsm-link,
html:not(.dark) .ds-body-xsm-semibold,
html:not(.dark) .ds-body-xsm-medium { color: #111214; }

/* --- Neutral color utilities --- */
html:not(.dark) .ds-neutral-50  { color: #111214; }
html:not(.dark) .ds-neutral-100 { color: #1A1B1E; }
html:not(.dark) .ds-neutral-200 { color: #33353A; }
html:not(.dark) .ds-neutral-300 { color: #4D4F55; }
html:not(.dark) .ds-neutral-400 { color: #6B6D75; }
html:not(.dark) .ds-neutral-500 { color: #9E9E9E; }
html:not(.dark) .ds-neutral-600 { color: #B6B8BD; }
html:not(.dark) .ds-neutral-700 { color: #D1D3D8; }
html:not(.dark) .ds-neutral-800 { color: #E8E8E8; }
html:not(.dark) .ds-neutral-900 { color: #F5F5F5; }
html:not(.dark) .ds-neutral-950 { color: #FAFAFA; }

html:not(.dark) .ds-bg-neutral-50  { background-color: #FAFAFA; }
html:not(.dark) .ds-bg-neutral-100 { background-color: #F5F5F5; }
html:not(.dark) .ds-bg-neutral-200 { background-color: #E8E8E8; }
html:not(.dark) .ds-bg-neutral-300 { background-color: #D1D3D8; }
html:not(.dark) .ds-bg-neutral-400 { background-color: #B6B8BD; }
html:not(.dark) .ds-bg-neutral-500 { background-color: #9E9E9E; }
html:not(.dark) .ds-bg-neutral-600 { background-color: #6B6D75; }
html:not(.dark) .ds-bg-neutral-700 { background-color: #4D4F55; }
html:not(.dark) .ds-bg-neutral-800 { background-color: #33353A; }
html:not(.dark) .ds-bg-neutral-900 { background-color: #1A1B1E; }
html:not(.dark) .ds-bg-neutral-950 { background-color: #FFFFFF; }

/* --- Accent color utilities (same hues work in both modes) --- */
html:not(.dark) .ds-accent-300 { color: #3344B5; }
html:not(.dark) .ds-accent-400 { color: #4254C4; }

/* --- Semantic colors --- */
html:not(.dark) .ds-success-300 { color: #16A34A; }
html:not(.dark) .ds-success-800 { color: #166534; }
html:not(.dark) .ds-error-300 { color: #DC2626; }
html:not(.dark) .ds-error-800 { color: #991B1B; }
html:not(.dark) .ds-warning-300 { color: #D97706; }
html:not(.dark) .ds-warning-800 { color: #92400E; }
html:not(.dark) .ds-info-300 { color: #0891B2; }
html:not(.dark) .ds-info-800 { color: #155E75; }

/* --- Buttons: Secondary --- */
html:not(.dark) .ds-btn-secondary {
  background: #FFFFFF;
  border: 1px solid #E8E8E8;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.06);
  color: #111214;
}
html:not(.dark) .ds-btn-secondary:hover:not(:disabled) { background: #F5F5F5; }
html:not(.dark) .ds-btn-secondary:disabled { color: #B6B8BD; background: #FAFAFA; }

/* --- Buttons: Ghost --- */
html:not(.dark) .ds-btn-ghost { color: #111214; }
html:not(.dark) .ds-btn-ghost:hover:not(:disabled) { background: #F5F5F5; }
html:not(.dark) .ds-btn-ghost:disabled { color: #B6B8BD; background: #F5F5F5; }

/* --- Buttons: Success --- */
html:not(.dark) .ds-btn-success { background: #F0FDF4; color: #16A34A; box-shadow: none; }
html:not(.dark) .ds-btn-success:hover:not(:disabled) { background: #DCFCE7; }
html:not(.dark) .ds-btn-success:disabled { color: #86EFAC; }

/* --- Buttons: Error --- */
html:not(.dark) .ds-btn-error { background: #FEF2F2; color: #DC2626; box-shadow: none; }
html:not(.dark) .ds-btn-error:hover:not(:disabled) { background: #FEE2E2; }
html:not(.dark) .ds-btn-error:disabled { color: #FCA5A5; }

/* --- Buttons: Warning --- */
html:not(.dark) .ds-btn-warning { background: #FFFBEB; color: #D97706; box-shadow: none; }
html:not(.dark) .ds-btn-warning:hover:not(:disabled) { background: #FEF3C7; }
html:not(.dark) .ds-btn-warning:disabled { color: #FCD34D; }

/* --- Buttons: Icon --- */
html:not(.dark) .ds-btn-icon { background: #F5F5F5; box-shadow: none; color: #111214; }
html:not(.dark) .ds-btn-icon:hover:not(:disabled) { background: #E8E8E8; }
html:not(.dark) .ds-btn-icon:disabled { background: #F5F5F5; color: #B6B8BD; }

/* --- Inputs --- */
html:not(.dark) .ds-input {
  background: #FFFFFF;
  border-color: #E8E8E8;
  color: #111214;
}
html:not(.dark) .ds-input::placeholder { color: #9E9E9E; }
html:not(.dark) .ds-input:focus { border-color: #155EFD; }
html:not(.dark) .ds-input:disabled { background: #F5F5F5; border-color: #E8E8E8; color: #B6B8BD; }
html:not(.dark) .ds-input:disabled::placeholder { color: #B6B8BD; }

/* --- Input OTP --- */
html:not(.dark) .ds-input-otp-group { border-color: #E8E8E8; }
html:not(.dark) .ds-input-otp { border-left-color: #E8E8E8; color: #9E9E9E; }
html:not(.dark) .ds-input-otp-group.compact .ds-input-otp { background: #F5F5F5; }

/* --- Select --- */
html:not(.dark) .ds-select {
  background: #FFFFFF;
  border-color: #E8E8E8;
  color: #111214;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%236B6D75' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html:not(.dark) .ds-select:hover { border-color: #D1D3D8; }
html:not(.dark) .ds-select:disabled { color: #B6B8BD; }

/* --- Dropdown --- */
html:not(.dark) .ds-dropdown-menu { background: #FFFFFF; border-color: #E8E8E8; }
html:not(.dark) .ds-dropdown-item { color: #111214; }
html:not(.dark) .ds-dropdown-item:hover,
html:not(.dark) .ds-dropdown-item.active { background: #F5F5F5; }

/* --- Checkbox --- */
html:not(.dark) .ds-checkbox { border-color: #D1D3D8; }
html:not(.dark) .ds-checkbox:checked { background-color: #155EFD; border-color: #155EFD; }

/* --- Radio --- */
html:not(.dark) .ds-radio { border-color: #D1D3D8; }
html:not(.dark) .ds-radio:checked { border-color: #155EFD; }
html:not(.dark) .ds-radio:checked::after { background-color: #155EFD; }

/* --- Toggle --- */
html:not(.dark) .ds-toggle { background-color: #D1D3D8; }
html:not(.dark) .ds-toggle.active { background-color: #155EFD; }

/* --- Toast --- */
html:not(.dark) .ds-toast { background-color: #FFFFFF; border-color: #E8E8E8; }
html:not(.dark) .ds-toast-title { color: #111214; }
html:not(.dark) .ds-toast-message { color: #6B6D75; }

/* --- Card --- */
html:not(.dark) .ds-card { background-color: #FFFFFF; border-color: #E8E8E8; }
html:not(.dark) .ds-card-nested { background-color: #FAFAFA; border-color: #E8E8E8; }
html:not(.dark) .ds-card-promo { background-color: #FFFFFF; border-color: #E8E8E8; }

/* --- Badge --- */
html:not(.dark) .ds-badge-accent { background-color: #EEF2FF; color: #4254C4; }
html:not(.dark) .ds-badge-success { background-color: #F0FDF4; color: #16A34A; }
html:not(.dark) .ds-badge-error { background-color: #FEF2F2; color: #DC2626; }
html:not(.dark) .ds-badge-warning { background-color: #FFFBEB; color: #D97706; }
html:not(.dark) .ds-badge-info { background-color: #ECFEFF; color: #0891B2; }

/* --- Table --- */
html:not(.dark) .ds-table th { color: #6B6D75; border-bottom-color: #E8E8E8; }
html:not(.dark) .ds-table td { color: #33353A; border-bottom-color: #F5F5F5; }
html:not(.dark) .ds-table tr:hover td { background-color: #FAFAFA; }

/* --- Dialog --- */
html:not(.dark) .ds-dialog { background-color: #FFFFFF; border-color: #E8E8E8; }
html:not(.dark) .ds-dialog-title { color: #111214; }
html:not(.dark) .ds-dialog-message { color: #6B6D75; }

/* --- Label --- */
html:not(.dark) .ds-label { color: #6B6D75; }

/* --- Stroke --- */
html:not(.dark) .ds-stroke { border-color: #E8E8E8; }