/**
 * Design Tokens — Site vitrine izibrick
 *
 * Copie adaptée des couches 1+2 de
 * public/templates/template-default/assets/css/design-tokens.css
 * (volontairement découplée : les tokens du template-default sont
 * surchargés par les thèmes des sites clients).
 *
 * Architecture :
 * - Couche 1 : Primitifs (valeurs brutes)
 * - Couche 2 : Sémantiques (rôles fonctionnels)
 * - Couche 3 : Composants vitrine
 */

/* ============================================================
   COUCHE 1 — PRIMITIFS
   ============================================================ */

:root {
    /* ─── Palette primitive ─── */
    --primitive-blue-50:   #eff6ff;
    --primitive-blue-100:  #dbeafe;
    --primitive-blue-500:  #3b82f6;
    --primitive-blue-600:  #2563eb;
    --primitive-blue-700:  #1d4ed8;
    --primitive-blue-900:  #1e3a8a;

    --primitive-purple-50:  #faf5ff;
    --primitive-purple-500: #a855f7;
    --primitive-purple-600: #9333ea;
    --primitive-purple-700: #7c3aed;

    --primitive-gray-0:   #ffffff;
    --primitive-gray-50:  #f8fafc;
    --primitive-gray-100: #f1f5f9;
    --primitive-gray-200: #e2e8f0;
    --primitive-gray-300: #cbd5e1;
    --primitive-gray-400: #94a3b8;
    --primitive-gray-500: #64748b;
    --primitive-gray-600: #475569;
    --primitive-gray-700: #334155;
    --primitive-gray-800: #1e293b;
    --primitive-gray-900: #0f172a;

    --primitive-green-100: #dcfce7;
    --primitive-green-500: #22c55e;
    --primitive-green-600: #16a34a;
    --primitive-green-700: #15803d;

    --primitive-red-100:   #fee2e2;
    --primitive-red-500:   #ef4444;
    --primitive-red-600:   #dc2626;
    --primitive-red-700:   #b91c1c;

    --primitive-amber-100: #fef3c7;
    --primitive-amber-500: #f59e0b;
    --primitive-amber-600: #d97706;

    /* ─── Échelle typographique ─── */
    --primitive-size-xs:   0.75rem;   /* 12px */
    --primitive-size-sm:   0.875rem;  /* 14px */
    --primitive-size-base: 1rem;      /* 16px */
    --primitive-size-lg:   1.125rem;  /* 18px */
    --primitive-size-xl:   1.25rem;   /* 20px */
    --primitive-size-2xl:  1.5rem;    /* 24px */
    --primitive-size-3xl:  1.875rem;  /* 30px */
    --primitive-size-4xl:  2.25rem;   /* 36px */
    --primitive-size-5xl:  3rem;      /* 48px */

    /* ─── Échelle d'espacement ─── */
    --primitive-space-0:   0;
    --primitive-space-1:   0.25rem;   /* 4px */
    --primitive-space-2:   0.5rem;    /* 8px */
    --primitive-space-3:   0.75rem;   /* 12px */
    --primitive-space-4:   1rem;      /* 16px */
    --primitive-space-5:   1.25rem;   /* 20px */
    --primitive-space-6:   1.5rem;    /* 24px */
    --primitive-space-8:   2rem;      /* 32px */
    --primitive-space-10:  2.5rem;    /* 40px */
    --primitive-space-12:  3rem;      /* 48px */
    --primitive-space-16:  4rem;      /* 64px */
    --primitive-space-20:  5rem;      /* 80px */
    --primitive-space-24:  6rem;      /* 96px */
}

/* ============================================================
   COUCHE 2 — TOKENS SÉMANTIQUES
   ============================================================ */

