// @file:
//  Variables definition file.

//  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.

:root {
  --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.
  --row-gap: 1.25rem; // The grid gap between rows.
  --grid-layout-max-width: 68.75rem; // Maximum width of the grid to prevent the site from getting too wide on large screens.
  --grid-gutter-count: calc(var(--grid-column-count) - 1);
  --grid-column-width: calc(calc(100% - calc(var(--grid-gutter-count) * var(--grid-gutter))) / var(--grid-column-count));
}

// Utility Classes Grid system definition.
// _
// If you need more info on how this works, have a look into grid.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 e. g. bootstrap
// 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 to 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 used in scss files.
// _
// Have a look at the 'breakpoint' mixin in mixins.scss for more info on how to use it.
// _
// CAUTION: 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.
// prettier-ignore
$breakpoints: (                // Size at default font size 16px;
  xs: 'max-width: 29.9999rem', // < 480px
  s: 'min-width: 30rem',       // 480px
  m: 'min-width: 48rem',       // 768px
  l: 'min-width: 62rem',       // 992px
  xl: 'min-width: #{$grid-layout-max-width}'
);

// Colors.
// _
// CAUTION: Do not change CSS color variable names (in openculturas_base theme)

:root {
  // Default colors
  --color-primary: #a1167f;
  --color-secondary: #483d8b;
  --color-text: #1f1f1f;
  --color-text-muted: #7b7d85;
  --color-text-muted--opacity: color-mix(in sRGB, var(--color-text-muted) 50%, transparent);
  --color-text-inverted: #fff;
  --color-headline: #1f1f1f;
  --color-map-marker: var(--color-link);

  // Functional colors
  --color-link: #a1167f;
  --color-link--opacity: #a1167f5c; // 64% transparent link color
  --color-interaction: #483d8b;
  --color-danger: #d51317;
  --color-info: #1f71b8;
  --color-success: #188009;
  --color-warning: #ffc400;

  // Contrast colors
  --color-oc-spectrum-1: #d41317; // oc red
  --color-oc-spectrum-2: #da5914; // oc orange
  --color-oc-spectrum-3: #fd0; // oc yellow
  --color-oc-spectrum-4: #008d36; // oc green
  --color-oc-spectrum-5: #1d70b7; // oc blue

  // Background colors
  --color-neutral-canvas: #f6f6f6;
  --color-bg-dark: #303236;
  --color-bg-slight-contrast: #e8e9eb;
  --color-bg-hardly-any-contrast: #f5f5f5;
  --color-bg-light: #fff;
  --color-bg-link-translucent: color-mix(in oklab, var(--color-link) 7%, transparent);
  --color-bg-light-translucent: color-mix(in oklab, var(--color-bg-light) 85%, transparent);
  --color-bg-light-opaque: color-mix(in oklab, var(--color-bg-light) 85%, transparent);
  --color-bg-page-layout: color-mix(in oklab, var(--color-bg-light) 85%, transparent);
  --color-bg-footer: #111;

  // Divider (line) colors
  --color-divider-light: #e8e9eb;
  --color-divider-dark: #7b7d85;

  // Gradients (use in background-image declaration)
  --color-gradient-smooth: linear-gradient(90deg, var(--color-oc-spectrum-1), var(--color-oc-spectrum-2), var(--color-oc-spectrum-3), var(--color-oc-spectrum-4), var(--color-oc-spectrum-5));
  --color-gradient-blocks: linear-gradient(90deg, var(--color-oc-spectrum-1) 0%, var(--color-oc-spectrum-1) 20%, var(--color-oc-spectrum-2) 20%, var(--color-oc-spectrum-2) 40%, var(--color-oc-spectrum-3) 40%, var(--color-oc-spectrum-3) 60%, var(--color-oc-spectrum-4) 60%, var(--color-oc-spectrum-4) 80%, var(--color-oc-spectrum-5) 80%, var(--color-oc-spectrum-5) 100%);

  // Slim select overrides
  --ss-primary-color: var(--color-info);
  --ss-bg-color: var(--color-bg-light);
  --ss-font-color: var(--color-text);
  --ss-font-placeholder-color: var(--color-text-muted);
  --ss-disabled-color: var(--color-text-muted);
  --ss-border-color: var(--color-divider-dark);
  --ss-highlight-color: var(--color-warning);
  --ss-success-color: var(--color-success);
  --ss-error-color: var(--color-danger);
  --ss-focus-color: var(--color-info);
}

body {
  // Messages (system feedback)
  --color-bg-danger: color-mix(in oklab, var(--color-danger) 15%, var(--color-bg-light));
  --color-bg-danger-light: color-mix(in oklab, var(--color-danger) 15%, var(--color-bg-light));
  --color-danger-dark: color-mix(in oklab, var(--color-danger) 60%, var(--color-bg-dark));
  --color-bg-info: color-mix(in oklab, var(--color-info) 20%, var(--color-bg-light));
  --color-info-dark: color-mix(in oklab, var(--color-info) 60%, var(--color-bg-dark));
  --color-bg-success: color-mix(in oklab, var(--color-success) 10%, var(--color-bg-light));
  --color-success-dark: color-mix(in oklab, var(--color-success) 60%, var(--color-bg-dark));
  --color-bg-warning: color-mix(in oklab, var(--color-warning) 20%, var(--color-bg-light));
  --color-warning-dark: color-mix(in oklab, var(--color-warning) 30%, var(--color-bg-dark));

  // Form & other colors
  --color-bg-form: color-mix(in oklab, var(--color-interaction) 5%, var(--color-bg-light));
  --color-bg-fieldset: color-mix(in oklab, var(--color-interaction) 5%, transparent);
  --outline-active: 2px dashed var(--color-interaction);
  --color-bg-cluster-icon: var(--color-link);

  // Miscellaneous
  --box-shadow: -0.5rem 0.5rem 1rem -0.5rem color-mix(in sRGB, var(--color-bg-dark) 85%, transparent);
  --box-shadow-utilities: 0rem 0.5rem 1rem -0.25rem color-mix(in sRGB, var(--color-bg-dark) 45%, transparent);
  --button-border-radius: 4px;
  --image-chevron: url(../images/chevron-down.svg);
}

