/* ========================================
   Bloom'In - Design Tokens
   Variables CSS pour le front-end
   Synchronisées avec theme.json
   ======================================== */

:root {
  /* ========================================
     Colors (from theme.json)
     ======================================== */
  --color-primary: #7a815e;
  --color-primary-light: #a0a77e;
  --color-secondary: #b2b993;
  --color-highlight: #ba9636;

  --color-ivory-1: #f7ecdb;
  --color-ivory-2: #f0e3d1;
  --color-ivory-3: #fff6ea;
  --color-ivory-4: #fff4e5;

  --color-green-light: #edf0e0;

  --color-text: #7a815e;
  --color-text-light: #fff6ea;

  /* ========================================
     Typography
     ======================================== */
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Open Sans', sans-serif;

  /* ========================================
     Spacing (from theme.json)
     ======================================== */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 96px;
  --spacing-page: 288px;

  /* ========================================
     Border Radius
     ======================================== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* ========================================
     Transitions
     ======================================== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;

  /* ========================================
     WordPress CSS Variables Aliases
     Pour compatibilité avec les classes Gutenberg
     ======================================== */

  /* Colors */
  --wp--preset--color--primary: #7a815e;
  --wp--preset--color--primary-light: #a0a77e;
  --wp--preset--color--secondary: #b2b993;
  --wp--preset--color--highlight: #ba9636;
  --wp--preset--color--ivory-1: #f7ecdb;
  --wp--preset--color--ivory-2: #f0e3d1;
  --wp--preset--color--ivory-3: #fff6ea;
  --wp--preset--color--ivory-4: #fff4e5;
  --wp--preset--color--green-light: #edf0e0;
  --wp--preset--color--text: #7a815e;
  --wp--preset--color--text-light: #fff6ea;
}

/* ========================================
   Utility Classes - Colors
   ======================================== */

/* Text Colors */
.has-primary-color { color: var(--color-primary) !important; }
.has-primary-light-color { color: var(--color-primary-light) !important; }
.has-secondary-color { color: var(--color-secondary) !important; }
.has-highlight-color { color: var(--color-highlight) !important; }
.has-ivory-1-color { color: var(--color-ivory-1) !important; }
.has-ivory-2-color { color: var(--color-ivory-2) !important; }
.has-ivory-3-color { color: var(--color-ivory-3) !important; }
.has-ivory-4-color { color: var(--color-ivory-4) !important; }
.has-green-light-color { color: var(--color-green-light) !important; }
.has-text-color { color: var(--color-text) !important; }
.has-text-light-color { color: var(--color-text-light) !important; }
.has-white-color { color: #ffffff !important; }
.has-black-color { color: #000000 !important; }

/* Background Colors */
.has-primary-background-color { background-color: var(--color-primary) !important; }
.has-primary-light-background-color { background-color: var(--color-primary-light) !important; }
.has-secondary-background-color { background-color: var(--color-secondary) !important; }
.has-highlight-background-color { background-color: var(--color-highlight) !important; }
.has-ivory-1-background-color { background-color: var(--color-ivory-1) !important; }
.has-ivory-2-background-color { background-color: var(--color-ivory-2) !important; }
.has-ivory-3-background-color { background-color: var(--color-ivory-3) !important; }
.has-ivory-4-background-color { background-color: var(--color-ivory-4) !important; }
.has-green-light-background-color { background-color: var(--color-green-light) !important; }
.has-text-background-color { background-color: var(--color-text) !important; }
.has-text-light-background-color { background-color: var(--color-text-light) !important; }
.has-white-background-color { background-color: #ffffff !important; }
.has-black-background-color { background-color: #000000 !important; }

/* ========================================
   Utility Classes - Spacing
   ======================================== */

/* Padding */
.has-xs-padding { padding: var(--spacing-xs) !important; }
.has-sm-padding { padding: var(--spacing-sm) !important; }
.has-md-padding { padding: var(--spacing-md) !important; }
.has-lg-padding { padding: var(--spacing-lg) !important; }
.has-xl-padding { padding: var(--spacing-xl) !important; }
.has-2xl-padding { padding: var(--spacing-2xl) !important; }
.has-3xl-padding { padding: var(--spacing-3xl) !important; }

/* Margin */
.has-xs-margin { margin: var(--spacing-xs) !important; }
.has-sm-margin { margin: var(--spacing-sm) !important; }
.has-md-margin { margin: var(--spacing-md) !important; }
.has-lg-margin { margin: var(--spacing-lg) !important; }
.has-xl-margin { margin: var(--spacing-xl) !important; }
.has-2xl-margin { margin: var(--spacing-2xl) !important; }
.has-3xl-margin { margin: var(--spacing-3xl) !important; }

/* Gap */
.has-xs-gap { gap: var(--spacing-xs) !important; }
.has-sm-gap { gap: var(--spacing-sm) !important; }
.has-md-gap { gap: var(--spacing-md) !important; }
.has-lg-gap { gap: var(--spacing-lg) !important; }
.has-xl-gap { gap: var(--spacing-xl) !important; }
.has-2xl-gap { gap: var(--spacing-2xl) !important; }
.has-3xl-gap { gap: var(--spacing-3xl) !important; }

/* ========================================
   Utility Classes - Border Radius
   ======================================== */

.has-sm-radius { border-radius: var(--radius-sm) !important; }
.has-md-radius { border-radius: var(--radius-md) !important; }
.has-lg-radius { border-radius: var(--radius-lg) !important; }
.has-xl-radius { border-radius: var(--radius-xl) !important; }