/* K-Beauty Pass Color System */
/* Based on Figma Design System */

:root {
  /* Primary Colors */
  --color-primary: #558fff;
  --color-primary-rgb: 85, 143, 255;

  /* Neutral Colors */
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;
  --color-black: #141414;
  --color-black-rgb: 20, 20, 20;
  --color-gray-light: #f1f2f7;
  --color-gray-light-rgb: 241, 242, 247;

  /* Error Colors */
  --color-error: #ff4343;
  --color-error-rgb: 255, 67, 67;
  --color-error-light: #ff8179;
  --color-error-light-rgb: 255, 129, 121;
  --color-error-lightest: #ffc4c4;
  --color-error-lightest-rgb: 255, 196, 196;

  /* Text Colors */
  --color-text-primary: #141414;
  --color-text-secondary: #6d6d6d;
  --color-text-muted: #5e5e5e;
  --color-text-white: #ffffff;

  /* Background Colors */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f1f2f7;
  --color-bg-dark: #141414;

  /* Border Colors */
  --color-border-light: #f1f2f7;
  --color-border-primary: #558fff;
  --color-border-error: #ff4343;
}

/* Color Utility Classes */

/* Background Colors */
.bg-primary {
  background-color: var(--color-primary);
}
.bg-white {
  background-color: var(--color-white);
}
.bg-black {
  background-color: var(--color-black);
}
.bg-gray-light {
  background-color: var(--color-gray-light);
}
.bg-error {
  background-color: var(--color-error);
}
.bg-error-light {
  background-color: var(--color-error-light);
}
.bg-error-lightest {
  background-color: var(--color-error-lightest);
}

/* Text Colors */
.text-primary {
  color: var(--color-text-primary);
}
.text-secondary {
  color: var(--color-text-secondary);
}
.text-muted {
  color: var(--color-text-muted);
}
.text-white {
  color: var(--color-text-white);
}
.text-error {
  color: var(--color-error);
}
.text-blue {
  color: var(--color-primary);
}

/* Border Colors */
.border-light {
  border-color: var(--color-border-light);
}
.border-primary {
  border-color: var(--color-border-primary);
}
.border-error {
  border-color: var(--color-border-error);
}

/* Hover States */
.hover-bg-primary:hover {
  background-color: rgba(var(--color-primary-rgb), 0.9);
}
.hover-bg-error:hover {
  background-color: rgba(var(--color-error-rgb), 0.9);
}
.hover-text-primary:hover {
  color: var(--color-primary);
}

/* Focus States */
.focus-border-primary:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

.focus-border-error:focus {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px rgba(var(--color-error-rgb), 0.1);
}

/* Opacity Variants */
.bg-primary-10 {
  background-color: rgba(var(--color-primary-rgb), 0.1);
}
.bg-primary-20 {
  background-color: rgba(var(--color-primary-rgb), 0.2);
}
.bg-primary-50 {
  background-color: rgba(var(--color-primary-rgb), 0.5);
}

.bg-error-10 {
  background-color: rgba(var(--color-error-rgb), 0.1);
}
.bg-error-20 {
  background-color: rgba(var(--color-error-rgb), 0.2);
}
.bg-error-50 {
  background-color: rgba(var(--color-error-rgb), 0.5);
}

.text-primary-50 {
  color: rgba(var(--color-primary-rgb), 0.5);
}
.text-error-50 {
  color: rgba(var(--color-error-rgb), 0.5);
}

/* Button Variants */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-white);
  border: 1px solid var(--color-primary);
}

.btn-primary:hover {
  background-color: rgba(var(--color-primary-rgb), 0.9);
}

.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-secondary:hover {
  background-color: rgba(var(--color-primary-rgb), 0.1);
}

.btn-error {
  background-color: var(--color-error);
  color: var(--color-white);
  border: 1px solid var(--color-error);
}

.btn-error:hover {
  background-color: rgba(var(--color-error-rgb), 0.9);
}

/* Status Colors */
.status-success {
  color: #10b981;
}
.status-warning {
  color: #f59e0b;
}
.status-info {
  color: var(--color-primary);
}
.status-error {
  color: var(--color-error);
}

.bg-status-success {
  background-color: #10b981;
}
.bg-status-warning {
  background-color: #f59e0b;
}
.bg-status-info {
  background-color: var(--color-primary);
}
.bg-status-error {
  background-color: var(--color-error);
}