// Skin
//
// A set of colors that is used as base in all PAM components.
// They all have their specific contextual intention and usage.
//
// Weight: 1
//
// Style guide: traits.skin

// ==================================================================
//  Skin
// ==================================================================

// Primary
//
// Colors used to represent primary and complementary interface
// elements.
//
// Markup:
// <div pam-Grid>
//     <div pam-Unit="1-1 medium:1-3">
//         <div pam-Skin-Test pam-skin="primary:light">@skin-primary-light</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-3">
//         <div pam-Skin-Test pam-skin="primary">@skin-primary</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-3">
//         <div pam-Skin-Test pam-skin="primary:dark">@skin-primary-dark</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-3">
//         <div pam-Skin-Test pam-skin="accent">@skin-accent</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-3">
//         <div pam-Skin-Test pam-skin="feature">@skin-feature</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-3">
//         <div pam-Skin-Test pam-skin="divider">@skin-divider</div>
//     </div>
// </div>
//
// Weight: 1
//
// Style guide: traits.skin.primary

[pam-Skin~="primary"] {
    background-color: @skin-primary;
}

[pam-Skin~="primary:light"] {
    background-color: @skin-primary-light;
}

[pam-Skin~="primary:dark"] {
    background-color: @skin-primary-dark;
}

[pam-Skin~="accent"] {
    background-color: @skin-accent;
}

[pam-Skin~="feature"] {
    background-color: @skin-feature;
}

[pam-Skin~="divider"] {
    background-color: @skin-divider;
}

//  Information
// ==================================================================

// Information
//
// Colors used to represent information interface elements.
//
// Markup:
// <div pam-Grid>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test pam-skin="info">@skin-info</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test pam-skin="success">@skin-success</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test pam-skin="warn">@skin-warn</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test pam-skin="danger">@skin-danger</div>
//     </div>
// </div>
//
// Weight: 3
//
// Style guide: traits.skin.information

[pam-Skin~="info"] {
    background-color: @skin-info;
}

[pam-Skin~="success"] {
    background-color: @skin-success;
}

[pam-Skin~="warn"] {
    background-color: @skin-warn;
}

[pam-Skin~="danger"] {
    background-color: @skin-danger;
}

//  Greyscales
// ==================================================================

// Greyscales
//
// Base greyscales colors.
//
// Markup:
// <div pam-Grid>
//     <div pam-Unit="1-1 medium:1-5">
//         <div pam-Skin-Test pam-skin="lighter">@skin-lighter</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-5">
//         <div pam-Skin-Test pam-skin="light">@skin-light</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-5">
//         <div pam-Skin-Test pam-skin="hint">@skin-hint</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-5">
//         <div pam-Skin-Test pam-skin="dark">@skin-dark</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-5">
//         <div pam-Skin-Test pam-skin="darker text">@skin-darker</div>
//     </div>
// </div>
//
// Weight: 4
//
// Style guide: traits.skin.greyscales

[pam-Skin~="light"] {
    background-color: @skin-light;
}

[pam-Skin~="lighter"] {
    background-color: @skin-lighter;
}

[pam-Skin~="hint"] {
    background-color: @skin-hint;
}

[pam-Skin~="dark"] {
    background-color: @skin-dark;
}

[pam-Skin~="darker"] {
    background-color: @skin-darker;
}

//  Text
// ==================================================================

// Text
//
// Colors used to represent text interface elements
//
// Markup:
// <div pam-Grid>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test="text:light" pam-skin="text">@skin-text</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test="text:light" pam-skin="text text:hint">@skin-text-hint</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test="text:light" pam-skin="text text:light">@skin-text-light</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test="text:light" pam-skin="text text:lighter">@skin-text-lighter</div>
//     </div>
// </div>
// <div pam-Grid>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test="text" pam-skin="text:primary">@skin-text-primary</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test="text" pam-skin="text:secondary">@skin-text-secondary</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test="text" pam-skin="text:darker">@skin-text-darker</div>
//     </div>
//     <div pam-Unit="1-1 medium:1-4">
//         <div pam-Skin-Test="text" pam-skin="text:dark">@skin-dark</div>
//     </div>
// </div>
//
// Weight: 5
//
// Style guide: traits.skin.text

[pam-Skin~="text"] {
    color: @skin-text;
}

[pam-Skin~="text:primary"] {
    color: @skin-text-primary;
}

[pam-Skin~="text:secondary"] {
    color: @skin-text-secondary;
}

[pam-Skin~="text:darker"] {
    color: @skin-text-darker;
}

[pam-Skin~="text:dark"] {
    color: @skin-text-dark;
}

[pam-Skin~="text:hint"] {
    color: @skin-text-hint;
}

[pam-Skin~="text:light"] {
    color: @skin-text-light;
}

[pam-Skin~="text:lighter"] {
    color: @skin-text-lighter;
}