/* =========================================================
   AGAPE SHOP — VARIABLES & DESIGN SYSTEM
   ========================================================= */

:root {
    /* Brand Colors */
    --color-primary: #0f172a;       /* Slate 900 - Éléments principaux */
    --color-primary-hover: #1e293b; /* Slate 800 */
    --color-accent: #e11d48;        /* Rose 600 / Accent moderne */
    --color-accent-hover: #be123c;  /* Rose 700 */
    
    /* Neutrals */
    --color-bg: #f8fafc;            /* Slate 50 */
    --color-surface: #ffffff;
    --color-surface-subtle: #f1f5f9;
    --color-text-main: #0f172a;
    --color-text-muted: #64748b;    /* Slate 500 */
    --color-border: #e2e8f0;       /* Slate 200 */
    
    /* Functional Status */
    --color-success: #10b981;
    --color-success-bg: #ecfdf5;
    --color-warning: #f59e0b;
    --color-warning-bg: #fffbeb;
    --color-danger: #ef4444;
    --color-danger-bg: #fef2f2;

    /* Typography */
    --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    
    /* Spacing & Sizing */
    --container-max-width: 1280px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Elevation & Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}