// Colors
//
// Every colors in this Colettes are variables.
// Each of these stylus variables are then associated with a [css variable](./section-design.html#kssref-design-colors).
// Prefer using a css variable and overwrite the stylus variable if necessary.
//
// Styleguide: Settings.Colors

// Layout and UI generic colors
//
// Colors:
// $color-base:                 #4c4d4e - text color
// $color-base-foreground:      #fff    - if text writen on $color-base
// $color-links:                #0062D9 - links color
// $color-highlight:            #cc190f - highlighted color
// $color-highlight-foreground: #fff    - if text writen on $color-highlight
// $color-native:               #fff7e2 - ads and external contents
// $color-native-foreground:    #4c4d4e - if text writen on $color-native
// $color-foreground-0:         #4c4d4e - 1st shade of foreground
// $color-foreground-1:         #878787 - 2nd shade of foreground
// $color-foreground-2:         #b7b7b7 - 3rd shade of foreground
// $color-foreground-3:         #c7c7c7 - 4th shade of foreground
// $color-background-0:         #fff    - 1st shade of background
// $color-background-1:         #f8f8f8 - 2nd shade of background
// $color-background-2:         #f1f1f1 - 3rd shade of background
// $color-background-3:         #e7e7e7 - 4th shade of background
// $color-background-4:         #b7b7b7 - 5th shade of background
//
// Styleguide: Settings.Colors.Generic

// Dark equivalent
//
// The values `$color-foreground-*-dark` are in fact generated. The original value is inverted and lightened at 41%:
// ```stylus
// $color-foreground-*-dark ?= lighten(invert($color-foreground-*), 41)
// ```
//
// The values `$color-background-*-dark` are also generated. The original value is darkened at 79%:
// ```stylus
// $color-background-*-dark ?= darken($color-background-*, 79)
// ```
//
// Colors:
// $color-base-dark:            #fff
// $color-base-foreground-dark: #4c4d4e
// $color-links-dark:           #4DADFF - $color-theme-default-dark
// $color-foreground-0-dark:    #FFFFFF
// $color-foreground-1-dark:    #e1e1e1
// $color-foreground-2-dark:    #b1b1b1
// $color-foreground-3-dark:    #a1a1a1
// $color-background-0-dark:    #363636
// $color-background-1-dark:    #2f2f2f
// $color-background-2-dark:    #282828
// $color-background-3-dark:    #1e1e1e
// $color-background-4-dark:    #000000
//
// Styleguide: Settings.Colors.Generic.Dark
$color-base ?= #4c4d4e
$color-base-foreground ?= #fff
$color-highlight ?= #cc190f
$color-highlight-foreground ?= #fff
$color-links ?= #0062D9
$color-native ?= #fff7e2
$color-native-foreground ?= #4c4d4e

// Dark equivalent if needed
$color-base-dark ?= #fff
$color-base-foreground-dark ?= #4c4d4e
$color-links-dark ?= $color-theme-default-dark

// Foreground
$color-foreground-0 ?= #4c4d4e
$color-foreground-1 ?= #878787
$color-foreground-2 ?= #b7b7b7
$color-foreground-3 ?= #c7c7c7

// Foreground Dark
$color-foreground-0-dark ?= lighten(invert($color-foreground-0), 41)
$color-foreground-1-dark ?= lighten(invert($color-foreground-1), 41)
$color-foreground-2-dark ?= lighten(invert($color-foreground-2), 41)
$color-foreground-3-dark ?= lighten(invert($color-foreground-3), 41)

// Background
$color-background-0 ?= #fff
$color-background-1 ?= #f8f8f8
$color-background-2 ?= #f1f1f1
$color-background-3 ?= #e7e7e7
$color-background-4 ?= #b7b7b7

// Background Dark
$color-background-0-dark ?= darken($color-background-0, 79)
$color-background-1-dark ?= darken($color-background-1, 79)
$color-background-2-dark ?= darken($color-background-2, 79)
$color-background-3-dark ?= darken($color-background-3, 79)
$color-background-4-dark ?= darken($color-background-4, 79)

// Alerts colors
//
// Colors for alerts messages.
//
// Colors:
// $color-info:    #0b4892 - Info
// $color-success: #3c7a09 - Success
// $color-warning: #b05105 - Warning
// $color-error:   #cc190f - Error
//
// Weight: 2
//
// Styleguide: Settings.Colors.Alerts
$color-info ?= #0b4892
$color-success ?= #3c7a09
$color-warning ?= #b05105
$color-error ?= #cc190f

// Black & White
//
// Universal real black and white, use for shade and lights.
//
// Colors:
// $color-black: #000 - real black
// $color-white: #fff - real white
//
// Weight: 3
//
// Styleguide: Settings.Colors.BnW
$color-black ?= #000
$color-white ?= #fff

