// @DO - do not modify this file unless requested by the client

//
// CSS Utilities
// Version - 1.0
//
// Note:
// These are utilities ONLY and not a complete framework. They were created to minimize the use of inline styles.
// They are designed to complement existing styles from the DJO Consumer e-commerce websites, which are currently on
// the Magento 2 platform.
// Common elements like buttons, forms, headers, etc., are already styled and are not part of this document.
//
// Techniques pulled from Twitter Bootstrap (http://getbootstrap.com/) and BassCSS (http://basscss.com)
//
//
//
// Naming Conventions:
//
// Class naming order: .attribute-breakpoint-location-amount
//
// Notes:
// No location is implied as "all" ( i.e. .rounded == round all corners )
// Attributes with amounts will have 3 levels and none ( 0-3 )
// Spacing will be in rems whenever possible
//
//    Examples:
//
//        .padding-left-1
//        .float-md-right
//        .margin-0
//        .float-left
//        .rounded-top
//

// Screen Sizes
@djo-screen-sm-min: 640px;  // Phone - Landscape & Below
@djo-screen-md-min: 768px;  // Tablet - Portrait
@djo-screen-lg-min: 1024px; // Tablet - Landscape

// XS is below sm only
@djo-screen-xs-min: (@djo-screen-sm-min - 1);


// Spacing for padding and margins
@djo-margin: 30px; // Where @djo-margin is the space between grid columns
@djo-space-01: @djo-margin / 2;
@djo-space-02: @djo-margin;
@djo-space-03: @djo-margin * 2;


// Create colors as an array and iterate to create classes
// Note: LESS can't modify ( i.e. lighten ) vars within an array
@djo-colors:

    e('white')        #fff,
    e('black')        #000,
    e('gray')         @djo-gray,
    gray-light        @djo-gray-light,
    primary           @do-primary-color,
    secondary         @do-secondary-color,
    primary-light     lighten(@do-primary-color, 50%),
    secondary-light   lighten(@do-secondary-color, 50%),

    success           #006400,
    success-light     #e5efe5,
    info              #6f4400,
    info-light        #fdf0d5,
    error             #e02b27,
    error-light       #fae5e5

;


// Type
@djo-base-font-size: 14;
@djo-base-line-height: 20 / @djo-base-font-size;

// Fonts
@djo-font-family-primary: @font-family__base;
@djo-font-family-secondary: @do-secondary-font-family;
@djo-font-family-tertiary: @do-tertiary-font-family;

// Base Border Radius
@djo-border-radius: 5px;

// Borders
@djo-border-style: solid;
@djo-border-width-1: 1px;
@djo-border-width-2: 2px;
@djo-border-width-3: 4px;
// @djo-border-width-4: 8px;