/**
 * WEBFUL - Feuille de style principale
 * Couleur de référence : #1d4e8a (bleu corporate)
 * Camaïeu dérivé pour tous les tons de bleu
 */

/* ============================================
   PALETTE COULEURS PERSONNALISÉE
   ============================================ */

:root {
    --webful-blue-50: #e8eef6;
    --webful-blue-100: #d1dde9;
    --webful-blue-200: #a3bbdb;
    --webful-blue-300: #7599cd;
    --webful-blue-400: #4777bf;
    --webful-blue-500: #2a5fa3;
    --webful-blue-600: #1d4e8a;
    /* Couleur principale */
    --webful-blue-700: #163d6e;
    --webful-blue-800: #0f2c52;
    --webful-blue-900: #0a1f3d;
}

/* ============================================
   OVERRIDE TAILWIND BLUE -> WEBFUL BLUE
   ============================================ */

/* Backgrounds */
.bg-blue-50 {
    background-color: var(--webful-blue-50) !important;
}

.bg-blue-100 {
    background-color: var(--webful-blue-100) !important;
}

.bg-blue-600 {
    background-color: var(--webful-blue-600) !important;
}

.bg-blue-700 {
    background-color: var(--webful-blue-700) !important;
}

.bg-blue-800 {
    background-color: var(--webful-blue-800) !important;
}

/* Hover backgrounds */
.hover\:bg-blue-50:hover {
    background-color: var(--webful-blue-50) !important;
}

.hover\:bg-blue-700:hover {
    background-color: var(--webful-blue-700) !important;
}

.hover\:bg-blue-800:hover {
    background-color: var(--webful-blue-800) !important;
}

/* Textes */
.text-blue-50 {
    color: var(--webful-blue-50) !important;
}

.text-blue-100 {
    color: var(--webful-blue-100) !important;
}

.text-blue-600 {
    color: var(--webful-blue-600) !important;
}

.text-blue-700 {
    color: var(--webful-blue-700) !important;
}

.text-blue-800 {
    color: var(--webful-blue-800) !important;
}

.text-blue-900 {
    color: var(--webful-blue-900) !important;
}

/* Hover textes */
.hover\:text-blue-600:hover {
    color: var(--webful-blue-600) !important;
}

.hover\:text-blue-700:hover {
    color: var(--webful-blue-700) !important;
}

.hover\:text-blue-800:hover {
    color: var(--webful-blue-800) !important;
}

/* Bordures */
.border-blue-100 {
    border-color: var(--webful-blue-100) !important;
}

.border-blue-200 {
    border-color: var(--webful-blue-200) !important;
}

.border-blue-500 {
    border-color: var(--webful-blue-500) !important;
}

.border-blue-600 {
    border-color: var(--webful-blue-600) !important;
}

/* Focus borders */
.focus\:border-blue-500:focus {
    border-color: var(--webful-blue-500) !important;
}

/* Ring (focus outlines) */
.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--webful-blue-500) !important;
}

.ring-blue-500 {
    --tw-ring-color: var(--webful-blue-500) !important;
}

/* Dégradés */
.from-blue-600 {
    --tw-gradient-from: var(--webful-blue-600) !important;
    --tw-gradient-to: transparent !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-blue-700 {
    --tw-gradient-to: var(--webful-blue-700) !important;
}

.to-blue-800 {
    --tw-gradient-to: var(--webful-blue-800) !important;
}

/* Strokes (SVG) */
.stroke-blue-600 {
    stroke: var(--webful-blue-600) !important;
}

/* Fill (SVG) */
.fill-blue-600 {
    fill: var(--webful-blue-600) !important;
}

/* ============================================
   LOGO WEBFUL
   ============================================ */

.webful-logo {
    height: 50px;
    width: auto;
    display: inline-block;
}

.webful-logo-small {
    height: 32px;
    width: auto;
    display: inline-block;
}

/* ============================================
   CANVAS GRAPHIQUE
   ============================================ */

/* Les couleurs du graphique sont gérées en JavaScript,
   on peut ajouter des variables CSS si besoin */
canvas {
    --chart-stroke: var(--webful-blue-600);
    --chart-fill-start: var(--webful-blue-200);
    --chart-fill-end: var(--webful-blue-50);
}

/* ============================================
   BOUTONS PERSONNALISÉS
   ============================================ */

.btn-webful-primary {
    background-color: var(--webful-blue-600);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: background-color 0.2s;
}

.btn-webful-primary:hover {
    background-color: var(--webful-blue-700);
}

.btn-webful-outline {
    background-color: white;
    color: var(--webful-blue-600);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 2px solid var(--webful-blue-600);
    font-weight: 600;
    transition: background-color 0.2s;
}

.btn-webful-outline:hover {
    background-color: var(--webful-blue-50);
}

/* ============================================
   CERCLES SCORE ÉVOLUTION
   ============================================ */

circle[stroke="#3b82f6"] {
    stroke: var(--webful-blue-600) !important;
}

/* ============================================
   LIENS
   ============================================ */

a.text-blue-600 {
    color: var(--webful-blue-600) !important;
}

a.text-blue-600:hover {
    color: var(--webful-blue-700) !important;
}

/* ============================================
   BADGES & PILLS
   ============================================ */

.badge-blue {
    background-color: var(--webful-blue-100);
    color: var(--webful-blue-800);
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .webful-logo {
        height: 32px;
    }
}

/* ============================================
   UTILITAIRES
   ============================================ */

.webful-shadow {
    box-shadow: 0 4px 6px -1px rgba(29, 78, 138, 0.1),
        0 2px 4px -1px rgba(29, 78, 138, 0.06);
}

.webful-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(29, 78, 138, 0.1),
        0 4px 6px -2px rgba(29, 78, 138, 0.05);
}