/**
 * WP Généalogie — Design Tokens
 *
 * Variables CSS statiques partagées par tous les composants du plugin :
 * fiche individu, formulaire de suggestion, drawer, panier, modales.
 *
 * Les variables dynamiques issues des réglages (couleurs boutons, police)
 * restent injectées en inline via class-wpg-frontend.php (wpg-ui-vars).
 */

:root {

    /* ── Couleurs — Primaire ──────────────────────────────────────── */
    --wpg-color-primary:        #2563eb;
    --wpg-color-primary-hover:  #1d4ed8;
    --wpg-color-primary-light:  #eff6ff;
    --wpg-color-primary-border: #bfdbfe;

    /* ── Couleurs — Sémantiques ───────────────────────────────────── */
    --wpg-color-success:        #16a34a;
    --wpg-color-success-hover:  #15803d;
    --wpg-color-success-light:  #f0fdf4;
    --wpg-color-success-border: #86efac;

    --wpg-color-warning:        #d97706;
    --wpg-color-warning-light:  #fffbeb;
    --wpg-color-warning-border: #fcd34d;

    --wpg-color-danger:         #dc2626;
    --wpg-color-danger-hover:   #b91c1c;
    --wpg-color-danger-light:   #fef2f2;
    --wpg-color-danger-border:  #fca5a5;

    /* ── Couleurs — Neutres ───────────────────────────────────────── */
    --wpg-color-text:           #1f2937;
    --wpg-color-text-muted:     #6b7280;
    --wpg-color-text-subtle:    #9ca3af;
    --wpg-color-border:         #e5e7eb;
    --wpg-color-border-strong:  #d1d5db;
    --wpg-color-bg:             #ffffff;
    --wpg-color-bg-subtle:      #f9fafb;
    --wpg-color-bg-muted:       #f3f4f6;

    /* ── Couleurs — États de suggestion ──────────────────────────── */
    /* Zone avec modification en attente */
    --wpg-color-pending:        #f59e0b;
    --wpg-color-pending-light:  #fffbeb;
    --wpg-color-pending-border: #fcd34d;
    /* Zone avec ajout en attente */
    --wpg-color-add-light:      #f0fdf4;
    --wpg-color-add-border:     #86efac;
    /* Zone avec suppression en attente */
    --wpg-color-remove-light:   #fef2f2;
    --wpg-color-remove-border:  #fca5a5;

    /* ── Espace ───────────────────────────────────────────────────── */
    --wpg-space-1:   4px;
    --wpg-space-2:   8px;
    --wpg-space-3:   12px;
    --wpg-space-4:   16px;
    --wpg-space-5:   20px;
    --wpg-space-6:   24px;
    --wpg-space-8:   32px;
    --wpg-space-10:  40px;
    --wpg-space-12:  48px;

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

    /* ── Ombres ───────────────────────────────────────────────────── */
    --wpg-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.05);
    --wpg-shadow-md:     0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
    --wpg-shadow-lg:     0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --wpg-shadow-xl:     0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
    --wpg-shadow-drawer: 0 4px 24px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.10);
    --wpg-shadow-card:   0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);

    /* ── Transitions ──────────────────────────────────────────────── */
    --wpg-transition-fast: 0.15s ease;
    --wpg-transition:      0.22s cubic-bezier(0.4, 0, 0.2, 1);
    --wpg-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Z-index ──────────────────────────────────────────────────── */
    --wpg-z-base:    1;
    --wpg-z-raised:  10;
    --wpg-z-basket:  900;
    --wpg-z-overlay: 940;
    --wpg-z-drawer:  950;
    --wpg-z-modal:   1000;
    --wpg-z-toast:   1100;

    /* ── Typographie ──────────────────────────────────────────────── */
    --wpg-text-xs:   0.75rem;    /* 12px */
    --wpg-text-sm:   0.875rem;   /* 14px */
    --wpg-text-md:   1rem;       /* 16px */
    --wpg-text-lg:   1.125rem;   /* 18px */
    --wpg-text-xl:   1.25rem;    /* 20px */
    --wpg-text-2xl:  1.5rem;     /* 24px */
    --wpg-font-normal:  400;
    --wpg-font-medium:  500;
    --wpg-font-semibold: 600;
    --wpg-font-bold:    700;
    --wpg-leading:      1.5;
    --wpg-leading-tight: 1.25;

    /* ── Drawer ───────────────────────────────────────────────────── */
    --wpg-drawer-width:    420px;
    --wpg-drawer-width-sm: 360px;
    --wpg-basket-height:   60px;
}


/* ═══════════════════════════════════════════════════════════════════
   États visuels "modification en attente" sur les zones de la fiche
   ═══════════════════════════════════════════════════════════════════ */

/* Zone avec une modification en attente (valeur changée) */
.wpg-zone--modified {
    background: var(--wpg-color-pending-light) !important;
    border-left: 3px solid var(--wpg-color-pending) !important;
    border-radius: 0 var(--wpg-radius-md) var(--wpg-radius-md) 0;
    position: relative;
    transition: background var(--wpg-transition-fast), border-color var(--wpg-transition-fast);
}
.wpg-zone--modified::before {
    content: '✏️';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: var(--wpg-text-xs);
    opacity: 0.7;
}

