@use "sass:color";


// Change value accordingly with the app's brand color hex value
$brandColor: hsl(198, 80%, 64%); // ADS HSL

$brandDark : desaturate(darken($brandColor, 25%), 20%);
$brandDarker : desaturate(darken($brandColor, 40%), 50%);
$brand400 : desaturate(lighten($brandColor, 15%), 5%);
$brand300 : desaturate(lighten($brandColor, 30%), 10%);
$brand200 : desaturate(lighten($brandColor, 30%), 15%);


// Dégradé issu de la couleur du logo
// [Note] 900 = plus foncé ; 100 = plus clair ; 500 = couleur du logo 
$brand900 : desaturate(darken($brandColor, 42%), 40%);
$brand800 : desaturate(darken($brandColor, 32%), 8%);
$brand700 : desaturate(darken($brandColor, 20%), 9%);
$brand600 : desaturate(darken($brandColor, 10%), 8%);
$brand500 : $brandColor;
$brand400 : lighten($brandColor, 9%);
$brand300 : lighten($brandColor, 19%);
$brand200 : lighten($brandColor, 28%);
$brand100 : lighten($brandColor, 33%);


.brand {
    width: 100px;
    height: 100px;
    display: inline-block;
    &100 {
        background-color: $brand100;
    }
    &200 {
        background-color: $brand200;
    }
    &300 {
        background-color: $brand300;
    }
    &400 {
        background-color: $brand400;
    }
    &500 {
        background-color: $brand500;
    }
    &600 {
        background-color: $brand600;
    }
    &700 {
        background-color: $brand700;
    }
    &800 {
        background-color: $brand800;
    }
    &900 {
        background-color: $brand900;
    }
}


// Teintes de gris
// [Note] 900 = plus foncé ; 100 = plus clair 
$gris900: #1A202C;
$gris800: #2D3748;
$gris700: #4A5568;
$gris600: #718096;
$gris500: #A0AEC0;
$gris400: #CBD5E0;
$gris300: #E2E8F0;
$gris200: #EDF2F7;
$gris100: #F7FAFC;

$noir : #000000;
$blanc : #FFFFFF;

// Menu 

$autorisation        : hsl(210, 80%, 75%);
$guichetUnique       : hsl(40, 90%, 75%);
$qualification       : hsl(55, 100%, 65%);
$instruction         : hsl(100, 63%, 75%);
$contentieux         : hsl(240, 39%, 75%);
$suivi               : hsl(80, 53%, 75%);
$demandesAvis        : hsl(210, 100%, 75%);
$numerisation        : hsl(160, 62%, 75%);
$exportImport        : hsl(0, 2%, 75%);
$parametrageDossiers : hsl(30, 100%, 75%);
$parametrageApp      : hsl(10, 100%, 70%);
$administration      : hsl(0, 100%, 60%);


