/**
 * WikimediaUI Base v0.18.0
 * Wikimedia Foundation user interface base variables
 * https://gerrit.wikimedia.org/g/wikimedia-ui-base/
 *
 * See also https://design.wikimedia.org/style-guide/
 */

// == Breakpoints ==
// The following numbers are prone to change with new information.

// Minimum available screen width at which a device can be considered a mobile device
// Many older feature phones have screens smaller than this value.
@width-breakpoint-mobile: 320px;

// Minimum available screen width at which a device can be considered a tablet
// The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
// enough to cover iPad (768px).
@width-breakpoint-tablet: 720px;

// Minimum available screen width at which a device can be considered a desktop.
@width-breakpoint-desktop: 1000px;

// Wider desktop breakpoint, currently used in Flow.
@width-breakpoint-desktop-wide: 1200px;

// Extra wide desktop breakpoint
@width-breakpoint-desktop-extrawide: 2000px;


// == Colors ==
// WikimediaUI (`wmui`) color palette
// See https://design.wikimedia.org/style-guide/visual-style_colors.html
// Don't use those variables directly, instead define your vars
// referring to them as applied further below.

@wmui-color-base0:    #000;    // = HSB 0°, 0%, 0%
@wmui-color-base10:   #202122; // = HSB 210°, 6%, 13%
@wmui-color-base20:   #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
@wmui-color-base30:   #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
@wmui-color-base50:   #a2a9b1; // = HSB 212°, 8%, 69%
@wmui-color-base70:   #c8ccd1; // = HSB 213°, 4%, 82%
@wmui-color-base80:   #eaecf0; // = HSB 220°, 3%, 94%
@wmui-color-base90:   #f8f9fa; // = HSB 210°, 1%, 98%
@wmui-color-base100:  #fff;    // = HSB 0°, 0%, 100%

@wmui-color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
@wmui-color-accent50: #36c;    // = HSB 220°, 75%, 80%
@wmui-color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%

@wmui-color-red30:    #b32424; // = HSB 360°, 80%, 70%
@wmui-color-red50:    #d33;    // = HSB 360°, 77%, 87%
@wmui-color-red90:    #fee7e6; // = HSB 3°, 9%, 100%

@wmui-color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
@wmui-color-yellow50: #fc3;    // = HSB 45°, 80%, 100%
@wmui-color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%

@wmui-color-green30:  #14866d; // = HSB 167°, 85%, 53%
@wmui-color-green50:  #00af89; // = HSB 167°, 100%, 69%
@wmui-color-green90:  #d5fdf4; // = HSB 166°, 16%, 99%

// Modifier colors, not part of official palette, limited to interaction state usage.
@wmui-color-base10--lighten: #404244;
@wmui-color-accent50--lighten: #447ff5; // = `lighten( @color-primary, 3 )`
@wmui-color-red50--lighten: #ff4242; // ~= `filter: brightness( 120% )`
@wmui-color-green50--lighten: #1c6665;
@wmui-color-purple50: #6b4ba1;

// From here on no static color values, only variable references.
// Background Colors
@background-color-base:           @wmui-color-base100;
@background-color-base--hover:    @wmui-color-base80;
@background-color-base--disabled: @wmui-color-base80;
@background-color-code:           @wmui-color-base90;
// 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches…)
@background-color-framed:         @wmui-color-base90;
@background-color-framed--hover:  @wmui-color-base100;
@background-color-framed--active: @wmui-color-base70;
// 'Filled' UI elements (Checkboxes, Radios, ProgressBars…)
@background-color-filled--disabled: @wmui-color-base70;
// Binary Input elements (Checkboxes, Radios, Toggle Switches)
@background-color-input-binary--active: @color-primary--active;
@background-color-input-binary--checked: @color-primary;
// Quiet Buttons
@background-color-quiet:          @background-color-base;
// Use `rgba()` values here as the quiet buttons need to blend in with background.
@background-color-quiet--hover:   rgba( 0, 24, 73, 7/255 ); // = `@wmui-color-base90` on white.
@background-color-quiet--active:  rgba( 0, 36, 73, 21/255 ); // = `@wmui-color-base80` on white.
// Toolbar and Tools
@background-color-toolbar:        @background-color-base;
@background-color-tool--hover:    @background-color-base--hover;
@background-color-tool--active:   @background-color-primary;
@background-color-tool--active-hover: @background-color-primary--hover;
// Tabs Navigation Background Color
@background-color-tabs:           @wmui-color-base80;
// User system messages (errors, warnings, successes, notices)
@background-color-error--framed: @wmui-color-red90;
@background-color-warning--framed: @wmui-color-yellow90;
@background-color-success--framed: @wmui-color-green90;
@background-color-notice--framed: @wmui-color-base80;
// Highlight Colors for text highlighting, think metaphorically text marker
@background-color-highlight:      rgba( 255, 182, 13, 0.4 ); // Equals to `#ffe29e` on `#fff` background.

