@use "modules/normalize";
@use "modules/transitions";
@use "global/mixins";
@use "global/variables";

// UI
@use "ui/collapse";
@use "ui/notification";
@use "ui/rating";
@use "ui/select";

:root {
  --color-accent: #111827;
  --color-accent-dark: #242c38;
  --color-accent-light: #465267;
  --color-accent-smooth: #656bd1;
  --color-accent-neon: #f200ff;
  --color-contrast: #ffc107;
  --color-error: #f13838;


  --color-neutral-50: #ffffff;
  --color-neutral-100: #f8f7fc;
  --color-neutral-200: #f0eefa;
  --color-neutral-300: #e2dfed;
  --color-neutral-400: #c5c1d9;
  --color-neutral-500: #8c8a9e;
  --color-neutral-600: #5a5869;
  --color-neutral-700: #3d3b47;
  --color-neutral-800: #23222a;
  --color-neutral-900: #000000;

  --color-background: var(--color-neutral-50);
  --color-background-secondary: var(--color-neutral-100);
  --color-background-elevated: var(--color-neutral-50);

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-accent: var(--color-accent);
  --color-text-inverse: var(--color-neutral-50);

  --color-border: var(--color-neutral-300);
  --color-border-hover: var(--color-accent-light);
  --color-divider: var(--color-neutral-200);

  --color-surface: var(--color-neutral-50);
  --color-surface-hover: var(--color-neutral-100);
  --color-surface-active: var(--color-neutral-200);

  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-info: #3b82f6;

  --color-success-bg: #d1fae5;
  --color-warning-bg: #fef3c7;
  --color-info-bg: #dbeafe;
  --color-error-bg: #fee2e2;

  --color-accent-hover: var(--color-accent-dark);
  --color-accent-active: var(--color-accent-smooth);
  --color-accent-disabled: #c7bfe9;
}

.dark {
  --color-accent: #8d7bdb;
  --color-accent-dark: #6b58c7;
  --color-accent-light: #b3a9e5;
  --color-accent-smooth: #7a80e1;
  --color-accent-neon: #ff1aff;
  --color-contrast: #ffd54f;
  --color-error: #ff6b6b;

  --color-neutral-50: #000000;
  --color-neutral-100: #0f0e14;
  --color-neutral-200: #1d1b26;
  --color-neutral-300: #2d2b3a;
  --color-neutral-400: #4a4858;
  --color-neutral-500: #6d6b7a;
  --color-neutral-600: #a19fae;
  --color-neutral-700: #c9c7d6;
  --color-neutral-800: #e2e0ef;
  --color-neutral-900: #ffffff;

  --color-background: var(--color-neutral-100);
  --color-background-secondary: var(--color-neutral-200);
  --color-background-elevated: var(--color-neutral-300);

  --color-text-primary: var(--color-neutral-800);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-accent: var(--color-accent-light);
  --color-text-inverse: var(--color-neutral-900);

  --color-border: var(--color-neutral-400);
  --color-border-hover: var(--color-accent);
  --color-divider: var(--color-neutral-300);

  --color-surface: var(--color-neutral-200);
  --color-surface-hover: var(--color-neutral-300);
  --color-surface-active: var(--color-neutral-400);

  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-info: #60a5fa;

  --color-success-bg: rgba(16, 185, 129, 0.2);
  --color-warning-bg: rgba(245, 158, 11, 0.2);
  --color-info-bg: rgba(59, 130, 246, 0.2);
  --color-error-bg: rgba(239, 68, 68, 0.2);

  --color-accent-hover: var(--color-accent);
  --color-accent-active: var(--color-accent-dark);
  --color-accent-disabled: #4a4269;
}