// Variables definition file.
// _
// About: In this file all the base variables for the grid, typo and color systems are set.
// If you want to change SCSS-Variables used in any other file of this project, this is the place for it.


// Grid base definition.
// _
// Has effect on the grid wherever it is used.

$grid-gutter: 1.25rem; // The grid gap between columns.
$grid-column-count: 16; // The default amount of columns added to a grid if there is no override.
$grid-layout-max-width: 68.75rem; // Maximum width of the grid to prevent the site from getting to wide on large screens.


// Utility Classes Grid system definition.
// _
// If you need more info on how this works, have a look into utility_classes.scss.
// _
// The key of the map defines the selector and the value how many columns the grid should have.
// You can add new values to the grid if you need utility classes with more columns.
// These settings will only have an effect on the utility classes and not on the main layout grid.

$utility-grids: (
  'grid-1': 1,
  'grid-2': 2,
  'grid-3': 3,
  'grid-4': 4
);


// Selectors for setting the grid on sub-elements with utility classes.
// _
// BEWARE: Unlike other systems like bootstrap f.e.
// the grid will not be defined on the element containing the class directly.
// Instead it will be set on the following selectors beneath the set class element.
// You can add more selectors this setting if you need the grid to work on more elements.

$utility-grids-container-selectors: '> .view-content, > .field__items, > .details-wrapper';


// Breakpoint definitions.
// _
// This map defines all the breakpoints used by openculturas_base to be easily used in scss files.
// _
// Have a look at the 'breakpoint' mixin in mixins.scss for more info on how to use it.
// _
// You can change the values to match your design better, by changing the media selectors.
// Also you can add new breakpoints if you need them.
// _
// But BEWARE: It is NOT recommended to DELETE any of the default breakpoint definitions below.
// Since they are used by the scss files, this would most likely result in a broken compilation process.

$breakpoints: (
  xs: 'max-width: 29.9375rem', // < 480px
  s: 'min-width: 30rem', // @todo Not consistent
  m: 'min-width: 48rem',
  l: 'min-width: 62rem',
  xl: 'min-width: #{$grid-layout-max-width}'
);


// Default color definitions, for if the theme has no color config.
// _
// BEWARE: These are just sensible defaults.
// These will set initial values for the CSS custom properties used anywhere in the theme for mapping colors.
// _
// The openculturas_base theme has a backend config for overriding the default colors via CSS custom properties.
// So as long as you are setting the colors in the backend of the theme system ('settings' link on /admin/appearance)
// there should be no need to change the values in this file. They will be overridden by the config anyways.

$defaultColors: (
  'primary':        #a1167f,
  'primary-dark':   #483d8b,
  'danger':         #d60040,
  'danger-dark':    #a90000,
  'success':        #188009,
  'warning':        #ec6507,
  'complete':       #6a26a5,
  'info':           #1560b3,
  'neutral-60':     #1F1F1F,
  'neutral-50':     #303236,
  'neutral-40':     #64666A,
  'neutral-30':     #7B7D85,
  'neutral-20':     #B1B2B5,
  'neutral-10':     #E3E3E3,
  'neutral-canvas': #F6F6F6,
  'white':          #ffffff,
  'black':          #000000,
  'divider':        #E8E9EB
);


// Base font size definitions.
// _
// This map defines all the default font sizes.
// It is recommended to only use them with the 'size' function found in _functions.scss.
// Also it is recommended to never set a font size directly, but always via the 'size' function or 'typo' mixin.
// _
// Also the keys of the map will be used as a default selector. So 'small: 0.875rem' will also produce the following css:
// _
// @usage
//   small {
//     font-size: 0.875rem;
//   }
// _
// You can change the values to match your design better, by changing the sizes.
// Also you can add new font sizes if you need them.
// _
// But BEWARE: It is NOT recommended to DELETE any of the default font size definitions below.
// Since they are used by the scss files, this would most likely result in a broken compilation process.