// Foreground Colors
@color-base:                      @wmui-color-base10;
@color-base--hover:               @wmui-color-base10--lighten;
@color-base--active:              @wmui-color-base0;
@color-base--inverted:            @wmui-color-base100;
@color-base--emphasized:          @wmui-color-base0;
@color-base--subtle:              @wmui-color-base30;
@color-base--disabled:            @wmui-color-base30;
@color-filled--disabled:          @color-base--inverted;
@color-placeholder:               @wmui-color-base30;
// Primary 'Progressive' Color, Background Color and states
@background-color-primary:        @wmui-color-accent90;
@background-color-primary--hover: rgba( 41, 98, 204, 0.1 );
@color-primary:                   @wmui-color-accent50;
@color-primary--hover:            @wmui-color-accent50--lighten;
@color-primary--active:           @wmui-color-accent30;
@color-primary--focus:            @color-primary;
// 'Destructive' Color, Background Color and states
@background-color-destructive:    @wmui-color-red90;
@color-destructive:               @wmui-color-red50;
@color-destructive--hover:        @wmui-color-red50--lighten;
@color-destructive--active:       @wmui-color-red30;
@color-destructive--focus:        @color-destructive;
// Secondary Color and states (links only)
@color-secondary:                 @wmui-color-green50;
@color-secondary--hover:          @wmui-color-green50--lighten;
@color-secondary--active:         @wmui-color-green30;
@color-secondary--focus:          @color-secondary;
// User system messages (errors, warnings, successes, notices)
@color-error:                     @wmui-color-red50;
@color-warning:                   @wmui-color-base0;
@color-success:                   @wmui-color-green30;
@color-success--framed:           @wmui-color-base0;
@color-notice:                    @wmui-color-base0;
// Toolbar and Tools
@color-tool--hover:               @color-base--emphasized; // Used here in combination with `:hover` background-color turning light grey
@color-tool--active:              @color-primary;


// Opacity
@opacity-base:                    1;
@opacity-base--disabled:          0.51; // = `#7d7d7d` on `background-color: #fff`; HSB 0°, 0%, 49%
@opacity-icon-base:               0.87; // = `#222` on `background-color: #fff`, closest to `#202122`
@opacity-icon-base--hover:        0.74; // = `#424242` on `background-color: #fff`, closest to `#404244`
@opacity-icon-base--selected:     1;
@opacity-icon-accessory:          0.67; // = `#555`, closest to `#54595d` on background-color `#fff`.


// == Positioning ==
// Z-Index
@z-index-base:                    0;
@z-index-overlay:                 101;


// == Box Model properties ==
// `@*size` variables are used for `*width` & `*height` properties.
@min-size-base:                   32px; // Values used for `min-*` are defined in `px`, see T130691.
@size-base:                       32px;

@min-size-icon:                   20px;
@size-icon:                       20px;
@min-size-indicator:              12px;
@size-indicator:                  12px;
@size-input-binary:               20px;
@size-tool:                       42px;

// Max Widths
@max-width-base:                  50em;
@max-width-button:                28.75em; // = `460px` at `16px` base, see T95367
@max-width-input:                 @max-width-base;
@max-width-input-inline:          100%;

