@use '../utils/icons' as *;
// --- Design Tokens (Variables) ---

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

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

// Status
$success: #10b981 !default;
$warning: #f59e0b !default;
$error: #ef4444 !default;
$info: #0ea5e9 !default;

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

// --- 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};
  --select-arrow: #{icon-select-arrow($light-icon-color)};
  --checkbox-icon: #{icon-checkbox($light-icon-color)};
  --radio-icon: #{icon-radio($light-icon-color)};
}