@import "tailwindcss";

/* Flat UI Colors Palette - Based on https://flatuicolors.com/palette/defo */
:root {
  /* Flat UI Colors - Default Palette */
  --color-turquoise: #1abc9c;
  --color-emerald: #2ecc71;
  --color-peter-river: #3498db;
  --color-amethyst: #9b59b6;
  --color-wet-asphalt: #34495e;
  --color-green-sea: #16a085;
  --color-nephritis: #27ae60;
  --color-belize-hole: #2980b9;
  --color-wisteria: #8e44ad;
  --color-midnight-blue: #2c3e50;
  --color-sun-flower: #f1c40f;
  --color-carrot: #e67e22;
  --color-alizarin: #e74c3c;
  --color-clouds: #ecf0f1;
  --color-concrete: #95a5a6;
  --color-orange: #f39c12;
  --color-pumpkin: #d35400;
  --color-pomegranate: #c0392b;
  --color-silver: #bdc3c7;
  --color-asbestos: #7f8c8d;
  
  /* Primary theme colors */
  --primary: var(--color-peter-river);
  --primary-dark: var(--color-belize-hole);
  --secondary: var(--color-amethyst);
  --secondary-dark: var(--color-wisteria);
  --success: var(--color-emerald);
  --success-dark: var(--color-nephritis);
  --warning: var(--color-sun-flower);
  --warning-dark: var(--color-orange);
  --danger: var(--color-alizarin);
  --danger-dark: var(--color-pomegranate);
  --info: var(--color-turquoise);
  --info-dark: var(--color-green-sea);
  --dark: var(--color-wet-asphalt);
  --darker: var(--color-midnight-blue);
  --light: var(--color-clouds);
  --gray: var(--color-concrete);
  --gray-dark: var(--color-asbestos);
}

/* Component styles using Flat UI colors */
.btn {
  padding: 0.625rem 1.25rem;
  border-radius: 0.25rem;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-primary {
  background-color: var(--primary);
  color: white;
}

.btn-primary:hover {
  background-color: var(--primary-dark);
}

.btn-secondary {
  background-color: var(--secondary);
  color: white;
}

.btn-secondary:hover {
  background-color: var(--secondary-dark);
}

.btn-success {
  background-color: var(--success);
  color: white;
}

.btn-success:hover {
  background-color: var(--success-dark);
}

.btn-danger {
  background-color: var(--danger);
  color: white;
}

.btn-danger:hover {
  background-color: var(--danger-dark);
}

.btn-warning {
  background-color: var(--warning);
  color: white;
}

.btn-warning:hover {
  background-color: var(--warning-dark);
}

.btn-info {
  background-color: var(--info);
  color: white;
}

.btn-info:hover {
  background-color: var(--info-dark);
}

.btn-dark {
  background-color: var(--dark);
  color: white;
}

.btn-dark:hover {
  background-color: var(--darker);
}