@import '../utils/_icons';
// --- Design Tokens (Variables) ---

// Brand Palette (Indigo)
@brand-50: #eef2ff;
@brand-100: #e0e7ff;
@brand-200: #c7d2fe;
@brand-300: #a5b4fc;
@brand-400: #818cf8;
@brand-500: #6366f1;
@brand-600: #4f46e5;
@brand-700: #4338ca;
@brand-800: #3730a3;
@brand-900: #312e81;

// Neutral Palette (Zinc)
@slate-50: #fafafa;
@slate-100: #f4f4f5;
@slate-200: #e4e4e7;
@slate-300: #d4d4d8;
@slate-400: #a1a1aa;
@slate-500: #71717a;
@slate-600: #52525b;
@slate-700: #3f3f46;
@slate-800: #27272a;
@slate-900: #18181b;

// Status
@success: #10b981;
@warning: #f59e0b;
@error: #ef4444;
@info: #0ea5e9;

@light-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@light-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
@light-shadow-outline: 0 0 12px rgba(0, 0, 0, 0.1);
@light-icon-color: #18181b;
@light-bg-surface: #ffffff;
@light-text-on-brand: #ffffff;

// --- Root CSS Variables ---

:root {
  --brand-50: @brand-50;
  --brand-100: @brand-100;
  --brand-200: @brand-200;
  --brand-300: @brand-300;
  --brand-400: @brand-400;
  --brand-500: @brand-500;
  --brand-600: @brand-600;
  --brand-700: @brand-700;
  --brand-800: @brand-800;
  --brand-900: @brand-900;

  --slate-50: @slate-50;
  --slate-100: @slate-100;
  --slate-200: @slate-200;
  --slate-300: @slate-300;
  --slate-400: @slate-400;
  --slate-500: @slate-500;
  --slate-600: @slate-600;
  --slate-700: @slate-700;
  --slate-800: @slate-800;
  --slate-900: @slate-900;

  --success: @success;
  --warning: @warning;
  --error: @error;
  --info: @info;

  --bg-color: var(--slate-50);
  --bg-surface: @light-bg-surface;
  --bg-subtle: var(--slate-100);

  --text-primary: var(--slate-900);
  --text-secondary: var(--slate-500);
  --text-disabled: var(--slate-400);
  --text-on-brand: @light-text-on-brand;

  --border-subtle: var(--slate-200);
  --border-strong: var(--slate-300);
  --border-interactive: var(--brand-500);

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

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