/**
 * Design Tokens - Première Fois Maman
 * Source unique de vérité pour toutes les variables CSS
 *
 * @package PFM
 * @version 3.0.0
 *
 * USAGE:
 * - Importer ce fichier en premier dans tout fichier CSS
 * - Utiliser les variables avec fallback: var(--pfm-primary-500, #9360F7)
 * - Ne JAMAIS utiliser de couleurs hex directes ailleurs
 */

/* ==========================================================================
   COULEURS - PALETTE PRINCIPALE
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Couleur Primaire - Violet Moderne
     Usage: Actions principales, liens, boutons CTA
     ------------------------------------------------------------------------- */
  --pfm-primary-50: #FAF5FF;
  --pfm-primary-100: #F3E8FF;
  --pfm-primary-200: #E9D5FF;
  --pfm-primary-300: #D8B4FE;
  --pfm-primary-400: #B794F6;
  --pfm-primary-500: #9360F7;
  --pfm-primary-600: #7C3AED;
  --pfm-primary-700: #6D28D9;
  --pfm-primary-800: #5B21B6;
  --pfm-primary-900: #4C1D95;

  /* -------------------------------------------------------------------------
     Couleur Secondaire - Violet Doux
     Usage: Éléments secondaires, hover states
     ------------------------------------------------------------------------- */
  --pfm-secondary-50: #FAF5FF;
  --pfm-secondary-100: #F3E8FF;
  --pfm-secondary-200: #E9D5FF;
  --pfm-secondary-300: #D8B4FE;
  --pfm-secondary-400: #C084FC;
  --pfm-secondary-500: #A855F7;
  --pfm-secondary-600: #9333EA;
  --pfm-secondary-700: #7C3AED;
  --pfm-secondary-800: #6B21A8;
  --pfm-secondary-900: #581C87;

  /* -------------------------------------------------------------------------
     Couleur Accent - Turquoise Santé
     Usage: Succès, informations médicales positives
     ------------------------------------------------------------------------- */
  --pfm-accent-50: #F0FDFA;
  --pfm-accent-100: #CCFBF1;
  --pfm-accent-200: #99F6E4;
  --pfm-accent-300: #5EEAD4;
  --pfm-accent-400: #2DD4BF;
  --pfm-accent-500: #14B8A6;
  --pfm-accent-600: #0D9488;
  --pfm-accent-700: #0F766E;
  --pfm-accent-800: #115E59;
  --pfm-accent-900: #134E4A;

  /* -------------------------------------------------------------------------
     Neutres - Gris Chauds
     Usage: Textes, backgrounds, bordures
     ------------------------------------------------------------------------- */
  --pfm-gray-50: #FAFAF9;
  --pfm-gray-100: #F5F5F4;
  --pfm-gray-200: #E7E5E4;
  --pfm-gray-300: #D6D3D1;
  --pfm-gray-400: #A8A29E;
  --pfm-gray-500: #78716C;
  --pfm-gray-600: #57534E;
  --pfm-gray-700: #44403C;
  --pfm-gray-800: #292524;
  --pfm-gray-900: #1C1917;

  /* Alias pratiques */
  --pfm-white: #FFFFFF;
  --pfm-black: #000000;

  /* -------------------------------------------------------------------------
     Couleurs Sémantiques
     Usage: États, feedback, alertes
     ------------------------------------------------------------------------- */
  --pfm-success-50: #ECFDF5;
  --pfm-success-100: #D1FAE5;
  --pfm-success-200: #A7F3D0;
  --pfm-success-500: #10B981;
  --pfm-success-600: #059669;
  --pfm-success-700: #047857;
  --pfm-success-800: #065F46;

  --pfm-warning-50: #FFFBEB;
  --pfm-warning-100: #FEF3C7;
  --pfm-warning-200: #FDE68A;
  --pfm-warning-500: #F59E0B;
  --pfm-warning-600: #D97706;
  --pfm-warning-700: #B45309;

  --pfm-error-50: #FEF2F2;
  --pfm-error-100: #FEE2E2;
  --pfm-error-200: #FECACA;
  --pfm-error-500: #EF4444;
  --pfm-error-600: #DC2626;
  --pfm-error-700: #B91C1C;
  --pfm-error-800: #991B1B;

  --pfm-info-50: #EFF6FF;
  --pfm-info-100: #DBEAFE;
  --pfm-info-500: #3B82F6;
  --pfm-info-600: #2563EB;
  --pfm-info-700: #1D4ED8;

  /* -------------------------------------------------------------------------
     Couleurs YMYL / Confiance
     Usage: Badges médicaux, sources officielles
     ------------------------------------------------------------------------- */
  --pfm-trust: #0EA5E9;
  --pfm-medical: #059669;
  --pfm-verified: #8B5CF6;
  --pfm-official: #2E7D32;

  /* -------------------------------------------------------------------------
     Couleurs Thématiques - Grossesse
     Usage: Calendriers, trimestres, outils
     ------------------------------------------------------------------------- */
  --pfm-trimester-1: #FFCDD2;
  --pfm-trimester-1-dark: #EF9A9A;
  --pfm-trimester-2: #C8E6C9;
  --pfm-trimester-2-dark: #A5D6A7;
  --pfm-trimester-3: #BBDEFB;
  --pfm-trimester-3-dark: #90CAF9;

  /* Couleurs fertilité */
  --pfm-fertile-window: #FFF3E0;
  --pfm-ovulation-day: #FFCC80;
  --pfm-menstruation: #EF9A9A;

  /* Couleurs événements calendrier */
  --pfm-event-medical: #1565C0;
  --pfm-event-admin: #E65100;
  --pfm-event-milestone: #2E7D32;
  --pfm-event-warning: #F57C00;
}