:root {
    // ============================================
    // SEMANTIC / ALERT COLORS
    // ============================================
    // Colors for messages, notifications, and semantic states
    // Danger / Error colors - for errors, destructive actions, critical alerts
    --danger: #e65244;                                         // Base danger color
    --danger900: #{color.adjust(#e65244, $lightness: -20%)};  // Darkest - critical errors
    --danger700: #{color.adjust(#e65244, $lightness: -10%)};  // Dark - error hover states
    --danger500: #e65244;                                      // Base (same as --danger)
    --danger300: #{color.adjust(#e65244, $lightness: 15%)};   // Light - error borders
    --danger100: #{color.adjust(#e65244, $lightness: 25%)};   // Lightest - error backgrounds
    --dangerLight: #{color.adjust(#e65244, $lightness: 20%)}; // Light variant for backgrounds

    // Warning colors - for warnings, caution messages, important notices
    --warning: #fc8802;                                         // Base warning color
    --warning900: #{color.adjust(#fc8802, $lightness: -20%)};  // Darkest - severe warnings
    --warning700: #{color.adjust(#fc8802, $lightness: -10%)};  // Dark - warning hover
    --warning500: #fc8802;                                      // Base (same as --warning)
    --warning300: #{color.adjust(#fc8802, $lightness: 20%)};   // Light - warning borders
    --warning100: #{color.adjust(#fc8802, $lightness: 35%)};   // Lightest - warning backgrounds
    --warningLight: #{color.adjust(#fc8802, $lightness: 30%)}; // Light variant for backgrounds

    // Success colors - for success messages, confirmations, positive actions
    --success: #49D793;                                         // Base success color
    --success900: #{color.adjust(#49D793, $lightness: -25%)};  // Darkest - strong success
    --success700: #{color.adjust(#49D793, $lightness: -12%)};  // Dark - success hover
    --success500: #49D793;                                      // Base (same as --success)
    --success300: #{color.adjust(#49D793, $lightness: 20%)};   // Light - success borders
    --success100: #{color.adjust(#49D793, $lightness: 38%)};   // Lightest - success backgrounds
    --successLight: #{color.adjust(#49D793, $lightness: 35%)}; // Light variant for backgrounds

    // Info colors - for informational messages, tips, neutral notifications
    --info: #59B9E2;                                         // Base info color
    --info900: #{color.adjust(#59B9E2, $lightness: -25%)};  // Darkest - strong info
    --info700: #{color.adjust(#59B9E2, $lightness: -12%)};  // Dark - info hover
    --info500: #59B9E2;                                      // Base (same as --info)
    --info300: #{color.adjust(#59B9E2, $lightness: 20%)};   // Light - info borders
    --info100: #{color.adjust(#59B9E2, $lightness: 35%)};   // Lightest - info backgrounds
    --infoLight: #{color.adjust(#59B9E2, $lightness: 30%)}; // Light variant for backgrounds

    // ============================================
    // EXTENDED COLOR PALETTE
    // ============================================
    // Additional colors for UI variety, data visualization, and specific use cases
    // Red (Rouge) - for important warnings, critical states, emphasis
    --rouge: #B22222;                                        // Firebrick red
    --rouge900: #{color.adjust(#B22222, $lightness: -20%)}; // Darkest red
    --rouge700: #{color.adjust(#B22222, $lightness: -10%)}; // Dark red
    --rouge500: #B22222;                                     // Base red (same as --rouge)
    --rouge300: #{color.adjust(#B22222, $lightness: 15%)};  // Light red
    --rouge100: #{color.adjust(#B22222, $lightness: 30%)};  // Lightest red

    // Orange - for secondary warnings, attention-grabbing elements
    --orange: #FF8C00;                                        // Dark orange
    --orange900: #{color.adjust(#FF8C00, $lightness: -20%)}; // Darkest orange
    --orange700: #{color.adjust(#FF8C00, $lightness: -10%)}; // Dark orange
    --orange500: #FF8C00;                                     // Base orange (same as --orange)
    --orange300: #{color.adjust(#FF8C00, $lightness: 15%)};  // Light orange
    --orange100: #{color.adjust(#FF8C00, $lightness: 30%)};  // Lightest orange

    // Yellow (Jaune) - for highlights, notifications, emphasis
    --jaune: #FFD700;                                        // Gold
    --jaune900: #{color.adjust(#FFD700, $lightness: -30%)}; // Darkest yellow
    --jaune700: #{color.adjust(#FFD700, $lightness: -15%)}; // Dark yellow
    --jaune500: #FFD700;                                     // Base yellow (same as --jaune)
    --jaune300: #{color.adjust(#FFD700, $lightness: 10%)};  // Light yellow
    --jaune100: #{color.adjust(#FFD700, $lightness: 20%)};  // Lightest yellow
    --jauneLight: #fff7cc;                                   // Extra light yellow for subtle backgrounds

    // Green (Vert) - for success states, positive feedback, growth
    --vert: #00FA9A;                                        // Medium spring green
    --vert900: #{color.adjust(#00FA9A, $lightness: -30%)}; // Darkest green
    --vert700: #{color.adjust(#00FA9A, $lightness: -15%)}; // Dark green
    --vert500: #00FA9A;                                     // Base green (same as --vert)
    --vert300: #{color.adjust(#00FA9A, $lightness: 10%)};  // Light green
    --vert100: #{color.adjust(#00FA9A, $lightness: 20%)};  // Lightest green
    --vertDark: #02BF54;                                    // Dark green variant

    // Blue (Bleu) - for links, information, trust
    --bleu: #00BFFF;                                        // Deep sky blue
    --bleu900: #{color.adjust(#00BFFF, $lightness: -30%)}; // Darkest blue
    --bleu700: #{color.adjust(#00BFFF, $lightness: -15%)}; // Dark blue
    --bleu500: #00BFFF;                                     // Base blue (same as --bleu)
    --bleu300: #{color.adjust(#00BFFF, $lightness: 10%)};  // Light blue
    --bleu100: #{color.adjust(#00BFFF, $lightness: 20%)};  // Lightest blue
    --bleuDark: #008AB8;                                    // Dark blue variant

    // Purple (Violet) - for special states, premium features, creativity
    --violet: #DDA0DD;                                        // Plum
    --violet900: #{color.adjust(#DDA0DD, $lightness: -30%)}; // Darkest purple
    --violet700: #{color.adjust(#DDA0DD, $lightness: -15%)}; // Dark purple
    --violet500: #DDA0DD;                                     // Base purple (same as --violet)
    --violet300: #{color.adjust(#DDA0DD, $lightness: 10%)};  // Light purple
    --violet100: #{color.adjust(#DDA0DD, $lightness: 15%)};  // Lightest purple
    --violetDark: #BA55D3;                                    // Dark purple variant (medium orchid)

    // Pink (Rose) - for decorative elements, soft emphasis
    --rose: #FFAFDA;                                        // Light pink
    --rose900: #{color.adjust(#FFAFDA, $lightness: -30%)}; // Darkest pink
    --rose700: #{color.adjust(#FFAFDA, $lightness: -15%)}; // Dark pink
    --rose500: #FFAFDA;                                     // Base pink (same as --rose)
    --rose300: #{color.adjust(#FFAFDA, $lightness: 8%)};   // Light pink
    --rose100: #{color.adjust(#FFAFDA, $lightness: 13%)};  // Lightest pink
    --roseDark: #FF1493;                                    // Dark pink variant (deep pink)

}

