/*
 * v3-vars.css — Shared design tokens
 * Single source of truth for colors, layout, and typography variables.
 * Loaded before v3.css (Bootstrap legacy) and v3-pi.css (PrimeVue).
 */

:root {
	/* === Palette primaire (bleu corporate) === */
	--v3-primary-50:  #eff6ff;
	--v3-primary-100: #dbeafe;
	--v3-primary-200: #bfdbfe;
	--v3-primary-300: #93c5fd;
	--v3-primary-400: #60a5fa;
	--v3-primary-500: #3b82f6;
	--v3-primary-600: #2563eb;
	--v3-primary-700: #1d4ed8;
	--v3-primary-800: #1e40af;
	--v3-primary-900: #1e3a8a;
	--v3-primary-950: #172554;
	--v3-primary:        #2563eb;
	--v3-primary-hover:  #1d4ed8;
	--v3-primary-active: #1e40af;
	--v3-primary-light:  #eff6ff;
	--v3-primary-contrast: #ffffff;

	/* === Couleurs sémantiques === */
	--v3-success:        #22c55e;
	--v3-success-hover:  #16a34a;
	--v3-danger:         #ef4444;
	--v3-danger-hover:   #dc2626;
	--v3-warning:        #f59e0b;
	--v3-warning-hover:  #d97706;
	--v3-info:           #06b6d4;
	--v3-info-hover:     #0891b2;

	/* === Texte & surfaces === */
	--v3-text:         #1e293b;
	--v3-text-muted:   #64748b;
	--v3-border:       #e2e8f0;
	--v3-bg-surface:   #ffffff;
	--v3-bg-hover:     #f8fafc;
	--v3-bg-stripe:    #ebedef;
	--v3-bg-secondary: #f1f5f9;
	--v3-bg-content:   #f3f6f8;
	--v3-bg-muted:     #b7b7b7;

	/* === Layout === */
	--v3-font: 'Manrope', 'Open Sans', sans-serif;
	--v3-radius: 12px;
	--v3-radius-xs:6px;
	--v3-radius-sm: 8px;
	--v3-radius-lg: 15px;
	--v3-shadow: 0px 2px 4px -1px rgba(175,182,201,0.2);
	--v3-shadow-card: 0px 2px 4px -1px rgba(175,182,201,0.2);
	--v3-shadow-dropdown: 0px 0px 2px 0px rgba(145,158,171,0.2), 0px 12px 24px -4px rgba(145,158,171,0.12);
	--v3-sidebar-width: 250px;
	--v3-sidebar-mini: 80px;
	--v3-header-height: 60px;

	/* === Forms === */
	--v3-form-border: #dce3e8;
	--v3-form-radius: 6px;
	--v3-form-focus-border: var(--v3-primary-400);
	--v3-form-focus-ring: rgba(37, 99, 235, 0.12);
	--v3-form-placeholder: #94a3b8;

	/* === Toggle Switch === */
	--v3-switch-width: 44px;
	--v3-switch-height: 24px;
	--v3-switch-knob: 18px;
	--v3-switch-off-bg: #e2e8f0;
	--v3-switch-on-bg: var(--v3-success);
	--v3-switch-knob-color: #ffffff;

	/* === Transitions === */
	--v3-transition: 0.2s ease;

	/* === Sidebar (Left) — White theme (Matdash) === */
	--v3-sidebar-bg: #ffffff;
	--v3-sidebar-bg-hover: #f0f5ff;
	--v3-sidebar-bg-active: var(--v3-primary);
	--v3-sidebar-text: #29343d;
	--v3-sidebar-text-active: #ffffff;
	--v3-sidebar-text-hover: var(--v3-primary);
	--v3-sidebar-section-text: #7c8fac;
	--v3-sidebar-border: #e5eaef;
	--v3-sidebar-item-radius: 12px;

	/* === Topbar === */
	--v3-topbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	--v3-topbar-icon-color: #64748b;
	--v3-topbar-icon-hover: var(--v3-primary);
	--v3-topbar-separator: #e2e8f0;

	/* === Right Sidebar === */
	--v3-rsidebar-tab-bg: #1e2430;
	--v3-rsidebar-tab-active: var(--v3-primary);

	/* === Couleurs boutons (familles legacy modernisées) === */
	--v3-btn-primary:            #14b8a6;
	--v3-btn-primary-hover:      #0d9488;
	--v3-btn-success:            #2b99f1;
	--v3-btn-success-hover:      #1b89e1;
	--v3-btn-info:               #2a3f5f;
	--v3-btn-info-hover:         #1e3248;
	--v3-btn-warning:            #ffc563;
	--v3-btn-warning-hover:      #d97706;
	--v3-btn-danger:             #f25656;
	--v3-btn-danger-hover:       #dc2626;
	--v3-btn-danger-dark:        #dc2626;
	--v3-btn-danger-dark-hover:  #b91c1c;
	--v3-btn-dark:               #1e293b;
	--v3-btn-dark-hover:         #334155;

	/* === Subtle backgrounds (Matdash pattern) === */
	--v3-bg-primary-subtle: #eff6ff;
	--v3-bg-success-subtle: #ecfdf5;
	--v3-bg-danger-subtle: #fff1f2;
	--v3-bg-warning-subtle: #fff7ed;
	--v3-bg-info-subtle: #ecfeff;

	/* === Avatar === */
	--v3-avatar-size: 90px;
	--v3-avatar-border: 2px solid #e5eaef;
	--v3-avatar-bg: var(--v3-primary-100);
}

/* === Dark Menus Mode === */
html.dark-menus {
	--v3-sidebar-bg: #1a1f2c;
	--v3-sidebar-text: #c8d0da;
	--v3-sidebar-text-hover: #ffffff;
	--v3-sidebar-bg-hover: #252a35;
	--v3-sidebar-section-text: #5a6a80;
	--v3-sidebar-border: #2a3040;
	--v3-avatar-border: 2px solid #2a3040;
	--v3-avatar-bg: #252a35;
	--v3-topbar-icon-color: #c8d0da;
	--v3-topbar-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	--v3-topbar-separator: #2a3040;
}
/* Scope bg-surface/bg-secondary dark overrides to header + sidebar only */
html.dark-menus .header,
html.dark-menus .page-sidebar {
	--v3-bg-surface: #1b1e24;
	--v3-bg-secondary: #252a35;
}