/**
 * Design System Tokens — izibrick Template Default
 *
 * Charte graphique unifiée pour tous les thèmes.
 * Ces tokens constituent la source de vérité du design system.
 * Les thèmes (themes/*.css) surchargent uniquement les variables de couleur et typographie.
 *
 * Architecture des tokens :
 * - Couche 1 : Primitifs (valeurs brutes)
 * - Couche 2 : Sémantiques (rôles fonctionnels)
 * - Couche 3 : Composants (usage spécifique)
 */

/* ============================================================
   COUCHE 1 — PRIMITIFS
   Valeurs de base, ne jamais utiliser directement dans les composants
   ============================================================ */

:root {
    /* ─── Palette de couleurs primitives ─── */
    --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 de taille 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
   Rôles fonctionnels — utiliser ces tokens dans les composants
   ============================================================ */

:root {
    /* ─── Couleurs sémantiques (définies par les thèmes) ─── */
    /* Ces variables sont les seules à être surchargées par les thèmes */
    --color-primary:     #667eea;
    --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;

    /* Couleurs d'état — communes à tous les thèmes */
    --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 ─── */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Tailles */
    --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 responsive H1-H6 */
    --heading-h1: var(--primitive-size-5xl);
    --heading-h2: var(--primitive-size-4xl);
    --heading-h3: var(--primitive-size-3xl);
    --heading-h4: var(--primitive-size-2xl);
    --heading-h5: var(--primitive-size-xl);
    --heading-h6: var(--primitive-size-base);

    /* 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;
    --leading-loose:   2;

    /* Tracking (letter-spacing) */
    --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);   /* 8px */
    --spacing-sm:  var(--primitive-space-4);   /* 16px */
    --spacing-md:  var(--primitive-space-6);   /* 24px */
    --spacing-lg:  var(--primitive-space-10);  /* 40px */
    --spacing-xl:  var(--primitive-space-16);  /* 64px */
    --spacing-2xl: var(--primitive-space-24);  /* 96px */

    /* ─── Ombres ─── */
    --shadow-none: none;
    --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-inner:inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);

    /* Ombres colorées (adaptées au thème via fallback) */
    --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-none: 0;
    --radius-xs:   0.125rem;   /* 2px */
    --radius-sm:   0.25rem;    /* 4px */
    --radius-md:   0.5rem;     /* 8px */
    --radius-lg:   0.75rem;    /* 12px */
    --radius-xl:   1rem;       /* 16px */
    --radius-2xl:  1.5rem;     /* 24px */
    --radius-full: 9999px;

    /* ─── Z-index ─── */
    --z-below:    -1;
    --z-base:      0;
    --z-raised:    10;
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-overlay:   300;
    --z-modal:     400;
    --z-toast:     500;
    --z-tooltip:   600;

    /* ─── Transitions ─── */
    --transition-duration-fast:   150ms;
    --transition-duration-base:   300ms;
    --transition-duration-slow:   500ms;
    --transition-duration-slower: 700ms;
    --transition-easing-linear:   linear;
    --transition-easing-in:       cubic-bezier(0.4, 0, 1, 1);
    --transition-easing-out:      cubic-bezier(0, 0, 0.2, 1);
    --transition-easing-inout:    cubic-bezier(0.4, 0, 0.2, 1);

    /* Raccourcis transition */
    --transition-fast: var(--transition-duration-fast) var(--transition-easing-inout);
    --transition-base: var(--transition-duration-base) var(--transition-easing-inout);
    --transition-slow: var(--transition-duration-slow) var(--transition-easing-inout);

    /* ─── Breakpoints (référence, non utilisables en CSS natif) ─── */
    /* Utiliser uniquement en JS ou dans les media queries explicites */
    --breakpoint-sm:  640px;
    --breakpoint-md:  768px;
    --breakpoint-lg:  1024px;
    --breakpoint-xl:  1200px;
    --breakpoint-2xl: 1400px;

    /* ─── Layout ─── */
    --container-max:      1200px;
    --container-max-wide: 1320px;
    --container-padding:  1.5rem;
    --header-height:      75px;
}

/* ============================================================
   COUCHE 3 — TOKENS DE COMPOSANTS
   Tokens spécifiques aux composants réutilisables
   ============================================================ */