/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Familles de polices
     ------------------------------------------------------------------------- */
  --pfm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pfm-font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
  --pfm-font-display: 'DM Serif Display', Georgia, serif;
  --pfm-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* -------------------------------------------------------------------------
     Tailles fluides (Fluid Typography)
     Échelle: 1.25 (Major Third)
     ------------------------------------------------------------------------- */
  --pfm-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --pfm-text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  --pfm-text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
  --pfm-text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  --pfm-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --pfm-text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --pfm-text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
  --pfm-text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
  --pfm-text-5xl: clamp(3rem, 2.25rem + 3.75vw, 4rem);

  /* -------------------------------------------------------------------------
     Line heights
     ------------------------------------------------------------------------- */
  --pfm-leading-none: 1;
  --pfm-leading-tight: 1.25;
  --pfm-leading-snug: 1.375;
  --pfm-leading-normal: 1.5;
  --pfm-leading-relaxed: 1.625;
  --pfm-leading-loose: 2;

  /* -------------------------------------------------------------------------
     Font weights
     ------------------------------------------------------------------------- */
  --pfm-font-light: 300;
  --pfm-font-normal: 400;
  --pfm-font-medium: 500;
  --pfm-font-semibold: 600;
  --pfm-font-bold: 700;
  --pfm-font-extrabold: 800;

  /* -------------------------------------------------------------------------
     Letter spacing
     ------------------------------------------------------------------------- */
  --pfm-tracking-tighter: -0.05em;
  --pfm-tracking-tight: -0.025em;
  --pfm-tracking-normal: 0;
  --pfm-tracking-wide: 0.025em;
  --pfm-tracking-wider: 0.05em;
  --pfm-tracking-widest: 0.1em;
}

/* ==========================================================================
   ESPACEMENTS
   ========================================================================== */

:root {
  --pfm-space-0: 0;
  --pfm-space-px: 1px;
  --pfm-space-0-5: 0.125rem;
  --pfm-space-1: 0.25rem;
  --pfm-space-1-5: 0.375rem;
  --pfm-space-2: 0.5rem;
  --pfm-space-2-5: 0.625rem;
  --pfm-space-3: 0.75rem;
  --pfm-space-3-5: 0.875rem;
  --pfm-space-4: 1rem;
  --pfm-space-5: 1.25rem;
  --pfm-space-6: 1.5rem;
  --pfm-space-7: 1.75rem;
  --pfm-space-8: 2rem;
  --pfm-space-9: 2.25rem;
  --pfm-space-10: 2.5rem;
  --pfm-space-11: 2.75rem;
  --pfm-space-12: 3rem;
  --pfm-space-14: 3.5rem;
  --pfm-space-16: 4rem;
  --pfm-space-20: 5rem;
  --pfm-space-24: 6rem;
  --pfm-space-28: 7rem;
  --pfm-space-32: 8rem;
  --pfm-space-36: 9rem;
  --pfm-space-40: 10rem;
}

/* ==========================================================================
   LAYOUT & CONTAINERS
   ========================================================================== */