:root {
    /* ─── Couleurs ─── */
    --color-primary:       #667eea;
    --color-primary-dark:  #5a6fd6;
    --color-secondary:     #764ba2;
    --color-text:          #1e293b;
    --color-text-light:    #64748b;
    --color-text-muted:    #94a3b8;
    --color-background:    #ffffff;
    --color-surface:       #f8fafc;
    --color-surface-alt:   #f1f5f9;
    --color-border:        #e2e8f0;
    --color-border-strong: #cbd5e1;

    --color-success:        var(--primitive-green-600);
    --color-success-light:  var(--primitive-green-100);
    --color-error:          var(--primitive-red-600);
    --color-error-light:    var(--primitive-red-100);
    --color-warning:        var(--primitive-amber-600);
    --color-warning-light:  var(--primitive-amber-100);
    --color-info:           var(--primitive-blue-600);
    --color-info-light:     var(--primitive-blue-100);

    /* ─── Typographie ─── */
    /* Vitrine : Inter uniquement (pas de Playfair) */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: var(--font-primary);

    --text-xs:   var(--primitive-size-xs);
    --text-sm:   var(--primitive-size-sm);
    --text-base: var(--primitive-size-base);
    --text-lg:   var(--primitive-size-lg);
    --text-xl:   var(--primitive-size-xl);
    --text-2xl:  var(--primitive-size-2xl);
    --text-3xl:  var(--primitive-size-3xl);
    --text-4xl:  var(--primitive-size-4xl);
    --text-5xl:  var(--primitive-size-5xl);

    /* Tailles fluides (mobile-first, clamp) */
    --text-hero:     clamp(2rem, 4.5vw + 1rem, 3.5rem);
    --text-h2:       clamp(1.5rem, 2.5vw + 0.75rem, 2.25rem);
    --text-h3:       clamp(1.25rem, 1.5vw + 0.6rem, 1.5rem);
    --text-lead:     clamp(1.0625rem, 0.8vw + 0.9rem, 1.25rem);
    --section-pad:   clamp(3rem, 8vw, 6rem);

    /* Poids */
    --font-weight-normal:    400;
    --font-weight-medium:    500;
    --font-weight-semibold:  600;
    --font-weight-bold:      700;
    --font-weight-extrabold: 800;

    /* Interlignage */
    --leading-none:    1;
    --leading-tight:   1.2;
    --leading-snug:    1.375;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    /* Tracking */
    --tracking-tight:  -0.025em;
    --tracking-normal: 0;
    --tracking-wide:   0.025em;
    --tracking-wider:  0.05em;
    --tracking-widest: 0.1em;

    /* ─── Espacements sémantiques ─── */
    --spacing-xs:  var(--primitive-space-2);
    --spacing-sm:  var(--primitive-space-4);
    --spacing-md:  var(--primitive-space-6);
    --spacing-lg:  var(--primitive-space-10);
    --spacing-xl:  var(--primitive-space-16);
    --spacing-2xl: var(--primitive-space-24);

    /* ─── Ombres ─── */
    --shadow-xs:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-sm:   0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
    --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
    --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
    --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
    --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.25);

    --shadow-primary-sm: 0 4px 14px rgba(102, 126, 234, 0.25);
    --shadow-primary-md: 0 8px 25px rgba(102, 126, 234, 0.35);
    --shadow-primary-lg: 0 15px 40px rgba(102, 126, 234, 0.40);

    /* ─── Border radius ─── */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   0.75rem;
    --radius-xl:   1rem;
    --radius-2xl:  1.5rem;
    --radius-full: 9999px;

    /* ─── Z-index ─── */
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;

    /* ─── Transitions ─── */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ─── Layout ─── */
    --container-max:     1200px;
    --container-padding: var(--primitive-space-4);
}

/* ============================================================
   COUCHE 3 — COMPOSANTS VITRINE
   ============================================================ */

:root {
    /* ─── Marque ─── */
    --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    --gradient-brand-soft: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);

    /* ─── Header ─── */
    --header-height: 64px;
    --header-bg:     rgba(255, 255, 255, 0.92);

    /* ─── Boutons ─── */
    --btn-radius:     var(--radius-full);
    --btn-font-weight: var(--font-weight-semibold);
    --btn-focus-ring: 0 0 0 3px rgba(102, 126, 234, 0.4);

    /* ─── Cartes ─── */
    --card-bg:           var(--color-background);
    --card-radius:       var(--radius-xl);
    --card-shadow:       var(--shadow-sm);
    --card-shadow-hover: var(--shadow-xl);
    --card-padding:      var(--spacing-md);

    /* ─── Formulaires ─── */
    --input-radius:       var(--radius-md);
    --input-border:       1px solid var(--color-border);
    --input-shadow-focus: 0 0 0 3px rgba(102, 126, 234, 0.15);

    /* ─── Footer ─── */
    --footer-bg:         var(--primitive-gray-900);
    --footer-text:       rgba(255, 255, 255, 0.7);
    --footer-link-hover: #ffffff;
}