:root {
    /* ─── Boutons ─── */
    --btn-padding-y:        0.875rem;
    --btn-padding-x:        2rem;
    --btn-padding-y-sm:     0.5rem;
    --btn-padding-x-sm:     1rem;
    --btn-padding-y-lg:     1.125rem;
    --btn-padding-x-lg:     2.5rem;
    --btn-font-weight:      var(--font-weight-semibold);
    --btn-border-radius:    var(--radius-md);
    --btn-transition:       all var(--transition-base);
    --btn-focus-ring:       0 0 0 3px rgba(102, 126, 234, 0.4);

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

    /* ─── Formulaires ─── */
    --input-bg:             var(--color-background);
    --input-border:         1px solid var(--color-border);
    --input-border-focus:   1px solid var(--color-primary);
    --input-border-error:   1px solid var(--color-error);
    --input-radius:         var(--radius-md);
    --input-padding-y:      0.75rem;
    --input-padding-x:      1rem;
    --input-font-size:      var(--text-base);
    --input-color:          var(--color-text);
    --input-placeholder:    var(--color-text-muted);
    --input-shadow-focus:   0 0 0 3px rgba(102, 126, 234, 0.15);

    /* ─── Badge / Tags ─── */
    --badge-padding-y:      0.375rem;
    --badge-padding-x:      0.875rem;
    --badge-font-size:      var(--text-xs);
    --badge-font-weight:    var(--font-weight-semibold);
    --badge-radius:         var(--radius-full);

    /* ─── Navigation ─── */
    --nav-link-color:       var(--color-text);
    --nav-link-color-hover: var(--color-primary);
    --nav-link-font-size:   var(--text-base);
    --nav-link-font-weight: var(--font-weight-medium);

    /* ─── Header ─── */
    --header-bg:            var(--color-background);
    --header-border:        1px solid var(--color-border);
    --header-shadow:        var(--shadow-xs);
    --header-z:             var(--z-sticky);

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

/* ============================================================
   UTILITAIRES DE DESIGN SYSTEM
   Classes utilitaires basées sur les tokens
   ============================================================ */

/* Couleurs sémantiques */
.text-primary     { color: var(--color-primary) !important; }
.text-secondary   { color: var(--color-secondary) !important; }
.text-muted       { color: var(--color-text-light) !important; }
.bg-primary       { background-color: var(--color-primary) !important; }
.bg-surface       { background-color: var(--color-surface) !important; }

/* États */
.text-success { color: var(--color-success) !important; }
.text-error   { color: var(--color-error) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info    { color: var(--color-info) !important; }

.bg-success-light { background-color: var(--color-success-light) !important; }
.bg-error-light   { background-color: var(--color-error-light) !important; }
.bg-warning-light { background-color: var(--color-warning-light) !important; }
.bg-info-light    { background-color: var(--color-info-light) !important; }

/* Ombres */
.shadow-xs  { box-shadow: var(--shadow-xs) !important; }
.shadow-sm  { box-shadow: var(--shadow-sm) !important; }
.shadow-md  { box-shadow: var(--shadow-md) !important; }
.shadow-lg  { box-shadow: var(--shadow-lg) !important; }
.shadow-xl  { box-shadow: var(--shadow-xl) !important; }
.shadow-2xl { box-shadow: var(--shadow-2xl) !important; }

/* Border radius */
.rounded-sm   { border-radius: var(--radius-sm) !important; }
.rounded-md   { border-radius: var(--radius-md) !important; }
.rounded-lg   { border-radius: var(--radius-lg) !important; }
.rounded-xl   { border-radius: var(--radius-xl) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* Transitions */
.transition-fast { transition: all var(--transition-fast) !important; }
.transition-base { transition: all var(--transition-base) !important; }
.transition-slow { transition: all var(--transition-slow) !important; }

/* Composants badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--badge-padding-y) var(--badge-padding-x);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    border-radius: var(--badge-radius);
    line-height: 1;
}
.badge-primary {
    background-color: var(--color-primary);
    color: white;
}
.badge-success {
    background-color: var(--color-success-light);
    color: var(--color-success);
}
.badge-error {
    background-color: var(--color-error-light);
    color: var(--color-error);
}
.badge-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}
.badge-info {
    background-color: var(--color-info-light);
    color: var(--color-info);
}