:root {
  /* Breakpoints (pour référence JS) */
  --pfm-bp-xs: 480px;
  --pfm-bp-sm: 640px;
  --pfm-bp-md: 768px;
  --pfm-bp-lg: 1024px;
  --pfm-bp-xl: 1280px;
  --pfm-bp-2xl: 1536px;

  /* Containers */
  --pfm-container-xs: 480px;
  --pfm-container-sm: 640px;
  --pfm-container-md: 768px;
  --pfm-container-lg: 1024px;
  --pfm-container-xl: 1200px;
  --pfm-container-2xl: 1400px;

  /* Largeurs spécifiques */
  --pfm-content-width: 720px;
  --pfm-sidebar-width: 320px;
  --pfm-tool-width: 800px;
  --pfm-tool-width-narrow: 600px;
  --pfm-tool-width-wide: 1000px;
}

/* ==========================================================================
   BORDURES & RADIUS
   ========================================================================== */

:root {
  /* Border radius */
  --pfm-radius-none: 0;
  --pfm-radius-sm: 0.25rem;
  --pfm-radius-md: 0.5rem;
  --pfm-radius-lg: 0.75rem;
  --pfm-radius-xl: 1rem;
  --pfm-radius-2xl: 1.5rem;
  --pfm-radius-3xl: 2rem;
  --pfm-radius-full: 9999px;

  /* Border widths */
  --pfm-border-0: 0;
  --pfm-border-1: 1px;
  --pfm-border-2: 2px;
  --pfm-border-4: 4px;
  --pfm-border-8: 8px;

  /* Border color par défaut */
  --pfm-border-color: var(--pfm-gray-200);
  --pfm-border-color-dark: var(--pfm-gray-700);
}

/* ==========================================================================
   OMBRES
   ========================================================================== */

:root {
  --pfm-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pfm-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --pfm-shadow: 0 2px 8px rgb(0 0 0 / 0.08);
  --pfm-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --pfm-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --pfm-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --pfm-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --pfm-shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --pfm-shadow-none: none;

  /* Ombres colorées (hover states) */
  --pfm-shadow-primary: 0 4px 14px 0 rgb(147 96 247 / 0.3);
  --pfm-shadow-hover: 0 4px 16px rgb(0 0 0 / 0.12);

  /* Focus rings */
  --pfm-ring-primary: 0 0 0 3px rgb(147 96 247 / 0.2);
  --pfm-ring-error: 0 0 0 3px rgb(239 68 68 / 0.2);
  --pfm-ring-success: 0 0 0 3px rgb(16 185 129 / 0.2);
}

/* ==========================================================================
   TRANSITIONS & ANIMATIONS
   ========================================================================== */

:root {
  /* Durées */
  --pfm-duration-75: 75ms;
  --pfm-duration-100: 100ms;
  --pfm-duration-150: 150ms;
  --pfm-duration-200: 200ms;
  --pfm-duration-300: 300ms;
  --pfm-duration-500: 500ms;
  --pfm-duration-700: 700ms;
  --pfm-duration-1000: 1000ms;

  /* Easings */
  --pfm-ease-linear: linear;
  --pfm-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --pfm-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --pfm-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --pfm-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Transitions pré-composées */
  --pfm-transition-fast: 150ms ease;
  --pfm-transition-base: 200ms ease;
  --pfm-transition-slow: 300ms ease;
  --pfm-transition-slower: 500ms ease;

  /* Transitions spécifiques */
  --pfm-transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
  --pfm-transition-transform: transform 200ms ease;
  --pfm-transition-shadow: box-shadow 200ms ease;
  --pfm-transition-all: all 200ms ease;
}

/* ==========================================================================
   Z-INDEX
   ========================================================================== */

:root {
  --pfm-z-auto: auto;
  --pfm-z-0: 0;
  --pfm-z-10: 10;
  --pfm-z-20: 20;
  --pfm-z-30: 30;
  --pfm-z-40: 40;
  --pfm-z-50: 50;
  --pfm-z-dropdown: 100;
  --pfm-z-sticky: 200;
  --pfm-z-fixed: 300;
  --pfm-z-modal-backdrop: 400;
  --pfm-z-modal: 500;
  --pfm-z-popover: 600;
  --pfm-z-tooltip: 700;
  --pfm-z-toast: 800;
  --pfm-z-max: 9999;
}

/* ==========================================================================
   ALIAS OUTILS (Compatibilité avec anciens fichiers)
   Ces variables permettent la transition progressive des anciens fichiers
   ========================================================================== */