// ============================================
// SCSS VARIABLES REFERENCING CSS CUSTOM PROPERTIES
// ============================================
// Semantic / Alert Colors
$danger: var(--danger);
$danger900: var(--danger900);
$danger700: var(--danger700);
$danger500: var(--danger500);
$danger300: var(--danger300);
$danger100: var(--danger100);
$dangerLight: var(--dangerLight);

$warning: var(--warning);
$warning900: var(--warning900);
$warning700: var(--warning700);
$warning500: var(--warning500);
$warning300: var(--warning300);
$warning100: var(--warning100);
$warningLight: var(--warningLight);

$success: var(--success);
$success900: var(--success900);
$success700: var(--success700);
$success500: var(--success500);
$success300: var(--success300);
$success100: var(--success100);
$successLight: var(--successLight);

$info: var(--info);
$info900: var(--info900);
$info700: var(--info700);
$info500: var(--info500);
$info300: var(--info300);
$info100: var(--info100);
$infoLight: var(--infoLight);

// Extended Color Palette
$rouge: var(--rouge);
$rouge900: var(--rouge900);
$rouge700: var(--rouge700);
$rouge500: var(--rouge500);
$rouge300: var(--rouge300);
$rouge100: var(--rouge100);

$orange: var(--orange);
$orange900: var(--orange900);
$orange700: var(--orange700);
$orange500: var(--orange500);
$orange300: var(--orange300);
$orange100: var(--orange100);

$jaune: var(--jaune);
$jaune900: var(--jaune900);
$jaune700: var(--jaune700);
$jaune500: var(--jaune500);
$jaune300: var(--jaune300);
$jaune100: var(--jaune100);
$jauneLight: var(--jauneLight);

$vert: var(--vert);
$vert900: var(--vert900);
$vert700: var(--vert700);
$vert500: var(--vert500);
$vert300: var(--vert300);
$vert100: var(--vert100);
$vertDark: var(--vertDark);

$bleu: var(--bleu);
$bleu900: var(--bleu900);
$bleu700: var(--bleu700);
$bleu500: var(--bleu500);
$bleu300: var(--bleu300);
$bleu100: var(--bleu100);
$bleuDark: var(--bleuDark);

$violet: var(--violet);
$violet900: var(--violet900);
$violet700: var(--violet700);
$violet500: var(--violet500);
$violet300: var(--violet300);
$violet100: var(--violet100);
$violetDark: var(--violetDark);

$rose: var(--rose);
$rose900: var(--rose900);
$rose700: var(--rose700);
$rose500: var(--rose500);
$rose300: var(--rose300);
$rose100: var(--rose100);
$roseDark: var(--roseDark);

a.ui-state-default {
    color: $gris700;
}