@import '../utils/_icons';
// --- Dark Theme Tokens ---

@dark-bg-color:      #09090b;
@dark-bg-surface:    #18181b;
@dark-bg-subtle:     #27272a;

@dark-text-primary:  #f4f4f5;
@dark-text-secondary:#a1a1aa;
@dark-text-disabled: #52525b;
@dark-text-on-brand: #ffffff;

@dark-success:       #34d399;
@dark-error:         #f87171;

@dark-border-subtle: #27272a;
@dark-border-strong: #3f3f46;

@dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
@dark-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
@dark-shadow-outline: 0 0 12px rgba(0, 0, 0, 0.5);
@dark-icon-color: #f4f4f5;

// --- Dark Theme Implementation ---

html[data-theme="dark"] {
  --bg-color: @dark-bg-color;
  --bg-surface: @dark-bg-surface;
  --bg-subtle: @dark-bg-subtle;

  --text-primary: @dark-text-primary;
  --text-secondary: @dark-text-secondary;
  --text-disabled: @dark-text-disabled;
  --text-on-brand: @dark-text-on-brand;

  --success: @dark-success;
  --error: @dark-error;

  --border-subtle: @dark-border-subtle;
  --border-strong: @dark-border-strong;
  --border-interactive: var(--brand-500);

  --shadow-sm: @dark-shadow-sm;
  --shadow-md: @dark-shadow-md;
  --shadow-outline: @dark-shadow-outline;

  --icon-color: @dark-icon-color;
  .icon-select-arrow(--select-arrow, @dark-icon-color);
  .icon-checkbox(--checkbox-icon, @dark-icon-color);
  .icon-radio(--radio-icon, @dark-icon-color);
}