:root {
  /* Border Radii */
  --veon-border-radius-xs: 2px;
  --veon-border-radius-sm: 4px;
  --veon-border-radius: 6px;
  --veon-border-radius-md: 8px;
  --veon-border-radius-lg: 12px;
  --veon-border-radius-xl: 16px;
  --veon-border-radius-circle: 50%;
}

:root {
  /* Base color - #F36C21 */
  --veon-primary: #F36C21;
  --veon-primary-dark: #D45B1B;
  --veon-primary-darker: color-mix(in oklab, var(--veon-primary-dark), #000 25%);
  /* --veon-primary-light: #F9A270; */
  --veon-primary-light: color-mix(in oklab, var(--veon-primary), #fff 10%);
  /* --veon-primary-extra-light: #FDE0D1; */
  --veon-primary-extra-light: color-mix(in oklab, var(--veon-primary-light), #fff 20%);
  /* Light theme colors */
  --veon-light-bg: #FFFFFF;
  --veon-light-surface: #F8F9FA;
  --veon-light-surface-alt: #F1F3F4;
  --veon-light-border: #DEE2E6;
  --veon-light-text: #1a1d20;
  --veon-light-text-secondary: #6C757D;
  /* Dark theme colors */
  --veon-dark-bg: #121212;
  --veon-dark-surface: #1E1E1E;
  --veon-dark-surface-alt: #252525;
  --veon-dark-border: #3A3A3A;
  --veon-dark-text: #F8F9FA;
  --veon-dark-text-secondary: #ADB5BD;
  /* Status colors - neutral enough for both themes */
  --veon-success: #28A745;
  --veon-success-light: #D4EDDA;
  --veon-success-dark: #1E7E34;
  --veon-danger: #DC3545;
  --veon-danger-light: #F8D7DA;
  --veon-danger-dark: #BD2130;
  --veon-error: var(--veon-danger);
  --veon-error-light: var(--veon-danger-light);
  --veon-error-dark: var(--veon-danger-dark);
  --veon-warning: #FFC107;
  --veon-warning-light: #FFF3CD;
  --veon-warning-dark: #D39E00;
  --veon-info: #17A2B8;
  --veon-info-light: #D1ECF1;
  --veon-info-dark: #138496;
  /* Additional theme colors */
  --veon-secondary: #6C757D;
  --veon-secondary-light: #E9ECEF;
  --veon-secondary-dark: #545B62;
  --veon-confirm: #20C997;
  --veon-confirm-light: #D1F7EB;
  --veon-confirm-dark: #17A689;
  --veon-table-action: #ac057a;
  --veon-table-action-light: #d60096;
  --veon-table-action-dark: #790054;
  /* Current theme (default to light) */
  --veon-bg: var(--veon-light-bg);
  --veon-surface: var(--veon-light-surface);
  --veon-surface-alt: var(--veon-light-surface-alt);
  --veon-border: var(--veon-light-border);
  --veon-text: var(--veon-light-text);
  --veon-text-primary: #303030;
  --veon-text-secondary: var(--veon-light-text-secondary);
  --veon-border-primary: var(--veon-primary);
  --veon-border-secondary: var(--veon-secondary-dark);
  /* ---------------- */
  /* Component Colors */
  /* ---------------- */
  /* Input Controls */
  --veon-control-fg: var(--veon-text);
  --veon-control-bg: transparent;
  --veon-control-placeholder-fg: var(--veon-secondary);
  --veon-control-disabled-bg: transparent;
  --veon-control-disabled-fg: var(--veon-secondary-dark);
  --veon-control-required: var(--veon-danger);
  /* Table colors */
  --veon-table-header-text: #fff;
  --veon-table-header-bg: var(--veon-primary);
  --veon-table-header-hover-bg: color-mix(in oklab, var(--veon-primary), #000 10%);
  --veon-table-row-hover-text: var(--veon-text);
  --veon-table-row-hover-bg: var(--veon-primary-extra-light);
}

/* Dark theme class */
html[data-theme="dark"] {
  --veon-success: #1f8336;
  --veon-success-light: #D4EDDA;
  --veon-success-dark: #12461e;
  --veon-bg: var(--veon-dark-bg);
  --veon-surface: var(--veon-dark-surface);
  --veon-surface-alt: var(--veon-dark-surface-alt);
  --veon-border: var(--veon-dark-border);
  --veon-text: var(--veon-dark-text);
  --veon-text-primary: #ccc;
  --veon-text-secondary: var(--veon-dark-text-secondary);
  /* ---------------- */
  /* Component Colors */
  /* ---------------- */
  /* Table colors */
  --veon-table-row-hover-text: var(--veon-text);
  --veon-table-row-hover-bg: color-mix(in oklab, var(--veon-surface-alt), 5% #F36C21);
}