/*
 * Projunior — Design tokens (« Chaleur & précision »)
 * Source de vérité des variables du design system. Voir docs/design/.
 * Chargé APRÈS Bootstrap : redéfinit aussi les variables --bs-* utiles.
 */

:root {
    /* ---- Couleurs de marque -------------------------------------------- */
    --pj-orange:        #f4971e; /* marigold — actions, état actif */
    --pj-orange-600:    #e07d0a; /* hover */
    --pj-orange-700:    #b9640a; /* texte sur fond clair (AA) */
    --pj-orange-100:    #fdecd4; /* tuile/tint */
    --pj-orange-50:     #fdf5ea; /* wash */

    --pj-blue:          #416cb3; /* bleu de marque — liens, structure */
    --pj-blue-700:      #31548d; /* liens (AA sur blanc) */
    --pj-blue-800:      #26426f;

    --pj-navy:          #17233a; /* barre latérale */
    --pj-navy-700:      #1f2f4a; /* survol barre latérale */
    --pj-navy-600:      #29395a;

    /* ---- Neutres tièdes (calcaire / papier) ---------------------------- */
    --pj-ink:           #1c2430; /* texte principal */
    --pj-slate:         #566072; /* texte secondaire (AA) */
    --pj-slate-400:     #838d9d; /* texte discret */
    --pj-line:          #e7e5df; /* filets, bordures */
    --pj-line-2:        #f0efe9;
    --pj-surface:       #ffffff; /* cartes */
    --pj-canvas:        #f7f6f2; /* fond application */
    --pj-canvas-2:      #f1efe8;

    /* ---- Couleurs de statut (sobres, institutionnelles) ---------------- */
    --pj-success:       #2f7d5b;
    --pj-success-bg:    #e7f2ec;
    --pj-success-fg:    #1f5c41;
    --pj-warning:       #b6791b;
    --pj-warning-bg:    #fbf1dd;
    --pj-warning-fg:    #855611;
    --pj-danger:        #b23b34;
    --pj-danger-bg:     #f8e8e6;
    --pj-danger-fg:     #8c2c26;
    --pj-info:          #3767ad;
    --pj-info-bg:       #e9eff8;
    --pj-info-fg:       #2b4f86;

    /* ---- Typographie --------------------------------------------------- */
    --pj-font:      "Ubuntu", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --pj-font-mono: "Ubuntu Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    /* Échelle typographique (base 16px) */
    --pj-text-xs:   0.75rem;   /* 12 */
    --pj-text-sm:   0.8125rem; /* 13 */
    --pj-text-base: 0.9375rem; /* 15 — corps */
    --pj-text-md:   1rem;      /* 16 */
    --pj-text-lg:   1.125rem;  /* 18 */
    --pj-text-xl:   1.375rem;  /* 22 */
    --pj-text-2xl:  1.75rem;   /* 28 — titre de page */
    --pj-text-3xl:  2.25rem;   /* 36 — chiffre-registre */
    --pj-text-4xl:  3rem;      /* 48 */

    --pj-lh-tight:  1.15;
    --pj-lh-snug:   1.35;
    --pj-lh:        1.55;

    /* ---- Espacement (grille 4px) --------------------------------------- */
    --pj-space-1: 0.25rem;
    --pj-space-2: 0.5rem;
    --pj-space-3: 0.75rem;
    --pj-space-4: 1rem;
    --pj-space-5: 1.5rem;
    --pj-space-6: 2rem;
    --pj-space-7: 3rem;
    --pj-space-8: 4rem;

    /* ---- Rayons (angles nets, alignés sur proju-arc.ch : 0–8 px) ------- */
    --pj-radius-sm:   4px;
    --pj-radius:      8px;
    --pj-radius-lg:   10px;
    --pj-radius-pill: 999px;

    /* ---- Micro-typographie « site » : capitales espacées ---------------- */
    /* Trait distinctif de proju-arc.ch (menus et boutons Ubuntu en capitales,
       letter-spacing 1.5–3 px) transposé à l'échelle de l'application. */
    --pj-caps-ls:      0.08em;
    --pj-caps-ls-wide: 0.14em;

    /* ---- Ombres -------------------------------------------------------- */
    --pj-shadow-sm: 0 1px 2px rgba(28, 36, 48, 0.06), 0 1px 3px rgba(28, 36, 48, 0.05);
    --pj-shadow:    0 2px 8px rgba(28, 36, 48, 0.06), 0 10px 26px rgba(28, 36, 48, 0.06);
    --pj-shadow-lg: 0 16px 40px rgba(28, 36, 48, 0.14);
    --pj-ring:      0 0 0 3px rgba(244, 151, 30, 0.35); /* focus marigold */

    /* ---- Layout -------------------------------------------------------- */
    --pj-sidebar-w:     264px;
    --pj-topbar-h:      60px;
    --pj-content-max:   1200px;
    --pj-content-max-xl: 1440px; /* écrans 4K */

    /* ---- Mouvement ----------------------------------------------------- */
    --pj-ease: cubic-bezier(0.2, 0.6, 0.2, 1);
    --pj-dur:  0.16s;

    /* ================================================================== */
    /* Pont Bootstrap : aligne le thème Bootstrap sur nos tokens.          */
    /* ================================================================== */
    --bs-body-bg:            var(--pj-canvas);
    --bs-body-color:         var(--pj-ink);
    --bs-body-font-family:   var(--pj-font);
    --bs-body-font-size:     var(--pj-text-base);
    --bs-body-font-weight:   400;
    --bs-emphasis-color:     var(--pj-ink);
    --bs-secondary-color:    var(--pj-slate);
    --bs-tertiary-color:     var(--pj-slate-400);
    --bs-border-color:       var(--pj-line);
    --bs-border-radius:      var(--pj-radius);
    --bs-border-radius-sm:   var(--pj-radius-sm);
    --bs-border-radius-lg:   var(--pj-radius-lg);
    --bs-link-color:         var(--pj-blue-700);
    --bs-link-color-rgb:     49, 84, 141;
    --bs-link-hover-color:   var(--pj-blue-800);
    --bs-primary:            #f4971e;
    --bs-primary-rgb:        244, 151, 30;
    --bs-heading-color:      var(--pj-ink);
}