@charset "UTF-8";

/**
 * Fichier CSS principal pour le site public de Yumi
 *
 * Design system basé sur l'application Lovable.
 *
 * @package    Yumi
 * @author     Claude Code
 * @copyright  2025 Yumi
 * @date       2024-12-31
 */

/* ==========================================
   VARIABLES CSS - DESIGN SYSTEM YUMI
   ========================================== */
:root {
    /* Couleurs de base */
    --background: 0 0% 100%;
    --foreground: 224 71% 4%;

    --popover: 0 0% 100%;
    --popover-foreground: 224 71% 4%;

    /* Couleurs de marque YUMI */
    --primary: 338 76% 52%; /* rose framboise */
    --primary-foreground: 0 0% 100%;

    --secondary: 268 62% 96%; /* lilas très pâle */
    --secondary-foreground: 255 20% 25%;

    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;

    --accent: 18 93% 62%; /* pêche douce */
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --border: 220 14% 92%;
    --input: 220 14% 92%;
    --ring: 338 76% 52%;

    --radius: 0.8rem;

    /* Tokens de statut */
    --success: 142 72% 35%;
    --success-foreground: 144 70% 96%;
    --warning: 28 90% 55%;
    --warning-foreground: 28 100% 10%;

    /* Palette du cycle menstruel */
    --cycle-menstruations: 24 92% 55%; /* orange */
    --cycle-folliculaire: 330 75% 65%; /* pink */
    --cycle-ovulation: 50 96% 52%; /* yellow */
    --cycle-luteale: 199 89% 70%; /* sky blue */

    /* Effets spéciaux */
    --gradient-hero: linear-gradient(135deg, hsl(338 76% 56%) 0%, hsl(18 93% 64%) 50%, hsl(268 62% 72%) 100%);
    --shadow-soft: 0 12px 40px -12px hsl(var(--primary) / 0.35);
    --transition-smooth: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Typographie */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-title: "Nunito", "Arial Rounded MT Bold", Arial, sans-serif;

    --bg-color-hero: pink;
}

/* ==========================================
   STYLES DE BASE
   ========================================== */
* {
    border-color: hsl(var(--border));
}

body {
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-size: 16px;
    line-height: 1.6;
}

/* ==========================================
   TYPOGRAPHIE
   ========================================== */
h1, h2, h3, h4, .title {
    font-family: var(--font-title);
    font-weight: 700;
}

h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 26px; }
h4 { font-size: 24px; }
h5 { font-size: 21px; }
h6 { font-size: 18px; }

/* ==========================================
   ANIMATION DU GRADIENT HERO
   ========================================== */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    animation: gradient 8s ease infinite;
}

/* ==========================================
   CLASSES UTILITAIRES - COULEURS
   ========================================== */
.text-primary {
    color: hsl(var(--primary));
}

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

.bg-secondary {
    background-color: hsl(var(--secondary));
}

.text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
}

.text-muted-foreground {
    color: hsl(var(--muted-foreground));
}

.border-border {
    border-color: hsl(var(--border));
}

.hover\:opacity-90:hover {
    opacity: 0.9;
}

/* ==========================================
   HERO SECTION
   ========================================== */
section.hero-section {
    background: var(--gradient-hero);
}

/* ==========================================
   TAGLINE APP
   ========================================== */
.yu-app-tagline {
    padding: 2px 9px;
    background: #f3effb;
    border-radius: 18px;
    font-size: 0.743rem;
    display: none;
    margin-left: 8px;
    color: #374151;
}

/* Afficher le tagline uniquement sur écrans >= 1024px */
@media (min-width: 1024px) {
    .yu-app-tagline {
        display: inline-block;
    }
}

/* ==========================================
   NAVIGATION PUBLIQUE
   ========================================== */
nav a {
    white-space: nowrap;
}

/* ==========================================
   PAGES D'AUTHENTIFICATION - LIENS
   ========================================== */
.auth-terms-text a {
    color: hsl(var(--primary));
    font-weight: 700;
}

.auth-terms-text a:hover {
    opacity: 0.8;
}