/* Zone avec un ajout en attente */
.wpg-zone--added {
    background: var(--wpg-color-add-light) !important;
    border-left: 3px solid var(--wpg-color-add-border) !important;
    border-radius: 0 var(--wpg-radius-md) var(--wpg-radius-md) 0;
}
.wpg-zone--added::before {
    content: '+';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: var(--wpg-text-sm);
    font-weight: var(--wpg-font-bold);
    color: var(--wpg-color-success);
    opacity: 0.8;
}

/* Zone marquée pour suppression */
.wpg-zone--removed {
    background: var(--wpg-color-remove-light) !important;
    border-left: 3px solid var(--wpg-color-remove-border) !important;
    border-radius: 0 var(--wpg-radius-md) var(--wpg-radius-md) 0;
    opacity: 0.65;
}
.wpg-zone--removed > * {
    text-decoration: line-through;
    color: var(--wpg-color-text-muted) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   Utilitaires de base réutilisés dans tous les composants
   ═══════════════════════════════════════════════════════════════════ */

/* Bouton de base (surcharge le .wpg-btn existant avec les tokens) */
.wpg-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--wpg-space-1);
    padding: var(--wpg-space-2) var(--wpg-space-4);
    border-radius: var(--wpg-radius-md);
    font-size: var(--wpg-text-sm);
    font-weight: var(--wpg-font-medium);
    line-height: var(--wpg-leading-tight);
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--wpg-transition-fast),
                border-color var(--wpg-transition-fast),
                color var(--wpg-transition-fast),
                box-shadow var(--wpg-transition-fast);
    text-decoration: none;
    white-space: nowrap;
}
.wpg-btn:focus-visible {
    outline: 2px solid var(--wpg-color-primary);
    outline-offset: 2px;
}

.wpg-btn-primary {
    background: var(--wpg-color-primary);
    color: #fff;
    border-color: var(--wpg-color-primary);
}
.wpg-btn-primary:hover {
    background: var(--wpg-color-primary-hover);
    border-color: var(--wpg-color-primary-hover);
    color: #fff;
}

.wpg-btn-ghost {
    background: transparent;
    color: var(--wpg-color-text);
    border-color: var(--wpg-color-border-strong);
}
.wpg-btn-ghost:hover {
    background: var(--wpg-color-bg-muted);
}

.wpg-btn-danger {
    background: var(--wpg-color-danger);
    color: #fff;
    border-color: var(--wpg-color-danger);
}
.wpg-btn-danger:hover {
    background: var(--wpg-color-danger-hover);
    border-color: var(--wpg-color-danger-hover);
    color: #fff;
}

.wpg-btn-danger-ghost {
    background: transparent;
    color: var(--wpg-color-danger);
    border-color: var(--wpg-color-danger-border);
}
.wpg-btn-danger-ghost:hover {
    background: var(--wpg-color-danger-light);
}

.wpg-btn-sm {
    padding: var(--wpg-space-1) var(--wpg-space-3);
    font-size: var(--wpg-text-xs);
}

.wpg-btn-icon {
    padding: var(--wpg-space-1);
    width: 28px;
    height: 28px;
    justify-content: center;
}

/* Input de base */
.wpg-input {
    width: 100%;
    padding: var(--wpg-space-2) var(--wpg-space-3);
    border: 1px solid var(--wpg-color-border-strong);
    border-radius: var(--wpg-radius-md);
    font-size: var(--wpg-text-sm);
    color: var(--wpg-color-text);
    background: var(--wpg-color-bg);
    transition: border-color var(--wpg-transition-fast), box-shadow var(--wpg-transition-fast);
    line-height: var(--wpg-leading);
}
.wpg-input:focus {
    outline: none;
    border-color: var(--wpg-color-primary);
    box-shadow: 0 0 0 3px var(--wpg-color-primary-light);
}
.wpg-input::placeholder {
    color: var(--wpg-color-text-subtle);
}

/* Label de formulaire */
.wpg-label {
    display: block;
    font-size: var(--wpg-text-sm);
    font-weight: var(--wpg-font-medium);
    color: var(--wpg-color-text);
    margin-bottom: var(--wpg-space-1);
}

/* Séparateur */
.wpg-divider {
    border: none;
    border-top: 1px solid var(--wpg-color-border);
    margin: var(--wpg-space-4) 0;
}

/* Badge d'état */
.wpg-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--wpg-space-2);
    border-radius: var(--wpg-radius-full);
    font-size: var(--wpg-text-xs);
    font-weight: var(--wpg-font-semibold);
    line-height: 1.4;
}
.wpg-badge--pending  { background: var(--wpg-color-pending-light);  color: #92400e; }
.wpg-badge--success  { background: var(--wpg-color-success-light);  color: #14532d; }
.wpg-badge--danger   { background: var(--wpg-color-danger-light);   color: #7f1d1d; }
.wpg-badge--primary  { background: var(--wpg-color-primary-light);  color: #1e3a8a; }
.wpg-badge--neutral  { background: var(--wpg-color-bg-muted);       color: var(--wpg-color-text-muted); }