/**
 * JE TRAVEL LEARNING SYSTEM — SHARED DESIGN TOKENS
 * Single source of truth for the Brand Book v5.0 palette, typography and spacing scale.
 * Registered as the `jtls-design-tokens` stylesheet handle and declared as a dependency by
 * every frontend module (dashboard, progression, planning, notifications, AI mentor,
 * assistance, journey, documents, onboarding, content) so they all read from the same values.
 *
 * Two variable prefixes are exposed on purpose: `--jtls-*` and `--jt-*`. Different modules were
 * written against one or the other; rather than rename every module stylesheet (risking visual
 * regressions), both aliases resolve to the exact same Brand Book value here.
 */

:root {
    /* Brand Book §07 — Couleur principale */
    --jtls-primary: var(--jt-brand-blue, #1CA3DD);
    --jtls-primary-dark: var(--jt-brand-blue-dark, #1276A8);
    --jtls-primary-light: var(--jt-brand-blue-pale, #E3F6FD);

    /* Brand Book §07 — Couleur secondaire */
    --jtls-accent: var(--jt-brand-yellow, #F8B400);
    --jtls-accent-light: var(--jt-brand-yellow-pale, #FEF6DC);

    /* Brand Book §07 — Couleur d'action */
    --jtls-danger: var(--jt-brand-red, #E63946);
    --jtls-danger-light: var(--jt-brand-red-pale, #FEF0F1);

    /* Success (not in Brand Book v5's core table, kept for status badges) */
    --jtls-success: #2A9D8F;
    --jtls-success-light: #E8F7F5;

    /* Brand Book §07 — Couleur premium */
    --jtls-navy: var(--jt-brand-navy, #0B2545);

    /* Brand Book §07 — Couleurs neutres */
    --jtls-bg-gray: var(--jt-brand-gray-light, #F5F7FA);
    --jtls-text: var(--jt-brand-gray-dark, #333333);
    --jtls-text-muted: #666666;
    --jtls-white: var(--jt-brand-white, #FFFFFF);
    --jtls-border: #E2E8F0;

    /* Brand Book §09 — Typographie */
    --jtls-font-heading: var(--jt-brand-font-title, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    --jtls-font-body: var(--jt-brand-font-body, 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);

    /* Shared shape & elevation scale */
    --jtls-radius-sm: 8px;
    --jtls-radius-md: 12px;
    --jtls-radius-lg: 16px;
    --jtls-radius-full: 9999px;
    --jtls-shadow-sm: 0 2px 4px rgba(11, 37, 69, 0.05);
    --jtls-shadow-md: 0 6px 16px rgba(11, 37, 69, 0.08);
    --jtls-shadow-lg: 0 12px 32px rgba(11, 37, 69, 0.12);

    /* --jt-* aliases: used by progression.css, planning.css and a few other module files */
    --jt-primary: var(--jtls-primary);
    --jt-primary-dark: var(--jtls-primary-dark);
    --jt-primary-light: var(--jtls-primary-light);
    --jt-navy: var(--jtls-navy);
    --jt-accent: var(--jtls-accent);
    --jt-accent-light: var(--jtls-accent-light);
    --jt-action: var(--jtls-danger);
    --jt-action-light: var(--jtls-danger-light);
    --jt-success: var(--jtls-success);
    --jt-success-light: var(--jtls-success-light);
    --jt-text-dark: var(--jtls-text);
    --jt-text-muted: var(--jtls-text-muted);
    --jt-bg-light: var(--jtls-bg-gray);
    --jt-white: var(--jtls-white);
    --jt-font-heading: var(--jtls-font-heading);
    --jt-font-body: var(--jtls-font-body);
    --jt-radius-sm: var(--jtls-radius-sm);
    --jt-radius-md: var(--jtls-radius-md);
    --jt-radius-lg: var(--jtls-radius-lg);
    --jt-radius-full: var(--jtls-radius-full);
    --jt-shadow-sm: var(--jtls-shadow-sm);
    --jt-shadow-md: var(--jtls-shadow-md);
}

@keyframes jtlsPulseHighlight {
    0% {
        box-shadow: 0 0 0 0 rgba(28, 163, 221, 0.7);
        transform: scale(1);
    }
    30% {
        box-shadow: 0 0 0 12px rgba(28, 163, 221, 0);
        transform: scale(1.015);
    }
    60% {
        box-shadow: 0 0 0 16px rgba(28, 163, 221, 0);
        transform: scale(1.01);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(28, 163, 221, 0);
        transform: scale(1);
    }
}

.jtls-highlight-pulse {
    animation: jtlsPulseHighlight 2.4s cubic-bezier(0.4, 0, 0.2, 1) 2 !important;
    border-color: var(--jtls-primary) !important;
    position: relative;
    z-index: 10;
}