@use '../utils/icons' as *;
// --- Dark Theme Tokens ---

$dark-bg-color: #09090b !default;
$dark-bg-surface: #18181b !default;
$dark-bg-subtle: #27272a !default;

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

$dark-success: #34d399 !default;
$dark-error: #f87171 !default;

$dark-border-subtle: #27272a !default;
$dark-border-strong: #3f3f46 !default;

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

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