/*
Theme Name:  French Aura
Theme URI:   https://french-aura.fr
Description: Thème custom premium pour French Aura — E-commerce Parfumerie de Luxe
Version:     1.0.0
Author:      EasyWayWeb
Author URI:  https://easywayweb.com
Text Domain: french-aura
*/

/* =============================================================================
   DESIGN SYSTEM — VARIABLES CSS
   ============================================================================= */

:root {
  /* --- Couleurs — base design system --- */
  --color-primary: #1a1a1a; /* Noir profond */
  --color-accent: #c9a96e; /* Or chaud — accent principal */
  --color-accent-dark: #a8834a; /* Or sombre */
  --color-accent-light: #e8d5b0; /* Or clair */
  --color-background: #ffffff; /* Blanc cassé — fond page */
  --color-surface: #ffffff; /* Blanc pur */
  --color-surface-alt: #f5f3ef; /* Fond alternatif */
  --color-border: #e8e4dc; /* Bordures */
  --color-text: #2c2c2c; /* Texte principal */
  --color-text-light: #888888; /* Texte secondaire */
  --color-text-muted: #bbbbbb; /* Texte désactivé */
  --color-muted: #888888; /* Alias utilisé dans main.css */
  --color-success: #4a7c59; /* Vert succès */
  --color-error: #c0392b; /* Rouge erreur */

  /* --- Couleurs — UI sombres (landing page) --- */
  --color-ui-dark: #0a0a0a; /* Bandeau promo, panier, boutons UI */
  --color-heading: #111827; /* Titres H1–H6 */
  --color-text-body: #4b5563; /* Corps de texte courant */
  --color-text-secondary: #6b7280; /* Labels, captions secondaires */
  --color-text-subtle: #9ca3af; /* Texte très léger */
  --color-text-dark: #374151; /* Texte désactivé / état grisé */

  /* --- Couleurs — fonds neutres (landing page) --- */
  --color-bg-subtle: #f9fafb; /* Fond très clair (nav hover, tableaux) */
  --color-border-light: #f3f4f6; /* Bordures légères */
  --color-input-bg: #f4f4f4; /* Fond des inputs */

  /* --- Couleurs — or / gold (variantes landing) --- */
  --color-gold-active: #c5a028; /* Barres de progression, badges actifs */
  --color-gold-hover: #9e801d; /* Hover boutons dorés */
  --color-gold-warm-1: #c76e1a;
  --color-gold-warm-2: #e4be25;

  /* --- Couleurs — shimmer skeleton --- */
  --color-shimmer-start: #1e1e1e;
  --color-shimmer-mid: #2a2a2a;

  /* --- Couleurs — feedback (landing page) --- */
  --color-red: #a63c30; /* Badges promo, alertes */
  --color-red-dark: #b91c1c; /* Variante rouge foncée */
  --color-red-bg: #fee2e2; /* Fond badge rouge */
  --color-green: #16a34a; /* Checkmarks, validations */

  /* --- Couleurs — nouvelles variables UI --- */
  --color-accent-wash: #f3e8c8;
  --color-accent-wash-alt: #f7f3ed;
  --color-accent-mist: #fcfaf6;
  --color-neutral-badge: #64748b; /* Badge gris-bleu "rare", "épuisé" */
  --color-focus-highlight: #feffc6; /* Fond jaune pâle pour input:focus */
  --color-stars: var(--color-gold-active); /* Étoiles review */

  /* --- Typographie --- */
  --font-serif: Montserrat, sans-serif;
  --font-sans: Montserrat, sans-serif;

  --text-xs: 0.75rem; /*  12px */
  --text-sm: 0.875rem; /*  14px */
  --text-base: 1rem; /*  16px */
  --text-lg: 1.25rem; /*  20px */
  --text-xl: 1.5rem; /*  24px */
  --text-2xl: 1.875rem; /*  30px */
  --text-3xl: 2.25rem; /*  36px */
  --text-4xl: 3rem; /*  48px */
  --text-5xl: 3.75rem; /*  60px */

  --leading-tight: 1.25;
  --leading-snug: 1.4;
  --leading-base: 1.6;
  --leading-relaxed: 1.75;
  --leading-loose: 1.9;

  --tracking-wide: 0.05em;
  --tracking-widest: 0.2em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

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

  /* --- Layout --- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --container-pad: var(--space-6);

  /* --- Bordures --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* --- Ombres --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.14);

  /* --- Animations --- */
  --transition-fast: 150ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  /* --- Z-index --- */
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
}