:root {
  /* Alias pour tools-base.css */
  --tool-primary: var(--pfm-primary-500);
  --tool-primary-dark: var(--pfm-primary-600);
  --tool-primary-light: var(--pfm-primary-100);
  --tool-success: var(--pfm-success-500);
  --tool-warning: var(--pfm-warning-500);
  --tool-error: var(--pfm-error-500);
  --tool-info: var(--pfm-info-500);
  --tool-bg: var(--pfm-gray-50);
  --tool-card-bg: var(--pfm-white);
  --tool-border: var(--pfm-gray-200);
  --tool-spacing: var(--pfm-space-6);
  --tool-spacing-sm: var(--pfm-space-4);
  --tool-spacing-lg: var(--pfm-space-8);
  --tool-radius: var(--pfm-radius-xl);
  --tool-radius-sm: var(--pfm-radius-lg);
  --tool-shadow: var(--pfm-shadow);
  --tool-shadow-hover: var(--pfm-shadow-hover);
  --tool-shadow-focus: var(--pfm-ring-primary);
  --tool-transition: var(--pfm-transition-base);

  /* Alias pour calendrier-grossesse.css */
  --cal-primary: var(--pfm-primary-500);
  --cal-primary-light: var(--pfm-primary-100);
  --cal-primary-dark: var(--pfm-primary-600);
  --cal-t1: var(--pfm-trimester-1);
  --cal-t2: var(--pfm-trimester-2);
  --cal-t3: var(--pfm-trimester-3);
  --cal-medical: var(--pfm-event-medical);
  --cal-admin: var(--pfm-event-admin);
  --cal-milestone: var(--pfm-event-milestone);
  --cal-warning: var(--pfm-event-warning);
}

/* ==========================================================================
   VARIABLES SÉMANTIQUES (Light Mode par défaut)
   ========================================================================== */

:root {
  /* Backgrounds sémantiques */
  --pfm-bg: var(--pfm-white);
  --pfm-bg-secondary: var(--pfm-gray-50);
  --pfm-bg-tertiary: var(--pfm-gray-100);
  --pfm-bg-elevated: var(--pfm-white);

  /* Textes sémantiques */
  --pfm-text: var(--pfm-gray-900);
  --pfm-text-secondary: var(--pfm-gray-600);
  --pfm-text-muted: var(--pfm-gray-400);
  --pfm-text-inverse: var(--pfm-white);

  /* Liens */
  --pfm-link: var(--pfm-primary-600);
  --pfm-link-hover: var(--pfm-primary-700);
  --pfm-link-visited: var(--pfm-primary-800);

  /* Bordures */
  --pfm-border: var(--pfm-gray-200);
  --pfm-border-strong: var(--pfm-gray-300);
  --pfm-border-focus: var(--pfm-primary-500);

  /* Focus ring */
  --pfm-focus-ring: var(--pfm-ring-primary);

  /* États interactifs */
  --pfm-hover-overlay: rgb(0 0 0 / 0.04);
  --pfm-active-overlay: rgb(0 0 0 / 0.08);
  --pfm-disabled-opacity: 0.5;
}

/* ==========================================================================
   DARK MODE
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Backgrounds */
    --pfm-bg: var(--pfm-gray-900);
    --pfm-bg-secondary: var(--pfm-gray-800);
    --pfm-bg-tertiary: var(--pfm-gray-700);
    --pfm-bg-elevated: var(--pfm-gray-800);

    /* Textes */
    --pfm-text: var(--pfm-gray-100);
    --pfm-text-secondary: var(--pfm-gray-400);
    --pfm-text-muted: var(--pfm-gray-500);
    --pfm-text-inverse: var(--pfm-gray-900);

    /* Liens */
    --pfm-link: var(--pfm-primary-400);
    --pfm-link-hover: var(--pfm-primary-300);
    --pfm-link-visited: var(--pfm-primary-500);

    /* Bordures */
    --pfm-border: var(--pfm-gray-700);
    --pfm-border-strong: var(--pfm-gray-600);
    --pfm-border-color: var(--pfm-gray-700);

    /* États interactifs */
    --pfm-hover-overlay: rgb(255 255 255 / 0.04);
    --pfm-active-overlay: rgb(255 255 255 / 0.08);

    /* Cards et surfaces outils */
    --tool-bg: var(--pfm-gray-800);
    --tool-card-bg: var(--pfm-gray-900);
    --tool-border: var(--pfm-gray-700);
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --pfm-transition-fast: 0.01ms;
    --pfm-transition-base: 0.01ms;
    --pfm-transition-slow: 0.01ms;
    --pfm-transition-slower: 0.01ms;
    --tool-transition: 0.01ms;
  }
}