/*
    ==========================================================
    PROJECT : SITE-GENERIQUE
    FILE    : css/color-semantic.css
    AUTH    : Renaud
    CREATED : 23 novembre 2025
    UPDATED : 07 mars 2026
    ==========================================================
*/

/**
*   @project        SITE-GENERIQUE
*   @description    Attribution sémantique des couleurs (Alias).
*                   Toutes les valeurs sont des références aux tokens primitifs
*                   définis dans color-primary.css.
*   
*   @file           css/color-semantic.css
*
*   @see            css/color-primary.css
*
*   @note           ⚠️ color-primary.css DOIT être chargé AVANT ce fichier
*                   Aucune couleur en dur, uniquement des var(--color-*)
*                   Les variables --color-*-shadow contiennent UNIQUEMENT la couleur,
*                   les dimensions sont définies dans les fichiers composants.
*/

:root {

    /* =======================================================
       FONDS GÉNÉRAUX (LAYOUT)
       ======================================================= */
    --color-background-body:        var(--color-grey-230);
    --color-background-header:      var(--color-grey-230);
    --color-background-hero:        var(--color-blue-060);
    --color-background-main:        var(--color-grey-230);
    --color-background-sidebar:     var(--color-grey-220);
    --color-background-footer:      var(--color-blue-030);
    --color-background-block:       var(--color-grey-220);
    --color-background-section-alt: var(--color-grey-220);


/*  =======================================================
    TEXTES DU CORPS
    ======================================================= */
    --color-text-main:    var(--color-grey-060);
    --color-text-footer:  var(--color-grey-120);
    --color-text-sidebar: var(--color-grey-060);
    --color-text-muted:   var(--color-grey-120);
    
    
    /* =======================================================
       CARDS
       ======================================================= */
    --color-background-card:       var(--color-white);
    --color-background-card-hover: var(--color-grey-230);
    --color-card-border:           var(--color-grey-220);
    --color-card-shadow:           var(--color-grey-120-shadow);
    --color-card-shadow-hover:     var(--color-grey-090-shadow);


    /* =======================================================
       MOBILE MENU
       ======================================================= */
    --color-background-mobile-menu: var(--color-grey-230);
    --color-border-mobile-menu:     var(--color-grey-220);
    --color-nav-mobile-shadow:      var(--color-grey-030-shadow);


    /* =======================================================
       HEADER BRANDING (Titre du site)
       ======================================================= */
    --color-header-shadow:               var(--color-grey-060-shadow);
    --color-header-title-default:        var(--color-blue-090);
    --color-header-title-visited:        var(--color-blue-090);
    --color-header-title-default-shadow: var(--color-blue-060-shadow);
    --color-header-title-hover:          var(--color-blue-060);
    --color-header-title-hover-shadow:   var(--color-blue-030-shadow);
    --color-header-title-active:         var(--color-red-120);
    --color-header-title-active-shadow:  var(--color-red-090-shadow);


    /* =======================================================
       HEADER TAGLINE (Slogan)
       ======================================================= */
    --color-header-tagline-default: var(--color-grey-120);
    --color-header-tagline-hover:   var(--color-grey-090);


    /* =======================================================
       NAVIGATION (Texte)
       ======================================================= */
    --color-nav-text-default:   var(--color-grey-060);
    --color-nav-text-visited:   var(--color-grey-060);
    --color-nav-text-hover:     var(--color-orange-120);
    --color-nav-text-active:    var(--color-orange-090);
    --color-nav-shadow-default: transparent;
    --color-nav-shadow-hover:   var(--color-orange-120-shadow);


    /* =======================================================
       NAVIGATION (Boîtes)
       ======================================================= */
    --color-nav-box-text:           var(--color-grey-230);
    --color-nav-box-default:        var(--color-blue-120);
    --color-nav-box-visited:        var(--color-blue-120);
    --color-nav-box-default-shadow: var(--color-blue-090-shadow);
    --color-nav-box-hover:          var(--color-blue-090);
    --color-nav-box-hover-shadow:   var(--color-blue-060-shadow);
    --color-nav-box-active:         var(--color-red-120);
    --color-nav-box-active-shadow:  var(--color-red-090-shadow);


    /* =======================================================
       HERO SECTION
       ======================================================= */
    --color-hero-title:           var(--color-white);
    --color-hero-title-shadow:    var(--color-grey-030-shadow);
    --color-hero-title-highlight: var(--color-orange-120);
    --color-hero-tagline:         var(--color-orange-120);
    --color-hero-description:     var(--color-grey-220);
    --color-hero-overlay:         rgba(0, 64, 128, 0.6); /* Bleu nuit 60% */
    --color-hero-overlay-start:   var(--color-blue-060-shadow);
    --color-hero-overlay-end:     var(--color-blue-030-shadow);


    /* =======================================================
       CALL TO ACTION (CTA)
       ======================================================= */
    --color-cta-box-text:           var(--color-white);
    --color-cta-box-default:        var(--color-orange-120);
    --color-cta-box-visited:        var(--color-orange-120);
    --color-cta-box-default-shadow: var(--color-orange-120-shadow);
    --color-cta-box-hover:          var(--color-orange-090);
    --color-cta-box-hover-shadow:   var(--color-orange-090-shadow);
    --color-cta-box-active:         var(--color-orange-060);
    --color-cta-box-active-shadow:  var(--color-grey-030-shadow);


    /* =======================================================
       CTA LINK (Lien textuel orange avec flèche)
       ======================================================= */
    --color-cta-link-default: var(--color-orange-120);
    --color-cta-link-hover:   var(--color-orange-090);
    --color-cta-link-active:  var(--color-orange-060);


    /* =======================================================
       TYPOGRAPHIE & TITRES
       ======================================================= */
    --color-headings:        var(--color-blue-060);
    --color-heading-accent:  var(--color-orange-120);
    --color-footer-title:    var(--color-white);
    --color-footer-accent:   var(--color-blue-090);
    --color-footer-emphasis: var(--color-grey-230);


    /* =======================================================
       LIENS HYPERTEXTES
       ======================================================= */
    --color-link-default: var(--color-blue-060);
    --color-link-visited: var(--color-blue-030);
    --color-link-hover:   var(--color-orange-120);
    --color-link-active:  var(--color-orange-090);


    /* =======================================================
       ÉLÉMENTS GRAPHIQUES
       ======================================================= */
    --color-separator:       var(--color-grey-220);
    --color-sidebar-border:  var(--color-grey-220);
    --color-sidebar-shadow:  var(--color-grey-120-shadow);
    --color-sidebar-accent:  var(--color-blue-090);


    /* =======================================================
       E-COMMERCE
       ======================================================= */
    --color-price-text:  var(--color-blue-060);
    --color-stock-alert: var(--color-red-120);
    --color-stock-ok:    var(--color-green-090);
    --color-rating-star: var(--color-yellow-090);

}