/* ============================================================
   OOKIA — Design tokens & shared styles
   À copier dans back-end/resources/css/app.css lors de la migration
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

:root {
    /* Palette OOKIA — CDC section 9 */
    --color-primary: #42B9A3;        /* Vert d'eau */
    --color-primary-light: #E6F7F4;
    --color-primary-dark: #228070;

    --color-accent: #C66A33;         /* Cuivre */
    --color-accent-light: #F3D0B8;

    --color-success: #16A34A;
    --color-error: #DC2626;
    --color-info: #2563EB;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    color: #1F2937;
    background: #F9FAFB;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
}

/* Couleur classes (Tailwind ne génère pas .text-primary par défaut) */
.text-primary { color: var(--color-primary); }
.bg-primary { background-color: var(--color-primary); }
.border-primary { border-color: var(--color-primary); }
.bg-primary\/10 { background-color: rgb(66 185 163 / 0.1); }
.bg-primary\/20 { background-color: rgb(66 185 163 / 0.2); }
.text-primary\/70 { color: rgb(66 185 163 / 0.7); }
.shadow-primary\/20 { --tw-shadow-color: rgb(66 185 163 / 0.2); --tw-shadow: var(--tw-shadow-colored); }
.ring-primary { --tw-ring-color: var(--color-primary); }
.hover\:bg-primary:hover { background-color: var(--color-primary); }
.hover\:text-primary:hover { color: var(--color-primary); }

.text-accent { color: var(--color-accent); }
.bg-accent { background-color: var(--color-accent); }
.border-accent { border-color: var(--color-accent); }
.bg-accent\/10 { background-color: rgb(198 106 51 / 0.1); }
.hover\:bg-accent:hover { background-color: var(--color-accent); }

/* Boutons */
.btn-primary {
    padding: 0.625rem 1.5rem;
    background-color: var(--color-accent);
    color: white;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.15s;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary:active { transform: scale(0.95); }

.btn-secondary {
    padding: 0.625rem 1.5rem;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
}
.btn-secondary:hover {
    background-color: var(--color-primary);
    color: white;
}
.btn-secondary:active { transform: scale(0.95); }

.card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    border: 1px solid #F3F4F6;
    padding: 1.5rem;
}

/* Anim shimmer pour skeleton */
@keyframes ook-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.animate-shimmer {
    background: linear-gradient(90deg, #F3F4F6, #E5E7EB, #F3F4F6);
    background-size: 200% 100%;
    animation: ook-shimmer 2s infinite;
}

/* Anim fade-in */
@keyframes ook-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: ook-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Sidebar active link helper */
.sidebar-active {
    background-color: rgb(66 185 163 / 0.1);
    color: var(--color-primary);
}

/* Scrollbar discret */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #9CA3AF; }