// Border
@border-base:                     @border-width-base @border-style-base @border-color-base;
@border-dialog:                   @border-base;
@border-menu:                     @border-base;
@border-input-binary:             @border-width-base @border-style-base @border-color-input-binary;
// User system messages (errors, warnings, successes, notices)
@border-error:                    @border-width-base @border-style-base @border-color-error;
@border-warning:                  @border-width-base @border-style-base @border-color-warning;
@border-success:                  @border-width-base @border-style-base @border-color-success;
@border-notice:                   @border-base;
// Border Colors
@border-color-base:               @wmui-color-base50;
@border-color-base--hover:        @wmui-color-base50;
@border-color-base--active:       @wmui-color-base30;
@border-color-base--focus:        @color-primary--focus;
@border-color-base--disabled:     @wmui-color-base70;
@border-color-filled--disabled:   @color-filled--disabled;
// Border Colors primary buttons
@border-color-primary:            @color-primary;
@border-color-primary--hover:     @color-primary--hover;
@border-color-primary--active:    @color-primary--active;
@border-color-primary--focus:     @border-color-primary;
@border-color-destructive:        @color-destructive;
@border-color-destructive--hover: @color-destructive--hover;
@border-color-destructive--active: @color-destructive--active;
@border-color-destructive--focus: @border-color-destructive;
@border-color-inset--focus:       @color-base--inverted;
@border-color-input--hover:       @border-color-base--active;
@border-color-input-binary:       @border-color-base--active;
@border-color-input-binary--active: @color-primary--active;
@border-color-input-binary--checked: @color-primary;
@border-color-heading:            @wmui-color-base70;
@border-color-divider:            @wmui-color-base50;
@border-color-wikitable:          rgba( 84, 89, 93, 0.3 ); // See T168029
// Border Colors user system messages
@border-color-error:              @color-error;
@border-color-warning:            @wmui-color-yellow50;
@border-color-success:            @color-success;
@border-color-notice:             @border-color-base;
// Border Styles
@border-style-base:               solid;
// Border Widths
@border-width-base:               1px;
// Border Radius
@border-radius-base:              2px;
@border-radius-circle:            50%;

// Paddings
@padding-base:                    @padding-vertical-base @padding-horizontal-base;
@padding-input-text:              @padding-vertical-base @padding-horizontal-input-text;
@padding-horizontal-base:         12px;
// Must be < `8` as it cuts off scripts like Burmese. Directly connected to `line-height` further down.
@padding-vertical-base:           5px;
@padding-horizontal-input-text:   8px;

// Box Shadows
// Base `box-shadow` set to `transparent` for transition purpose.
@box-shadow-base:                 inset 0 0 0 1px transparent;
@box-shadow-base--focus:          inset 0 0 0 1px @wmui-color-accent50;
@box-shadow-primary--focus:       inset 0 0 0 1px @color-primary, inset 0 0 0 2px @color-base--inverted;
@box-shadow-destructive--focus:   inset 0 0 0 1px @color-destructive, inset 0 0 0 2px @color-base--inverted;
@box-shadow-inset--inverted:      inset 0 0 0 1px @color-base--inverted;
@box-shadow-filled--disabled:     inset 0 0 0 1px @color-filled--disabled;
@box-shadow-card:                 0 1px 1px rgba( 0, 0, 0, 0.15 );
@box-shadow-dialog:               0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
@box-shadow-menu:                 @box-shadow-dialog;

// Outlines
// Enable Windows high contrast mode on certain widgets, that have default outlines overridden.
@outline-base--focus:             @border-width-base @border-style-base transparent;


// == Typography incl. print properties ==
// See https://design.wikimedia.org/style-guide/visual-style_typography.html
// Font Families
@font-family-base:                @font-family-sans;
@font-family-heading-main:        @font-family-serif;
// To be deprecated, see T247166.
@font-family-sans:                'Helvetica Neue', 'Helvetica', 'Liberation Sans', 'Arial', sans-serif;
@font-family-sans--fallback:      sans-serif;
// Provide better operating system-specific readability, see T175877.
// `system-ui` is currently not an option due to OS/language combination issues, see T175877#4776576.
@font-family-system-sans:         -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
@font-family-serif:               'Linux Libertine', 'Georgia', 'Times', serif;
@font-family-serif--fallback:     serif;
// Provide better operating system-specific monospace stack, see T209915.
@font-family-monospace:           'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
@font-family-monospace--fallback: monospace, monospace; // See T176636.
// Font Weights
@font-weight-base:                @font-weight-normal;
// See https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping
@font-weight-hairline:            100;
@font-weight-light:               300;
@font-weight-normal:              400;
@font-weight-semi-bold:           600;
@font-weight-bold:                700;
// Line Heights
@line-height-base:                1.6;
@line-height-heading:             1.3;
@text-decoration-link--hover:     none;
// Text Shadows
@text-shadow-base:                0 1px 1px @color-base--inverted; // 'coined' effect
@text-shadow-base--disabled:      @text-shadow-base;


// == Other Properties ==
// Cursors
@cursor-base--disabled:           default;


// == Animation & Transition ==
// Transitions
@transition-base:                 @transition-duration-base; // `ease` is the initial value
@transition-ease-medium:          @transition-duration-medium;
// `ease-out` is preferably used on human initiated transitions, for example dialogs
@transition-ease-out-medium:      ease-out @transition-duration-medium;
// Transitions > Durations
@transition-duration-base:        100ms;
@transition-duration-medium:      250ms;