@import 'mediawiki.skin.variables.less';

/**
 * System font stack for sans-serif fonts
 *
 * `-apple-system` ('San Francisco') – Support: Safari 9+ macOS and iOS, Firefox macOS
 * `BlinkMacSystemFont` ('San Francisco') – Chrome 48+ macOS and iOS
 * `Segoe UI` – Windows Vista & newer
 * `Roboto` – Android 4.0
 * `Lato` – Wikimedia Design choice, OFL licensed
 * `Helvetica, Arial, sans-serif` – (Generic) Web fallback
 * Note that CSS Fonts Module Level 4's `system-ui` value has resulted in unresolved
 * side-effects in certain OS/language combinations and is therefore not included as of now.
 */
@font-family-base: @font-family-system-sans;

@font-size-browser: 16; // Assumed browser default of `16px`.
@font-size-root: 100%;
@font-size-root--feature-phone: 0.8 * @font-size-root;
// T282315: Use rem instead of em to avoid font-size compounding, resulting in smaller than intended text
@font-size-minerva-small: unit( 14 / @font-size-browser, rem ); // Equals `14px` at `16px` browser default.
@font-size-minerva-smallest: unit( 13 / @font-size-browser, rem ); // Equals `13px` at `16px` browser default.

// colors
@background-color-light: #eaecf0;
@background-color-lightest: #f8f9fa;
@box-shadow-color-drawer: rgba( 0, 0, 0, 0.35 );

//
// Icons
//
@icon-touch-area-sm: 34;
@icon-touch-area-md: 44;
@icon-color: #54595d;
@min-size-icon: 20px;
@size-icon: 1.5em;
@width-icon-gutter: 1em;

// Small icon
@icon-glyph-size-sm: 16;
@icon-size-sm: unit( @icon-glyph-size-sm / @font-size-browser, em );
@icon-padding-sm: unit( ( @icon-touch-area-sm - @icon-glyph-size-sm ) / 2 / @font-size-browser, em );

// Medium icon
@icon-glyph-size-md: 20;
@icon-size-md: unit( @icon-glyph-size-md / @font-size-browser, em );
@icon-padding-md: unit( ( @icon-touch-area-md - @icon-glyph-size-md ) / 2 / @font-size-browser, em );
@margin-icon-md-labelled: 8px;

// Navigation Drawers
@rightDrawerWidth: 60%;
@menuButtonIconSize: 3.5em;

// Headings
@fontSizeH1: 1.7em;
@fontSizeH2: 1.5em;
@fontSizeH3: 1.2em;

// Content
@contentPadding: 16px;
@contentMargin: 16px;

// Header
@siteHeaderHeight: unit( 54 / @font-size-browser, em );
@overlayHeaderHeight: unit( 48 / @font-size-browser, em );
@headerVerticalPadding: 0.15em;
@searchBoxWidth: 375/16em;
@deviceWidthTabletEms: unit( @width-breakpoint-tablet / @font-size-browser, em );
@brandingBoxWidth: @deviceWidthTabletEms - (3 * @menuButtonIconSize + @width-icon-gutter) - @searchBoxWidth;

@titleSectionSpacingTop: 20px;

// Page actions
// TODO: Replace by `@font-size-minerva-small`.
@taglineFontSize: 0.85em;

// colors
@semiTransparent: rgba( 0, 0, 0, 0.8 );

@lastModifiedBarActiveBackgroundColor: #00af89;
@background-color-toast-notification: #202122;

// Typography
@line-height-content: 1.65;

@headingMargin: 0.5em;

// blockquote
@padding-start-blockquote: 32px;
// Make it a tad smaller on mobile to fit more contents.
@padding-end-blockquote: 24px;
@padding-vertical-blockquote: 8px;

// custom tablet styling
@contentPaddingTablet: 3.35em;

// note since content does not use view border box we have to include padding.
@contentMaxWidthTablet: @width-breakpoint-desktop - ( 2 * @contentPaddingTablet );

// Wiki specific variables
@infoboxWidth: 320px;

// Animations & Transitions
// Transitions > Timing Functions
@transition-timing-function-menu: ease-in-out;

// = Print
@color-print: #000;
@color-print-subtle: #999;
@border-color-print: #999;