/**
 * Design tokens — Taxi Gui
 * Variables CSS du système de design. Importé en premier.
 */

:root {
	/* === PALETTE PREMIUM (Crème sable + or chaleureux Provence) === */
	--premium-bg:           #F6F1E8;  /* sable doux */
	--premium-bg-alt:       #EFE6D2;  /* sable plus chaud (sections alternées) */
	--premium-bg-elevated:  #FFFFFF;  /* cartes blanches */
	--premium-accent:       #B08940;  /* or chaud profond */
	--premium-accent-hover: #8C6C2C;  /* or bronze foncé (hover) */
	--premium-accent-light: #E9D9A8;  /* or doré clair (badges, pills) */
	--premium-ink:          #1A1A1A;  /* texte principal noir doux */
	--premium-ink-soft:     #4A4A4A;  /* texte secondaire */
	--premium-text:         #1A1A1A;
	--premium-text-muted:   #8A8175;  /* texte tertiaire */
	--premium-border:       #E6DCC7;  /* bordures discrètes sable */
	--premium-panel:        #1A1A1A;  /* panneaux sombres (sticky simulateur, header) */
	--premium-panel-ink:    #F0E8D2;  /* texte sur fond sombre */

	/* === PALETTE MÉDICALE (Bleu doux moderne) === */
	--medical-bg:           #FFFFFF;
	--medical-bg-alt:       #EDF4FA;
	--medical-bg-elevated:  #F8FBFD;
	--medical-primary:      #2A6FBA;
	--medical-primary-hover:#1F5694;
	--medical-signature:    #29ABE2;
	--medical-soft:         #B5DCEE;
	--medical-text:         #1F2937;
	--medical-text-muted:   #6B7280;
	--medical-border:       #E5E7EB;

	/* === COULEURS PARTAGÉES === */
	--color-success: #4CAF8E;
	--color-warning: #F59E0B;
	--color-danger:  #DC2626;
	--color-info:    #29ABE2;
	--color-whatsapp:#25D366;

	/* === TYPO === */
	--font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	--fs-xs:    12px;
	--fs-sm:    14px;
	--fs-base:  16px;
	--fs-md:    18px;
	--fs-lg:    20px;
	--fs-xl:    24px;
	--fs-2xl:   32px;
	--fs-3xl:   40px;
	--fs-4xl:   56px;
	--fs-5xl:   72px;

	--lh-tight:   1.1;
	--lh-snug:    1.25;
	--lh-normal:  1.5;
	--lh-relaxed: 1.65;

	/* === ESPACEMENTS === */
	--space-xs:  4px;
	--space-sm:  8px;
	--space-md:  16px;
	--space-lg:  24px;
	--space-xl:  40px;
	--space-2xl: 64px;
	--space-3xl: 96px;
	--space-4xl: 128px;

	/* === RADII === */
	--radius-sm:   4px;
	--radius-md:   8px;
	--radius-lg:   16px;
	--radius-xl:   24px;
	--radius-pill: 999px;

	/* === SHADOWS === */
	--shadow-sm: 0 1px 2px rgba(0,0,0,.06);
	--shadow-md: 0 4px 12px rgba(0,0,0,.08);
	--shadow-lg: 0 12px 32px rgba(0,0,0,.12);
	--shadow-xl: 0 24px 64px rgba(0,0,0,.18);
	--shadow-premium-glow: 0 0 32px rgba(201, 169, 97, 0.25);

	/* === TRANSITIONS === */
	--transition-fast:   120ms ease-out;
	--transition-base:   200ms ease-out;
	--transition-slow:   320ms ease-out;

	/* === LAYOUT === */
	--container-max:  1200px;
	--container-wide: 1400px;
	--container-narrow: 800px;
	--header-height: 80px;
	--header-height-mobile: 64px;

	/* === Z-INDEX === */
	--z-base:    1;
	--z-sticky:  100;
	--z-header:  500;
	--z-overlay: 800;
	--z-modal:   900;
	--z-toast:   1000;
}

/* === Mode par défaut = PREMIUM (crème sable + or chaleureux) === */
:root {
	--bg:           var(--premium-bg);
	--bg-alt:       var(--premium-bg-alt);
	--bg-elevated:  var(--premium-bg-elevated);
	--accent:       var(--premium-accent);
	--accent-hover: var(--premium-accent-hover);
	--text:         var(--premium-text);
	--text-muted:   var(--premium-text-muted);
	--border:       var(--premium-border);
	--font-titles:  var(--font-display);
	/* Couleur du texte AU-DESSUS d'un fond accent (boutons, badges, hover ghost…) */
	--on-accent:    #FFFFFF;
}

/* === Mode médical (appliqué sur body.is-medical) === */
body.is-medical {
	--bg:           var(--medical-bg);
	--bg-alt:       var(--medical-bg-alt);
	--bg-elevated:  var(--medical-bg-elevated);
	--accent:       var(--medical-primary);
	--accent-hover: var(--medical-primary-hover);
	--text:         var(--medical-text);
	--text-muted:   var(--medical-text-muted);
	--border:       var(--medical-border);
	--font-titles:  var(--font-body);
	--on-accent:    #FFFFFF;
}