$fontSizes: (
  h1: 2.5rem,
  h2: 2rem,
  h3: 1.75rem,
  h4: 1.375rem,
  h5: 1rem,
  h6: 0.875rem,
  big: 1.125rem,
  body: 1rem,
  small: 0.875rem,
  tiny: 0.75rem,
  teaser: 1.375rem,
);


// Default font mapping for headlines and body text.
// _
// Which fonts are used and mapped to the CSS custom properties is defined in the fonts.scss file.
// If you need different webfonts, please change the loading and mapping in the fonts.scss file.

$font-base: var(--font-base);
$font-head: var(--font-head);


// Font styles map.
// _
// Because font styles of the design system cannot be sufficiently styled only by size, and more properties are needed
// just like 'color' or a different 'font-family', this map helps you define all the default font styles regardless of
// the selector they are applied to.
// _
// This helps with keeping the font styles consistent around the whole system.
// _
// If you want to give an element the style of a h3 f.e., you can just use the 'typo' mixin like this for it to behave
// exactly like an default h3 element:
// _
// @usage
//  .textContainer {
//    @include typo(h3);
//  }
// _
// You can change the values and add properties, to match your design better, by changing the sizes.
// Also you can add new font styles and properties if you need them.
// _
// But BEWARE: It is NOT recommended to DELETE any of the default font style definitions below.
// Since they are used by the scss files, this would most likely result in a broken compilation process.
// You are allowed to delete singular properties of every definition but not to delete a definition completely.

$fontStyles: (
  tiny: (
    font-size: size(tiny),
  ),
  small: (
    font-size: size(small),
  ),
  body: (
    font-family: $font-base,
    font-size: size(body),
  ),
  allcaps: (
    text-transform: uppercase,
    letter-spacing: 0.05rem,
    line-height: 1.4,
  ),
  teaser: (
    font-size: size(teaser),
    font-family: $font-base,
    font-weight: bold,
    line-height: 1.4,
    text-transform: none,
    letter-spacing: 0,
  ),
  bold: (
    font-size: size(body),
    font-weight: bold,
  ),
  h6: (
    font-family: $font-base,
    font-size: size(h6),
    margin: 0.5em 0,
  ),
  h5: (
    font-family: $font-base,
    font-size: size(h5),
    font-weight: normal,
    text-transform: uppercase,
    letter-spacing: 0.05rem,
    margin: 0.5em 0,
  ),
  h4: (
    font-family: $font-base,
    font-size: size(h4),
    font-weight: normal,
    text-transform: uppercase,
    letter-spacing: 0.05rem,
    margin: 0.5em 0,
    color: $color-secondary,
  ),
  h3: (
    font-family: $font-head,
    font-size: size(h3),
    font-weight: normal,
    line-height: 1.2,
    margin: 0.5em 0,
    color: $color-headline,
  ),
  h2: (
    font-family: $font-head,
    font-size: size(h2),
    font-weight: normal,
    line-height: 1.2,
    margin: 0.5em 0,
    color: $color-headline,
  ),
  h1: (
    font-family: $font-head,
    font-size: size(h1),
    font-weight: normal,
    line-height: 1.2,
    margin: 0.5em 0,
    color: $color-headline,
  ),
);


// Fontawesome 6.
// _
// This theme comes with a copy of fontawesome 6 free version.
// You can use fontawesome like the official documentation with setting <i> elements or via scss mixins.
// _
// Have a look for the 'icon' mixin in mixins.scss for more info on how to use it.
// _
// The fontawesome package lives in 'themes/openculturas_base/fontawesome6', so we need to tell the fontawesome
// scss config, that our copy is in another directory relative to the compiled css file, for the font paths to resolve.

$fa-font-path: '../fontawesome6/webfonts';


// Fontawesome extend-only selectors for webfont names.
// _
// As long as you are using fontawesome 6 this should not need a change.
// These selectors work as a mapping for the 'icon' mixin so it will map icons to the right webfonts.
// _
// If for any reason, fontawesome decides they want to rename their webfonts, this is the place to adapt the new names.
 
%fas,
%fa-solid {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
}

%fab,
%fa-brands {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400;
}
