/* Use system fonts for better performance - fallback to web fonts if needed */
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
body {
@apply bg-pierre-gray-50 text-pierre-gray-700;
}
h1, h2, h3, h4, h5, h6 {
@apply text-pierre-gray-900 font-semibold;
}
}
@layer components {
/* Pierre Button Components */
.btn-base {
@apply inline-flex items-center justify-center px-6 py-3 rounded-md font-medium text-sm transition-all duration-base cursor-pointer border-0;
}
.btn-primary {
@apply btn-base bg-pierre-violet text-white shadow-sm hover:bg-pierre-violet-dark hover:-translate-y-0.5 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none;
}
.btn-gradient {
@apply btn-base bg-gradient-to-r from-pierre-violet to-pierre-cyan text-white shadow-md hover:shadow-lg hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none;
}
.btn-secondary {
@apply btn-base bg-white text-pierre-gray-700 border border-pierre-gray-300 hover:bg-pierre-gray-50 hover:border-pierre-gray-400;
}
.btn-danger {
@apply btn-base bg-pierre-red-600 text-white hover:bg-pierre-red-700;
}
.btn-success {
@apply btn-base bg-pierre-green-600 text-white hover:bg-pierre-green-700;
}
.btn-outline {
@apply btn-base bg-transparent text-pierre-gray-700 border border-pierre-gray-300 hover:bg-pierre-gray-50 hover:border-pierre-gray-400;
}
.btn-sm {
@apply px-4 py-2 text-xs;
}
.btn-lg {
@apply px-8 py-4 text-base;
}
/* Pierre Card Components */
.card {
@apply bg-white rounded-lg border border-pierre-gray-200 p-6 shadow-sm hover:shadow-md transition-shadow duration-base;
}
.card-header {
@apply border-b border-pierre-gray-200 pb-4 mb-6;
}
.stat-card {
@apply bg-white border border-pierre-gray-200 rounded-lg p-6 text-center hover:-translate-y-0.5 transition-transform duration-base relative overflow-hidden;
}
.stat-card::before {
@apply absolute top-0 left-0 right-0 h-1 bg-gradient-to-r from-pierre-violet via-pierre-cyan to-pierre-activity;
content: '';
}
/* Pierre Form Components */
.input-field {
@apply w-full px-4 py-3 border border-pierre-gray-300 rounded-md text-sm font-sans transition-all duration-base focus:outline-none focus:border-pierre-violet focus:ring-2 focus:ring-pierre-violet focus:ring-opacity-20;
}
.label {
@apply block text-sm font-medium text-pierre-gray-700 mb-2;
}
.help-text {
@apply text-xs text-pierre-gray-500 mt-1;
}
.error-text {
@apply text-xs text-pierre-red-600 mt-1;
}
/* Pierre Badge Components */
.badge {
@apply inline-flex items-center px-3 py-1 rounded-full text-xs font-medium;
}
.badge-success {
@apply badge bg-pierre-green-100 text-pierre-green-800;
}
.badge-warning {
@apply badge bg-pierre-yellow-100 text-pierre-yellow-800;
}
.badge-error {
@apply badge bg-pierre-red-100 text-pierre-red-800;
}
.badge-info {
@apply badge bg-pierre-blue-100 text-pierre-blue-800;
}
.badge-trial {
@apply badge bg-pierre-yellow-100 text-pierre-yellow-800;
}
.badge-starter {
@apply badge bg-pierre-blue-100 text-pierre-blue-800;
}
.badge-professional {
@apply badge bg-pierre-green-100 text-pierre-green-800;
}
.badge-enterprise {
@apply badge bg-pierre-purple-100 text-pierre-purple-800;
}
.badge-destructive {
@apply badge bg-pierre-red-100 text-pierre-red-800;
}
.badge-secondary {
@apply badge bg-pierre-gray-100 text-pierre-gray-800;
}
/* Pierre Status Indicators */
.status-dot {
@apply w-2 h-2 rounded-full inline-block mr-2;
}
.status-online {
@apply status-dot bg-pierre-green-500 animate-pulse;
}
.status-offline {
@apply status-dot bg-pierre-gray-400;
}
.status-error {
@apply status-dot bg-pierre-red-500;
}
/* Pierre Navigation */
.tab {
@apply py-4 border-b-2 border-transparent text-pierre-gray-500 font-medium transition-all duration-base flex items-center gap-2;
}
.tab:hover {
@apply text-pierre-gray-700 border-pierre-gray-300;
}
.tab-active {
@apply text-pierre-violet border-pierre-violet;
}
/* Pierre Loading Spinner */
.pierre-spinner {
@apply border-2 border-pierre-gray-200 border-t-pierre-violet rounded-full w-4 h-4 animate-spin;
}
/* Pierre Focus Ring */
.focus-ring {
@apply focus:outline-none focus:ring-2 focus:ring-pierre-violet focus:ring-opacity-50 focus:ring-offset-2;
}
}