// Theme colors
//
// The color palette is based upon 20 Minutes editorial color chart:
// - each editorial section has a related color
// - we use section names as aliases to define color variables and classes names
// - this colors should respect at least a 4.5 (`$contrast`) ratio relatively to white
// - if ratio is insufficient some modules add a text-shadow or swith to a darker color
//
// Colors:
// $color-theme-default:       #0b4892 - theme default
// $color-theme-sport:         #00b9f3 - theme sport
// $color-theme-entertainment: #cc190f - theme entertainment
// $color-theme-economy:       #053042 - theme economy
// $color-theme-community:     #930b48 - theme community
// $color-theme-weird:         #ef2a82 - theme weird
// $color-theme-partner:       #ff5400 - theme partner
// $color-theme-planet:        #48930b - theme planet
// $color-theme-media:         #000000 - theme media
// $color-theme-hightech:      #686868 - theme hightech
// $color-theme-summer:        #cc4c3c - theme summer
//
// Weight: 4
//
// Styleguide: Settings.Colors.Theme

// Dark equivalent
//
// All these colors are set with the same color as `$color-theme-default-dark`. It's however possible to set a color fo each theme by adding the suffix `-dark` on it.
//
// For exemple, `$color-theme-sport` will have it's equivalent value `$color-theme-sport-dark`
//
// Colors:
// $color-theme-default-dark:  #4DADFF - theme default dark
//
// Styleguide: Settings.Colors.Theme.Dark
$color-theme-default ?= #0b4892
$color-theme-sport  ?= #00b9f3
$color-theme-entertainment ?= #cc190f
$color-theme-economy ?= #053042
$color-theme-community ?= #930b48
$color-theme-weird ?= #ef2a82
$color-theme-partner ?= #ff5400
$color-theme-planet ?= #48930b
$color-theme-media ?= #000
$color-theme-hightech ?= #686868
$color-theme-summer ?= #cc4c3c
$color-theme-tempo ?= #cc0f53

/* Sections */
$colors-themes ?= {
    theme-default: $color-theme-default
    theme-sport: $color-theme-sport
    theme-entertainment: $color-theme-entertainment
    theme-economy: $color-theme-economy
    theme-community: $color-theme-community
    theme-weird: $color-theme-weird
    theme-partner: $color-theme-partner
    theme-planet: $color-theme-planet
    theme-media: $color-theme-media
    theme-hightech: $color-theme-hightech
    theme-summer: $color-theme-summer
    theme-tempo: $color-theme-tempo
}

$color-theme-default-dark ?= #4DADFF
$color-theme-sport-dark  ?= #4DADFF
$color-theme-entertainment-dark ?= #4DADFF
$color-theme-economy-dark ?= #4DADFF
$color-theme-community-dark ?= #4DADFF
$color-theme-weird-dark ?= #4DADFF
$color-theme-partner-dark ?= #4DADFF
$color-theme-planet-dark ?= #4DADFF
$color-theme-media-dark ?= #4DADFF
$color-theme-hightech-dark ?= #4DADFF
$color-theme-summer-dark ?= #4DADFF
$color-theme-tempo-dark ?= #4DADFF

// Social colors
//
// The social color palette is used for share and socials buttons.
//
// Colors:
// $color-social-dailymotion: #2068D4 - dailymotion
// $color-social-facebook:    #4c64a0 - facebook
// $color-social-flipboard:   #f52828 - flipboard
// $color-social-github:      #791e8f - github
// $color-social-googleplus:  #d14836 - googleplus
// $color-social-hootsuite:   #000000 - hootsuite
// $color-social-instagram:   #ff0040 - instagram
// $color-social-linkedin:    #0177b5 - linkedin
// $color-social-messenger:   #3d6bfb - messenger
// $color-social-pinterest:   #bd081c - pinterest
// $color-social-pocket:      #ed4054 - pocket
// $color-social-sms:         #48930b - sms
// $color-social-snapchat:    #fdfe00 - snapchat
// $color-social-twitter:     #00a7e7 - twitter
// $color-social-whatsapp:    #01a85a - whatsapp
// $color-social-youtube:     #eb3223 - youtube
//
// Styleguide: Settings.Colors.Social
$color-social-dailymotion ?= #2068D4
$color-social-facebook ?= #4c64a0
$color-social-flipboard ?= #f52828
$color-social-github ?= #791e8f
$color-social-googleplus ?= #d14836
$color-social-hootsuite ?= #000000
$color-social-instagram ?= #ff0040
$color-social-linkedin ?= #0177b5
$color-social-messenger ?= #3d6bfb
$color-social-pinterest ?= #bd081c
$color-social-pocket ?= #ed4054
$color-social-sms ?= #48930b
$color-social-snapchat ?= #fdfe00
$color-social-twitter ?= #00a7e7
$color-social-whatsapp ?= #01a85a
$color-social-youtube ?= #eb3223

$colors-socials ?= {
    social-dailymotion: $color-social-dailymotion
    social-facebook: $color-social-facebook
    social-flipboard: $color-social-flipboard
    social-github: $color-social-github
    social-googleplus: $color-social-googleplus
    social-hootsuite: $color-social-hootsuite
    social-instagram: $color-social-instagram
    social-linkedin: $color-social-linkedin
    social-messenger: $color-social-messenger
    social-pinterest: $color-social-pinterest
    social-pocket: $color-social-pocket
    social-sms: $color-social-sms
    social-snapchat: $color-social-snapchat
    social-twitter: $color-social-twitter
    social-whatsapp: $color-social-whatsapp
    social-youtube: $color-social-youtube
}