/* MonAnimalID – custom CSS
   Tailwind CDN handles most utilities.
   This file adds brand tokens + small helpers.
*/

:root {
    --color-brand:       #16a34a;  /* green-600 */
    --color-brand-dark:  #15803d;  /* green-700 */
    --color-brand-light: #dcfce7;  /* green-100 */
}

/* Couleur marque sur Tailwind via extension config dans le CDN */
.bg-brand        { background-color: var(--color-brand) !important; }
.bg-brand-dark   { background-color: var(--color-brand-dark) !important; }
.text-brand      { color: var(--color-brand) !important; }
.border-brand    { border-color: var(--color-brand) !important; }
.ring-brand      { --tw-ring-color: var(--color-brand); }
.hover\:bg-brand-dark:hover { background-color: var(--color-brand-dark) !important; }

/* Focus ring cohérent */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
}

/* Smooth scroll  */
html { scroll-behavior: smooth; }

/* Typography helpers for legal prose pages */
.prose h1 { font-size: 1.75rem; font-weight: 700; color: #111827; margin-bottom: 0.5rem; }
.prose h2 { font-size: 1.125rem; font-weight: 600; color: #111827; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.prose p  { color: #4b5563; line-height: 1.7; margin-bottom: 0.75rem; }
.prose ul { color: #4b5563; padding-left: 1.5rem; margin-bottom: 0.75rem; list-style: disc; }
.prose a  { color: var(--color-brand); text-decoration: underline; }

/* QR code page minimal layout */
.qr-page-bg {
    min-height: 100vh;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 60%);
}

/* Loading spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
    width: 1.25rem; height: 1.25rem;
    border: 2px solid #e5e7eb;
    border-top-color: var(--color-brand);
    border-radius: 50%;
    animation: spin .7s linear infinite;
    display: inline-block;
}