/* ============================================
   CHRU Nancy — Design Tokens
   Source : Figma (CHRU-Brabois, node 230:3750)
   ============================================ */

:root {
    /* === Couleurs identitaires === */
    --chru-blue-service:    #14446B;  /* Bleu foncé — titres, header, hero, footer */
    --chru-blue-text:       #2D4356;  /* Bleu texte — corps de texte */
    --chru-blue-light:      #0096D6;  /* Bleu clair — ETP, accents */
    --chru-blue-canard:     #197CAA;  /* Bleu canard — centres */
    --chru-urgences:        #DA1500;  /* Rouge urgences */
    --chru-sante:           #D12C6F;  /* Rose santé */
    --chru-violet:          #A323BE;  /* Violet accents */
    --chru-teal:            #0B827D;  /* Bleu-vert */
    --chru-formation:       #DC992A;  /* Jaune formations */
    --chru-metiers:         #CD3620;  /* Rouge métiers/catégories */
    --chru-dark:            #383838;  /* Texte foncé */
    --chru-green:           #007A57;  /* Vert — tags, pastilles */
    --chru-brown:           #9E680C;  /* Brun — tags, pastilles */
    --chru-blue-light-bg:   #C5E1FF;  /* Bleu léger — fonds aplat */

    /* === Alias sémantiques === */
    --chru-secondary:       var(--chru-blue-service);  /* #14446B — hero, titres sections */
    --chru-etp:             var(--chru-blue-light);    /* #0096D6 — accents, hover */

    /* === Neutres === */
    --chru-white:           #FFFFFF;
    --chru-bg-alt:          #F8F8F8;
    --chru-grey:            #F6F6F6;  /* Fonds sections, sommaire */
    --chru-gray-border:     #E9E9E9;  /* Bordure cards article */
    --chru-gray-border-alt: #DDDDDD;  /* Bordure cards événement */
    --chru-gray-search:     #DEDEDE;  /* Bordure recherche */
    --chru-gray-text:       #6C6C6C;  /* Texte date, secondaire */
    --chru-gray-text-light: #929292;  /* Labels secondaires */

    /* === Couleurs fonctionnelles === */
    --color-text:        var(--chru-blue-text);
    --color-heading:     var(--chru-blue-service);
    --color-link:        var(--chru-blue-canard);
    --color-link-hover:  var(--chru-blue-service);
    --color-bg:          var(--chru-white);
    --color-bg-alt:      var(--chru-grey);
    --color-focus:       var(--chru-blue-canard);
    --color-error:       var(--chru-urgences);
    --color-success:     var(--chru-teal);

    /* === Typographie === */
    --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Tailles Figma exactes */
    --h1-size:      45px;
    --h2-size:      24px;
    --h3-size:      20px;
    --h4-size:      18px;
    --chapo-size:   24px;
    --body-size:    16px;
    --tag-size:     15px;
    --button-size:  15px;
    --small-size:   14px;

    /* Graisses */
    --weight-regular:  400;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* === Espacements === */
    --space-2xs:  4px;
    --space-xs:   8px;
    --space-sm:   14px;
    --space-md:   20px;
    --space-lg:   36px;
    --space-xl:   48px;
    --space-2xl:  64px;
    --space-3xl:  80px;

    /* === Layout === */
    --page-width:        1440px;
    --container-max:     1440px;
    --container-padding: 45px;
    --sidebar-width:     369px;
    --header-height:     150px;

    /* === Border radius (Figma) === */
    --radius-sm:    8px;
    --radius-md:    14px;   /* Sommaire, structure cards, date badge */
    --radius-lg:    25px;   /* Search bar */
    --radius-pill:  30px;   /* Event/article cards, buttons, tags */

    /* === Transitions === */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* === Ombres === */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* === Responsive tokens === */
@media (max-width: 768px) {
    :root {
        --h1-size:      32px;
        --h2-size:      20px;
        --h3-size:      18px;
        --h4-size:      16px;
        --chapo-size:   20px;
        --container-padding: 20px;
    }
}
