/* =========================================================
   🎨 DesignCV — Design System (Module 5)
   Harmonisation visuelle — 100% overlay, ne casse rien
   ========================================================= */

/* ---------- 1. TOKENS ÉTENDUS ---------- */
:root {
    /* Couleurs primaires (signature préservée) */
    --primary: #4F46E5;
    --primary-light: #6366F1;
    --primary-dark: #4338CA;
    --primary-bg: #EEF2FF;
    --primary-soft: rgba(79, 70, 229, 0.12);

    /* Surfaces */
    --bg: #F8FAFC;
    --surface: #FFFFFF;
    --surface-alt: #F1F5F9;
    --border: #E2E8F0;
    --border-strong: #CBD5E1;

    /* Texte (contrastes WCAG AA) */
    --text: #0F172A;
    --text-secondary: #475569;
    --text-muted: #64748B; /* ✅ Renforcé (était #94A3B8) — ratio 4.5:1 sur blanc */

    /* Sémantique */
    --success: #059669;
    --success-bg: #D1FAE5;
    --danger: #DC2626;
    --danger-bg: #FEE2E2;
    --warning: #D97706;
    --warning-bg: #FEF3C7;

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.07), 0 2px 4px -2px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --shadow-glow: 0 0 0 4px var(--primary-soft);

    /* Rayons */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

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

    /* Timing */
    --duration-fast: 150ms;
    --duration: 250ms;
    --duration-slow: 400ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Layout */
    --nav-height: 64px;
    --transition: all var(--duration) var(--ease);
}

/* ---------- 2. BASE ---------- */
body {
    font-feature-settings: "cv11", "ss01";
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------- 3. NAVBAR ---------- */
.navbar {
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02);
}
.brand {
    transition: var(--transition);
}
.brand:hover {
    color: var(--primary);
}

/* ---------- 4. FORM PANEL ---------- */
.form-panel {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.form-panel::-webkit-scrollbar { width: 8px; }
.form-panel::-webkit-scrollbar-track { background: transparent; }
.form-panel::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.form-panel::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

.form-header h1 {
    letter-spacing: -0.02em;
}
.form-section {
    padding: var(--space-6) 0;
}
.section-title {
    letter-spacing: -0.01em;
    color: var(--text);
}

/* ---------- 5. CHAMPS DE FORMULAIRE ---------- */
.form-input,
.form-textarea,
.form-select {
    padding: 11px 14px;
    font-size: 0.92rem;
    border-width: 1.5px;
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease);
}
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
    border-color: var(--border-strong);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}
.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* ---------- 6. BOUTONS — Harmonisation ---------- */
.btn {
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: transform var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease),
                color var(--duration-fast) var(--ease);
}
.btn-primary {
    background: var(--primary);
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.25), 0 2px 8px rgba(79, 70, 229, 0.15);
}
.btn-outline {
    border-width: 1.5px;
}

/* ---------- 7. CARDS ---------- */
.entry-card {
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-fast) var(--ease),
                box-shadow var(--duration-fast) var(--ease);
}
.entry-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow);
}

/* ---------- 8. SKILL TAGS ---------- */
.skill-tag {
    transition: transform var(--duration-fast) var(--ease),
                background var(--duration-fast) var(--ease);
}

/* ---------- 9. PREVIEW PANEL ---------- */
.preview-panel {
    background: linear-gradient(180deg, #E2E8F0 0%, #EDF2F7 100%);
}
.preview-toolbar {
    box-shadow: 0 1px 0 var(--border);
}

/* ---------- 10. MODALE ---------- */
.modal {
    box-shadow: 0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
}

/* ---------- 11. TOAST ---------- */
.toast {
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(8px);
}