/**
 * Dresium CSS Variables (Design Tokens)
 *
 * Centralizes all design decisions for easy theming and maintenance
 *
 * @package Dresium
 * @version 2.0.0
 */

:root {
	/* ============================================
	   COLORS - Palette principale
	   ============================================ */
	
	/* Primary Colors */
	--dresium-primary: #4362db;
	--dresium-primary-hover: #3451c9;
	--dresium-primary-light: #6b84e8;
	--dresium-primary-dark: #2d4aa5;

	/* Gradient */
	--dresium-gradient: linear-gradient(90deg, rgb(76, 110, 245) 0%, rgb(155, 81, 224) 100%); /* RG-WEBDEV: BK -> linear-gradient(90deg, #4C6EF5 0%, #7C3AED 100%); */
	--dresium-gradient-hover: linear-gradient(90deg, #4C6EF5 0%, #4C6EF5 100%); /* RG-WEBDEV: BK -> linear-gradient(90deg, #3b5ce4 0%, #6b2adc 100%);

	/* Neutral Colors */
	--dresium-white: #ffffff;
	--dresium-black: #000000;
	--dresium-gray-50: #f9fafb;
	--dresium-gray-100: #f3f4f6;
	--dresium-gray-200: #e5e7eb;
	--dresium-gray-300: #d1d5db;
	--dresium-gray-400: #9ca3af;
	--dresium-gray-500: #6b7280;
	--dresium-gray-600: #4b5563;
	--dresium-gray-700: #374151;
	--dresium-gray-800: #1f2937;
	--dresium-gray-900: #111827;

	/* Semantic Colors */
	--dresium-success: #10b981;
	--dresium-success-light: #d1fae5;
	--dresium-error: #ef4444;
	--dresium-error-light: #fee2e2;
	--dresium-warning: #f59e0b;
	--dresium-warning-light: #fef3c7;
	--dresium-info: #3b82f6;
	--dresium-info-light: #dbeafe;

	/* ============================================
	   TYPOGRAPHY
	   ============================================ */

	/* Font Families */
	--dresium-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--dresium-font-secondary: 'Poppins', sans-serif;
	--dresium-font-display: 'League Spartan', sans-serif;

	/* Font Sizes */
	--dresium-text-xs: 0.75rem;    /* 12px */
	--dresium-text-sm: 0.875rem;   /* 14px */
	--dresium-text-base: 1rem;     /* 16px */
	--dresium-text-lg: 1.125rem;   /* 18px */
	--dresium-text-xl: 1.25rem;    /* 20px */
	--dresium-text-2xl: 1.5rem;    /* 24px */
	--dresium-text-3xl: 1.875rem;  /* 30px */
	--dresium-text-4xl: 2.25rem;   /* 36px */

	/* Font Weights */
	--dresium-weight-normal: 400;
	--dresium-weight-medium: 500;
	--dresium-weight-semibold: 600;
	--dresium-weight-bold: 700;

	/* Line Heights */
	--dresium-leading-tight: 1.25;
	--dresium-leading-normal: 1.5;
	--dresium-leading-relaxed: 1.75;

	/* ============================================
	   SPACING
	   ============================================ */

	--dresium-space-1: 0.25rem;   /* 4px */
	--dresium-space-2: 0.5rem;    /* 8px */
	--dresium-space-3: 0.75rem;   /* 12px */
	--dresium-space-4: 1rem;      /* 16px */
	--dresium-space-5: 1.25rem;   /* 20px */
	--dresium-space-6: 1.5rem;    /* 24px */
	--dresium-space-8: 2rem;      /* 32px */
	--dresium-space-10: 2.5rem;   /* 40px */
	--dresium-space-12: 3rem;     /* 48px */
	--dresium-space-16: 4rem;     /* 64px */

	/* ============================================
	   BORDER RADIUS
	   ============================================ */

	--dresium-radius-sm: 0.25rem;   /* 4px */
	--dresium-radius-base: 0.375rem; /* 6px */
	--dresium-radius-md: 0.5rem;    /* 8px */
	--dresium-radius-lg: 0.75rem;   /* 12px */
	--dresium-radius-xl: 1rem;      /* 16px */
	--dresium-radius-2xl: 1.5rem;   /* 24px */
	--dresium-radius-full: 9999px;

	/* Modal specific */
	--dresium-modal-radius: 1.5625rem; /* 25px - dal prototipo */

	/* ============================================
	   SHADOWS
	   ============================================ */

	--dresium-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--dresium-shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
	--dresium-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
	--dresium-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--dresium-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--dresium-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

	/* Modal specific */
	--dresium-modal-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.4);

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

	--dresium-z-base: 1;
	--dresium-z-dropdown: 100;
	--dresium-z-sticky: 200;
	--dresium-z-fixed: 300;
	--dresium-z-modal-backdrop: 9998;
	--dresium-z-modal: 9999;
	--dresium-z-popover: 10000;
	--dresium-z-tooltip: 10001;

	/* ============================================
	   TRANSITIONS
	   ============================================ */

	--dresium-transition-fast: 150ms;
	--dresium-transition-base: 200ms;
	--dresium-transition-slow: 300ms;
	--dresium-transition-slower: 500ms;

	--dresium-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--dresium-ease-in: cubic-bezier(0.4, 0, 1, 1);
	--dresium-ease-out: cubic-bezier(0, 0, 0.2, 1);
	--dresium-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

	/* ============================================
	   BREAKPOINTS (for reference in JS)
	   ============================================ */

	--dresium-breakpoint-sm: 640px;
	--dresium-breakpoint-md: 768px;
	--dresium-breakpoint-lg: 1024px;
	--dresium-breakpoint-xl: 1280px;
	--dresium-breakpoint-2xl: 1536px;

	/* ============================================
	   MODAL SPECIFICS
	   ============================================ */

	--dresium-modal-width-sm: 400px;
	--dresium-modal-width-base: 500px;
	--dresium-modal-width-lg: 600px;
	--dresium-modal-width-xl: 800px;

	--dresium-modal-padding: var(--dresium-space-6);
	--dresium-modal-header-height: 60px;

	/* ============================================
	   GALLERY SPECIFICS
	   ============================================ */

	--dresium-gallery-columns: 3;
	--dresium-gallery-gap: var(--dresium-space-4);
	--dresium-gallery-thumb-size: 300px;
}