@use "colors" as *;

$column: 85px;
$gutter: 20px;
/// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin.
$grid-columns: 12;
$max-width: 1320px;
$column-with-gutter:            $column + $gutter;
// Use @include outer-container() which sets this and centers.
$layout-sidebar-width:          ($column * 3) + ($gutter * 2); // 295px
$layout-sidebar-width-reversed: 370px;

$l-max-content-width:           820px;
$l-max-content-wrapper:         1240px;

$header-mobile-controls-height: 40px;


// These variables control the vertical spacing in MF.
// No vertical spacing should exceed 70px.
$standard-spacing--large:    70px;
$standard-spacing--medium:   55px;
$standard-spacing--small:    45px;
$standard-spacing--xsmall:   24px;
$standard-spacing--xxsmall:  12px;
$standard-spacing--xxxsmall: 6px;

//letter-spacing for Texta
$letter-spacing-large:   .1em;
$letter-spacing-medium:  .05em;
$letter-spacing-small:   .02em;
$letter-spacing-default: 0;

// Close icon
// The close icon is not an actual icon. It is the multiplication
// symbol displayed in a pseudo element. To display properly,
// the following string should be used in the CSS `content` setting.
$close-icon: '\00d7';

// Legacy Bourbon Neat Variables
///Sets the default layout direction of the grid. Can be `LTR` or `RTL`.
$default-layout-direction: LTR !default;
$layout-direction: LTR !default;
$container-display-table: false !default;
/// When set to true, it sets the box-sizing property of all elements to `border-box`.
/// @example css - CSS Output
///   html {
///     box-sizing: border-box !default; }
///
///   *, *::after, *::before {
///     box-sizing: inherit !default;
///   }
$border-box-sizing: true !default;
/// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed.
$default-feature: min-width !default; // Default @media feature for the breakpoint() mixin


// FONTS
$fonts: "Noto Sans VF","Noto Sans","Helvetica", "Arial",sans-serif !default;
$fonts-mono: "Noto Sans Mono VF","Noto Sans Mono",monospace !default;


$fonts-langs-support: true !default; // Controls whether to load and render additional fonts for language support
$fonts-enable-rtl: false !default; // Controls whether to allow rtl scripts to render rtl, currently disabled in patternlab for imcompatible components.
$fonts-display-global: "swap" !default; // Controls the custom fonts download and render behavior https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display


// font weights
// Noto
$fonts-lightest: 150 !default; // only used for styling non text font weights, e.g. separator |
$fonts-light:    400 !default; // body font weight
$fonts-normal:   500 !default;
$fonts-semibold: 550 !default;
$fonts-bold:     600 !default;
$fonts-bolder:   700 !default;

//font sizes
$fonts-base:        100% !default;
$fonts-print:       16px !default;
// ----------------------------
$fonts-2xsmall : calc(11rem / 16) !default;     // 11px
$fonts-xsmall  : calc(12.25rem / 16) !default;  // 12.25px
$fonts-smaller : calc(13.5rem / 16) !default;   // 13.5px
$fonts-small   : calc(14.75rem / 16) !default;  // 14.75px
$fonts-medium  : 1rem !default;                 // normal paragraph text
$fonts-large   : 1.125rem !default;
$fonts-larger  : 1.25rem !default;              // H6
$fonts-xlarge  : 1.375rem !default;             // H5
$fonts-2xlarge : 1.5rem !default;               // H4
$fonts-3xlarge : 1.625rem !default;             // H3
$fonts-4xlarge : 1.75rem !default;              // H2 small 
$fonts-5xlarge : 2rem !default;                 // H2 medium
$fonts-6xlarge : 2.25rem !default;              // H2 large
$fonts-7xlarge : 2.5rem !default;               // H1 small
$fonts-8xlarge : 2.75rem !default;              // H1 medium
$fonts-9xlarge : 3rem !default;                 // H1 large
$fonts-10xlarge: 3.5rem !default;
$fonts-11xlarge: 4rem !default;
$fonts-12xlarge: 5.8rem !default;
$fonts-max     : 10.5rem !default;              // Error decorative letters

//letter-spacing for Texta
$letter-spacing-large:   0.1em;
$letter-spacing-medium:  0.05em;
$letter-spacing-small:   0.02em;
$letter-spacing-default: 0;


// Box shadow
$box-shadow: 0 0.25rem 0.5rem var(--mf-c-box-shadow-black) !default;