/**
 * CSS Custom Properties (Variables)
 * Design token system for La Fille du Fleuriste
 * Mobile-first responsive design foundation
 */

/* ===== Polices — toutes auto-hébergées ===== */
@font-face { font-family: 'Great Vibes'; src: url('../fonts/great-vibes-v21-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Kapakana'; src: url('../fonts/kapakana-v19-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-v17-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-v17-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/dm-sans-v17-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gowun Batang'; src: url('../fonts/gowun-batang-v12-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Gowun Batang'; src: url('../fonts/gowun-batang-v12-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Assistant'; src: url('../fonts/assistant-v24-latin-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Assistant'; src: url('../fonts/assistant-v24-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Assistant'; src: url('../fonts/assistant-v24-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ===== Brand Colors ===== */
  --color-primary: #c9a961;
  --color-primary-dark: #b39551;
  --color-primary-light: #d4b87b;

  --color-secondary: #b8b8b8;
  --color-secondary-dark: #7a7a7a;

  --color-text: #5a5a5a;
  --color-text-light: #7a7a7a;
  --color-text-dark: #3a3a3a;

  --color-bg: #fffaf9;
  --color-bg-light: #ffffff;
  --color-bg-dark: #e8e6e3;

  --color-border: #e8e8e8;
  --color-border-light: #f0f0f0;

  /* Status Colors */
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --color-error: #d9534f;
  --color-info: #2196f3;

  /* ===== Spacing Scale (8px base) ===== */
  /* Mobile-first: smaller spacing for mobile, increase with media queries */
  --space-2xs: 0.25rem; /* 4px */
  --space-xs: 0.5rem; /* 8px */
  --space-sm: 0.75rem; /* 12px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.5rem; /* 24px */
  --space-xl: 2rem; /* 32px */
  --space-2xl: 3rem; /* 48px */
  --space-3xl: 4rem; /* 64px */
  --space-4xl: 6rem; /* 96px */

  /* ===== Typography ===== */
  /* Font Families */
  --font-hero: 'Great Vibes', cursive; /* Très grands titres — Regular */
  --font-logo: 'Great Vibes', cursive; /* Logo marque */
  --font-display: 'DM Sans', sans-serif; /* Grands titres — Bold */
  --font-subtitle: 'Gowun Batang', serif; /* Sous-titres — Bold */
  --font-body: 'DM Sans', sans-serif; /* Texte courant — Regular */
  --font-description: 'Gowun Batang', serif; /* Descriptions produit/catégorie — Regular */
  --font-small: 'Gowun Batang', serif; /* Petits textes — Regular */
  --font-assistant: 'Assistant', sans-serif; /* Petits textes alt — Regular */
  --font-system:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Font Sizes - Mobile-first */
  --text-2xs: 0.625rem; /* 10px */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 0.95rem; /* 15.2px */
  --text-lg: 1.1rem; /* 17.6px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.75rem; /* 28px - mobile h1 */
  --text-3xl: 2.25rem; /* 36px - tablet h1 */
  --text-4xl: 2.8rem; /* 44.8px - desktop h1 */

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

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

  /* ===== Layout & Sizing ===== */
  /* Breakpoints (for reference in JS) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1400px;

  /* Container Max Widths */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1400px;

  /* Header Heights */
  --header-height-mobile: 70px;
  --header-height-tablet: 90px;
  --header-height-desktop: 110px;

  /* Touch Targets (WCAG 2.1 AA - minimum 44x44px) */
  --touch-target-min: 44px;
  --touch-target-comfortable: 48px;

  /* ===== Border Radius ===== */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-2xl: 30px;
  --radius-full: 9999px;

  /* ===== Shadows ===== */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);

  /* ===== Transitions ===== */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-slower: 0.5s ease;

  /* Easing Functions */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ===== Z-Index Layers ===== */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1999;
  --z-modal: 2000;
  --z-popover: 2100;
  --z-tooltip: 2200;
  --z-notification: 3000;

  /* ===== Opacity ===== */
  --opacity-disabled: 0.5;
  --opacity-hover: 0.8;
  --opacity-overlay: 0.4;

  /* ===== Grid & Gaps ===== */
  --gap-grid-mobile: var(--space-md);
  --gap-grid-tablet: var(--space-lg);
  --gap-grid-desktop: var(--space-xl);

  --nav-gap-mobile: var(--space-lg);
  --nav-gap-tablet: var(--space-2xl);
  --nav-gap-desktop: 150px; /* Original design */
}

/* ===== Tablet+ Adjustments ===== */
@media (min-width: 768px) {
  :root {
    /* Increase spacing for larger screens */
    --space-md: 1.25rem; /* 20px */
    --space-lg: 2rem; /* 32px */
    --space-xl: 2.5rem; /* 40px */
    --space-2xl: 3.5rem; /* 56px */

    /* Larger typography */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.5rem; /* 24px */
  }
}

/* ===== Desktop Adjustments ===== */
@media (min-width: 1024px) {
  :root {
    /* Even more generous spacing */
    --space-xl: 3rem; /* 48px */
    --space-2xl: 4rem; /* 64px */
    --space-3xl: 5rem; /* 80px */
  }
}