/* ========================================
   THEME CONFIGURATION - Círculo Médico
   ======================================== */

/* Solo cambiá estos valores para cambiar todo el theme */

:root {
  /* === COLORES PRINCIPALES === */
  
  /* Público (Front) - Teal/Turquesa */
  --color-public-primary: 13 148 136;      /* teal-600 */
  --color-public-primary-hover: 15 118 110; /* teal-700 */
  --color-public-secondary: 5 150 105;     /* emerald-600 */
  
  /* Admin - Purple */
  --color-admin-primary: 124 58 237;       /* purple-700 */
  --color-admin-primary-hover: 109 40 217; /* purple-800 */
  
  /* Prestadores - Blue (OKLCH based) */
  --color-prestador-primary: oklch(37.2% 0.044 257.287);      /* Base azul */
  --color-prestador-primary-hover: oklch(32% 0.048 257.287);  /* Azul más oscuro */
  --color-prestador-light: oklch(50% 0.04 257.287);           /* Azul claro */
  --color-prestador-lighter: oklch(70% 0.03 257.287);         /* Azul muy claro */
  --color-prestador-bg: oklch(95% 0.01 257.287);              /* Fondo azul muy suave */
  
  /* === COLORES DE NAVEGACIÓN === */
  --color-nav-bg: 30 41 59;                /* slate-800 */
  --color-nav-bg-end: 15 23 42;            /* slate-900 */
  --color-nav-text: 255 255 255;           /* white */
  --color-nav-hover: 45 212 191;           /* teal-400 */
  
  /* === COLORES DE FONDO === */
  --color-bg-page: 248 250 252;            /* slate-50 */
  --color-bg-card: 255 255 255;            /* white */
  --color-bg-card-secondary: 248 250 252;  /* slate-50 */
  
  /* === COLORES DE TEXTO === */
  --color-text-primary: 15 23 42;          /* slate-900 */
  --color-text-secondary: 100 116 139;     /* slate-500 */
  --color-text-muted: 148 163 184;         /* slate-400 */
  
  /* === COLORES DE BORDES === */
  --color-border-light: 226 232 240;       /* slate-200 */
  --color-border-medium: 203 213 225;      /* slate-300 */
  
  /* === COLORES DE ESTADO === */
  --color-success: 34 197 94;              /* green-500 */
  --color-error: 239 68 68;                /* red-500 */
  --color-warning: 251 191 36;             /* amber-400 */
  --color-info: 59 130 246;                /* blue-500 */
  
  /* === TIPOGRAFÍA === */
  --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  
  /* === ESPACIADO === */
  --spacing-xs: 0.5rem;         /* 8px */
  --spacing-sm: 0.75rem;        /* 12px */
  --spacing-md: 1rem;           /* 16px */
  --spacing-lg: 1.5rem;         /* 24px */
  --spacing-xl: 2rem;           /* 32px */
  
  /* === BORDES Y SOMBRAS === */
  --border-radius-sm: 0.5rem;   /* 8px */
  --border-radius-md: 0.75rem;  /* 12px */
  --border-radius-lg: 1rem;     /* 16px */
  --border-radius-xl: 1.5rem;   /* 24px */
}

/* ========================================
   CLASES DE UTILIDAD PERSONALIZADAS
   ======================================== */

/* Estas clases usan las variables de arriba */

.theme-bg-public {
  background-color: rgb(var(--color-public-primary));
}

.theme-bg-admin {
  background-color: rgb(var(--color-admin-primary));
}

.theme-bg-prestador {
  background-color: var(--color-prestador-primary);
}

.theme-bg-prestador-light {
  background-color: var(--color-prestador-light);
}

.theme-bg-prestador-lighter {
  background-color: var(--color-prestador-lighter);
}

.theme-bg-prestador-bg {
  background-color: var(--color-prestador-bg);
}

.theme-text-public {
  color: rgb(var(--color-public-primary));
}

.theme-text-admin {
  color: rgb(var(--color-admin-primary));
}

.theme-text-prestador {
  color: var(--color-prestador-primary);
}

.theme-border-public {
  border-color: rgb(var(--color-public-primary));
}

/* Navegación con gradiente */
.theme-nav-gradient {
  background: linear-gradient(to right, rgb(var(--color-nav-bg)), rgb(var(--color-nav-bg-end)));
}

/* Card estándar */
.theme-card {
  background-color: rgb(var(--color-bg-card));
  border: 1px solid rgb(var(--color-border-light));
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
}

/* Botón primario público */
.theme-btn-public {
  background-color: rgb(var(--color-public-primary));
  color: white;
  transition: all 0.2s;
}

.theme-btn-public:hover {
  background-color: rgb(var(--color-public-primary-hover));
}

/* Botón primario admin */
.theme-btn-admin {
  background-color: rgb(var(--color-admin-primary));
  color: white;
  transition: all 0.2s;
}

.theme-btn-admin:hover {
  background-color: rgb(var(--color-admin-primary-hover));
}

/* Botón primario prestador */
.theme-btn-prestador {
  background-color: var(--color-prestador-primary);
  color: white;
  transition: all 0.2s;
}

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

/* ========================================
   CONFIGURACIÓN EXTENDIDA DE TAILWIND
   ======================================== */

/* 
  Podés usar las variables CSS directamente en Tailwind:
  - bg-[rgb(var(--color-public-primary))]
  - text-[rgb(var(--color-text-primary))]
  
  O crear un tailwind.config.js para mappear las variables
*/