// Dark theme derivates

:root.dark {
  // Default colors
  --color-primary: #a1167f;
  --color-interaction: #9e95d0; // Secondary
  --color-text: #fafafa;
  --color-text-muted: #9b9d9a;
  --color-text-inverted: #191919;
  --color-headline: #efefef;
  --color-link: #ea62c8;
  --color-link--opacity: #ea62c8a3; // 64% transparent link color
  --color-danger: #f53337;
  --color-info: #8ccaff;
  --color-success: #188009;
  --color-warning: #ffc400;
  --color-neutral-canvas: #191919;
  --color-bg-dark: #8b8d95;
  --color-bg-slight-contrast: #000;
  --color-bg-hardly-any-contrast: #1c1c1c;
  --color-bg-light: #191919;
  --color-divider-light: #38393b;
  --color-divider-dark: #8b8d95;
  --color-bg-link-translucent: color-mix(in sRGB, var(--color-link) 10%, transparent);

  body {
    --image-chevron: url(../images/chevron-down-inv.svg);
  }

  .inverted {
    --color-text-inverted: var(--color-text);
  }
}

// SASS-color-variables containing CSS-variables
// _
// Deprecation warning: sass variables will be replaced by custom properties ("CSS variables")
// Kept for legacy reasons until

$color-primary: var(--color-primary);
$color-interaction: var(--color-interaction);
$color-text: var(--color-text);
$color-text-muted: var(--color-text-muted);
$color-text-inverted: var(--color-text-inverted);
$color-headline: var(--color-headline);
$color-link: var(--color-link);
$color-neutral-canvas: var(--color-neutral-canvas);
$color-bg-dark: var(--color-bg-dark);
$color-bg-slight-contrast: var(--color-bg-slight-contrast);
$color-bg-light: var(--color-bg-light);
$color-divider-light: var(--color-divider-light);
$color-divider-dark: var(--color-divider-dark);
$color-danger: var(--color-danger);
$color-info: var(--color-info);
$color-success: var(--color-success);
$color-warning: var(--color-warning);

// Color derivates
$color-bg-danger: var(--color-bg-danger);
$color-danger-dark: var(--color-danger-dark);
$color-bg-danger-light: var(--color-bg-danger-light);
$color-bg-info: var(--color-bg-info);
$color-bg-dark: var(--color-bg-dark);
$color-bg-success: var(--color-bg-success);
$color-success-dark: var(--color-success-dark);
$color-bg-warning: var(--color-bg-warning);
$color-warning-dark: var(--color-warning-dark);
$color-bg-form: var(--color-bg-form);
$color-bg-fieldset: var(--color-bg-fieldset);
$color-bg-link-opacity: var(--color-link--opacity);

// Other
$border-radius-button: var(--border-radius-button);

// Fonts.

// Font sizes

:root {
  --font-size-xxl: 2rem;
  --font-size-xl: 1.5rem;
  --font-size-l: 1.25rem;
  --font-size-default: 1rem;
  --font-size-s: 0.875rem;
  --font-size-icon: 1.5rem;

  @include breakpoint(m) {
    --font-size-xxl: 2.5rem;
    --font-size-xl: 1.75rem;
  }
}

//  Default font mapping for headlines and body text.
// _
//  @see: fonts.scss file.

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

// FontSizes
$font-size-xxl: var(--font-size-xxl);
$font-size-xl: var(--font-size-xl);
$font-size-l: var(--font-size-l);
$font-size-default: var(--font-size-default);
$font-size-s: var(--font-size-s);
$font-size-icon: var(--font-size-icon);

// Default active style
$outline-active: var(--outline-active);

// Button radius
$button-border-radius: var(--button-border-radius);

// Fontawesome 6.
// _
// openculturas_base theme use the 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 '/libraries/font-awesome/webfonts', so we need to tell the Fontawesome
// scss config that our copy is in another directory relative to the docroot, for the font paths to resolve.

$fa-font-path: "/libraries/font-awesome/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 web fonts.
// _
// If for any reason Fontawesome decides to rename their web fonts, this is the place to adapt the new names.

%far,
%fas,
%fa-solid {
  font-family: "Font Awesome 6 Free", sans-serif;
  font-weight: 900;
}

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

// Fontawesome uses em, we want rem
.fa-2x {
  font-size: 2rem;
}
.fa-3x {
  font-size: 3rem;
}
.fa-4x {
  font-size: 4rem;
}
.fa-5x {
  font-size: 5rem;
}
