/**
 * Design tokens — La Perle Gruissanaise.
 * Identité officielle : marine profond, bleu, anguleux.
 * Palette : #1A1A2E · #5369AC · #000000 · #EDEDEC
 * Typo    : Oswald (titres) · Asap Condensed (corps)
 *
 * Contrastes : light #EDEDEC sur dark #1A1A2E ≈ 14:1 ; blanc sur blue #5369AC ≈ 4.0:1
 * (réservé aux gros textes/CTA ≥ 16px gras — sinon utiliser --pg-blue-deep).
 */

:root {
    /* Couleurs de marque */
    --pg-dark:      #1A1A2E;   /* marine profond — sections sombres, texte sur clair */
    --pg-dark-2:    #232340;   /* cartes/surfaces sur fond sombre */
    --pg-blue:      #5369AC;   /* bleu — accent, liens, CTA */
    --pg-blue-deep: #3D4F87;   /* bleu foncé — hover, texte bleu lisible sur clair */
    --pg-black:     #000000;
    --pg-light:     #EDEDEC;   /* gris clair — fond principal */
    --pg-white:     #FFFFFF;

    /* Dérivés utilitaires */
    --pg-ink:    var(--pg-dark);                 /* texte principal sur clair */
    --pg-muted:  #6A6A7A;                         /* texte secondaire */
    --pg-line:   rgba(26, 26, 46, .14);          /* filets */
    --pg-line-on-dark: rgba(237, 237, 236, .16);

    /* Typographie */
    --pg-font-title: "Oswald", "Arial Narrow", system-ui, sans-serif;
    --pg-font-body:  "Asap Condensed", "Arial Narrow", system-ui, sans-serif;

    /* Anguleux : aucun arrondi */
    --pg-radius: 0px;

    /* Ombres : décalées/dures pour l'effet « bloc » */
    --pg-shadow:       6px 6px 0 0 rgba(26, 26, 46, .12);
    --pg-shadow-hover: 10px 10px 0 0 var(--pg-blue);
    --pg-shadow-soft:  0 10px 30px rgba(26, 26, 46, .14);

    /* Espacement (base 4px) */
    --pg-s1: 4px;  --pg-s2: 8px;  --pg-s3: 12px;
    --pg-s4: 16px; --pg-s5: 24px; --pg-s6: 32px; --pg-s7: 48px; --pg-s8: 72px;

    /* Largeur de contenu */
    --pg-maxw: 1200px;
}