/* =========================================================================
 * Custom stylesheet for the MZK v3 client (test)
 * -------------------------------------------------------------------------
 * Injected into every page by nginx (ngx_http_sub_module) as
 *   <link rel="stylesheet" href="/local-config/custom.css">   (see nginx-default.conf)
 * Loads AFTER the client styles, so declarations here override ("shadow") the
 * theme. Edit + `make redeploy` (configMap hash change rolls the pod).
 *
 * The client is token-based: colours/sizes/spacing are CSS custom properties on
 * :root (and :root.dark for dark mode). To shadow one, add it to the active
 * :root / :root.dark block below with your value. The full catalogue of every
 * token and its default is in the comment at the end of this file.
 *
 * FONT is the exception: the client sets body { font-family: <Karla literal> },
 * not var(--font-family-*), so override the font with a selector rule (below).
 * ========================================================================= */

/* Roboto full weight range — @import must precede all style rules to be valid. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* ---- ACTIVE OVERRIDES (light) ---- */
:root {
  /* example — brand primary colour:
  --color-primary: #0063CC;
  --color-primary-hover: #004D9E;
  --color-text-link: #0063CC;
  */
}

/* ---- ACTIVE OVERRIDES (dark) ---- */
:root.dark {
}

/* ---- FONT: match digitalniknihovna.cz/mzk (Roboto) ---- */
body {
  font-family: Roboto, "Helvetica Neue", sans-serif !important;
}

/*

=========================================================================
 TOKEN REFERENCE - client defaults. Copy a line into the active :root /
 :root.dark above and change its value to shadow it.
=========================================================================

==== TYPOGRAPHY (11) ====
:root {
  --font-family-primary: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-family-body: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-family-headings: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-family-mono: 'Consolas', 'Monaco', monospace;
  --font-weight-thin: 100;
  --font-weight-extra-light: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
}

==== SIZES / SPACING / LAYOUT (67) ====
:root {
  --base-padding: 20px;
  --base-margin: 20px;
  --base-gap: 20px;
  --base-border-radius: 8px;
  --search-page-padding: 16px;
  --item-card-shadow: 0 6px 15.9px 0 rgba(0, 0, 0, 0.12);
  --font-size-xs: calc(11px * var(--accessibility-text-scale));
  --font-size-xxsmall: calc(12px * var(--accessibility-text-scale));
  --font-size-xsmall: calc(13px * var(--accessibility-text-scale));
  --font-size-small: calc(14px * var(--accessibility-text-scale));
  --font-size-base: calc(16px * var(--accessibility-text-scale));
  --font-size-large: calc(18px * var(--accessibility-text-scale));
  --font-size-xlarge: calc(20px * var(--accessibility-text-scale));
  --font-size-xxlarge: calc(24px * var(--accessibility-text-scale));
  --font-size-3xlarge: calc(28px * var(--accessibility-text-scale));
  --font-size-4xlarge: calc(32px * var(--accessibility-text-scale));
  --font-size-5xlarge: calc(40px * var(--accessibility-text-scale));
  --font-size-6xlarge: calc(48px * var(--accessibility-text-scale));
  --header-height: 56px;
  --toolbar-height: 48px;
  --small-gap: 1px;
  --license-bar-height: 38px;
  --playback-bar-height-value: 52px;
  --info-banner-height: 55px;
  --metadata-sidebar-width: 285px;
  --spacing-x05: 2px;
  --spacing-x1: 4px;
  --spacing-x2: 8px;
  --spacing-x2-5: 10px;
  --spacing-x3: 12px;
  --spacing-x4: 16px;
  --spacing-x5: 20px;
  --spacing-x6: 24px;
  --spacing-x7: 28px;
  --spacing-x8: 32px;
  --spacing-x10: 40px;
  --spacing-x12: 48px;
  --spacing-x14: 56px;
  --spacing-x16: 64px;
  --spacing-x24: 96px;
  --viewer-controls-width: 48px;
  --line-height-xs: calc(16px * var(--accessibility-text-scale));
  --line-height-xs-15: calc(18px * var(--accessibility-text-scale));
  --line-height-xs2: calc(22px * var(--accessibility-text-scale));
  --line-height-1: calc(20px * var(--accessibility-text-scale));
  --line-height-2: calc(24px * var(--accessibility-text-scale));
  --line-height-3: calc(28px * var(--accessibility-text-scale));
  --line-height-4: calc(32px * var(--accessibility-text-scale));
  --line-height-5: calc(36px * var(--accessibility-text-scale));
  --line-height-6: calc(40px * var(--accessibility-text-scale));
  --line-height-7: calc(44px * var(--accessibility-text-scale));
  --line-height-8: calc(56px * var(--accessibility-text-scale));
  --line-height-9: calc(48px * var(--accessibility-text-scale));
  --card-min-width: 144px;
  --card-gap: 12px;
  --card-width: 144px;
  --card-height: 303px;
  --card-height-with-badge: 335px;
  --card-image-aspect-ratio: 129 / 160;
  --carousel-card-width: 185px;
  --carousel-card-height: 388px;
  --carousel-image-aspect-ratio: 160 / 220;
  --portrait-card-width: 200px;
  --portrait-card-height: 324px;
  --portrait-image-aspect-ratio: 167 / 220;
  --periodical-volume-card-width: 144px;
  --periodical-volume-card-height: 231px;
}

==== COLORS - light (default) (118) ====
:root {
  --color-bg-base: #fff;
  --color-bg-light: #EFF2F5;
  --color-bg-bright: #DFE5EC;
  --color-bg-contrast: #BFCCD9;
  --overlay-bg: rgba(255, 255, 255, 0.7);
  --overlay-lock-bg: rgba(33, 33, 33, 0.5);
  --accessibility-text-scale: 1;
  --color-bg-low-efford: #FAEAC8;
  --color-bg-available: #DFF1C3;
  --color-bg-subdued-gray: rgba(128, 153, 179, 0.05);
  --sidebar-disabled-overlay: rgba(255, 255, 255, 0.6);
  --dialog-dark-backdrop: rgba(38, 51, 64, 0.60);
  --color-primary: #0063CC;
  --color-primary-hover: #004D9E;
  --color-primary-pressed: #003A79;
  --color-primary-disabled: #CCE5FF;
  --color-subdued-blue: rgba(0, 123, 255, 0.1);
  --color-secondary: #fff;
  --color-secondary-hover: #f6f7f9;
  --color-secondary-pressed: #fff;
  --color-secondary-disabled: #F6F7F9;
  --color-tertiary: #4c6580;
  --color-tertiary-hover: #f6f7f9;
  --color-tertiary-pressed: #fff;
  --color-tertiary-disabled: #F6F7F9;
  --color-error: #FF3A30;
  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-bg-subdued-green: 52 199 89;
  --color-strong-green: #2AA248;
  --color-bg-subdued-orange: 255 149 0;
  --color-strong-orange: #CC7700;
  --color-bg-subdued-red: 255 58 48;
  --color-strong-red: #FF3A30;
  --color-bg-subdued-gray-strong: 128 153 179;
  --color-bg-tag-document: #3F4143;
  --color-text-base: #0A0D10;
  --color-text-secondary: #263340;
  --color-text-tertiary: #4C6580;
  --color-text-light: #8099b3;
  --color-text-dark: #0A0D10;
  --color-text-disable: #9FB2C6;
  --color-text-on-color: #FFFFFF;
  --color-text-low-efford: #422400;
  --color-text-available: #294400;
  --color-text-btn-primary-disable: #fff;
  --color-text-btn-secondary-default: #001933;
  --color-text-btn-secondary-hover: #000C1A;
  --color-text-btn-secondary-pressed: #000C1A;
  --color-text-btn-secondary-disable: #BFCCD9;
  --color-text-btn-tertiary-default: #4C6580;
  --color-text-btn-tertiary-hover: #394C60;
  --color-text-btn-tertiary-pressed: #263340;
  --color-text-btn-tertiary-disable: #BFCCD9;
  --color-text-link: #0063CC;
  --color-text-error: #FF3A30;
  --color-text-success: #2AA248;
  --color-text-warning: #FF9500;
  --color-border-base: #FFFFFF;
  --color-border-light: #EFF2F5;
  --color-border-bright: #DFE5EC;
  --color-border-contrast: #BFCCD9;
  --color-border-primary-default: #0063CC;
  --color-border-primary-hover: #004D9E;
  --color-border-primary-pressed: #003A79;
  --color-border-primary-disabled: #CCE5FF;
  --color-border-secondary-default: #fff;
  --color-border-secondary-hover: #EFF2F5;
  --color-border-secondary-pressed: #EFF2F5;
  --color-border-secondary-disabled: #F6F7F9;
  --color-border-tertiary-default: #DFE5EC;
  --color-border-tertiary-hover: #BFCCD9;
  --color-border-tertiary-pressed: #9FB2C6;
  --color-border-tertiary-disabled: #F6F7F9;
  --color-border-error: #FF3A30;
  --color-border-success: #34C759;
  --color-border-additional: #9fb2c6;
  --color-icon-primary-default: #0063cc;
  --color-icon-primary-hover: #004D9E;
  --color-icon-primary-pressed: #003A79;
  --color-icon-primary-disabled: #0066cc;
  --color-icon-secondary-default: #001933;
  --color-icon-secondary-hover: #000C1A;
  --color-icon-secondary-pressed: #000C1A;
  --color-icon-secondary-disabled: #394c60;
  --color-icon-tertiary-default: #4C6580;
  --color-icon-tertiary-hover: #394C60;
  --color-icon-tertiary-pressed: #263340;
  --color-icon-tertiary-disabled: #4c6580;
  --icon-sun-color: #FF9500;
  --icon-moon-color: #9FB2C6;
  --accessibility-public-bg: #dff1c3;
  --accessibility-public-text-color: #294400;
  --accessibility-private-bg: #faeac8;
  --accessibility-private-text-color: #422400;
  --icon-grey: #9FB2C6;
  --icon-success: #2AA248;
  --icon-warning: #FF9500;
  --icon-error: #FF3A30;
  --color-gray-500: #8099B3;
  --color-bg-tag-monograph: #a046ce;
  --color-bg-tag-monograph-multivolume: #8b22bf;
  --color-bg-tag-monographunit: #7a09b2;
  --color-bg-tag-periodical: #00807c;
  --color-bg-tag-periodicalitem: #005e5b;
  --color-bg-tag-periodicalvolume: #005e5b;
  --color-bg-tag-supplement: #00413f;
  --color-bg-tag-article: #003331;
  --color-bg-tag-sheetmusic: #6556d6;
  --color-bg-tag-soundrecording: #5634a3;
  --color-bg-tag-convolute: #0047aa;
  --color-bg-tag-collection: #102f75;
  --color-bg-tag-graphic: #b18e00;
  --color-bg-tag-map: #95652d;
  --color-bg-tag-archive: #884404;
  --color-bg-tag-manuscript: #0089f9;
  --color-bg-tag-page: #3c7ab9;
  --color-bg-tag-cut: #0058B0;
}

==== COLORS - dark (:root.dark) (99) ====
:root.dark {
  --color-bg-base: #0E1216;
  --color-bg-light: #263340;
  --color-bg-bright: #263340;
  --color-bg-contrast: #394C60;
  --overlay-bg: rgba(14, 18, 22, 0.7);
  --overlay-lock-bg: rgba(33, 33, 33, 0.5);
  --color-bg-low-efford: #FAEAC8;
  --color-bg-available: #DFF1C3;
  --color-bg-subdued-gray: rgba(128, 153, 179, 0.05);
  --sidebar-disabled-overlay: rgba(0, 0, 0, 0.6);
  --dialog-dark-backdrop: rgba(38, 51, 64, 0.60);
  --color-primary: #0A85FF;
  --color-primary-hover: #3399FF;
  --color-primary-pressed: #66B2FF;
  --color-primary-disabled: #003366;
  --color-subdued-blue: rgba(0, 123, 255, 0.1);
  --color-secondary: #171E26;
  --color-secondary-hover: #263340;
  --color-secondary-pressed: #394C60;
  --color-secondary-disabled: #171E26;
  --color-tertiary: #8099B3;
  --color-tertiary-hover: #394C60;
  --color-tertiary-pressed: #4C6580;
  --color-tertiary-disabled: #394C60;
  --color-text-base: #FFFFFF;
  --color-text-secondary: #DFE5EC;
  --color-text-tertiary: #9FB2C6;
  --color-text-light: #8099b3;
  --color-text-dark: #0A0D10;
  --color-text-disable: #8099B3;
  --color-text-on-color: #FFFFFF;
  --color-text-low-efford: #422400;
  --color-text-available: #294400;
  --color-error: #FF443A;
  --color-success: #30D158;
  --color-warning: #FF9D0A;
  --color-bg-subdued-green: 52 199 89;
  --color-strong-green: #2AA248;
  --color-bg-subdued-orange: 255 149 0;
  --color-strong-orange: #CC7700;
  --color-bg-subdued-red: 255 58 48;
  --color-strong-red: #FF3A30;
  --color-bg-subdued-gray-strong: 128 153 179;
  --color-bg-tag-document: #3F4143;
  --color-text-btn-primary-disable: #fff;
  --color-text-btn-secondary-default: #FFFFFF;
  --color-text-btn-secondary-hover: #EFF2F5;
  --color-text-btn-secondary-pressed: #DFE5EC;
  --color-text-btn-secondary-disable: #394C60;
  --color-text-btn-tertiary-default: #9FB2C6;
  --color-text-btn-tertiary-hover: #BFCCD9;
  --color-text-btn-tertiary-pressed: #DFE5EC;
  --color-text-btn-tertiary-disable: #4C6580;
  --color-text-link: #66B0FF;
  --color-text-error: #FF443A;
  --color-text-success: #58DA79;
  --color-text-warning: #FF9D0A;
  --color-border-base: #0E1216;
  --color-border-light: #171E26;
  --color-border-bright: #263340;
  --color-border-contrast: #394C60;
  --color-border-primary-default: #0A85FF;
  --color-border-primary-hover: #3399FF;
  --color-border-primary-pressed: #66B2FF;
  --color-border-primary-disabled: #003366;
  --color-border-secondary-default: #171E26;
  --color-border-secondary-hover: #263340;
  --color-border-secondary-pressed: #394C60;
  --color-border-secondary-disabled: #171E26;
  --color-border-tertiary-default: #8099B3;
  --color-border-tertiary-hover: #394C60;
  --color-border-tertiary-pressed: #4C6580;
  --color-border-tertiary-disabled: #394C60;
  --color-border-error: #FF443A;
  --color-border-success: #30D158;
  --color-border-additional: #9fb2c6;
  --color-icon-primary-default: #3399ff;
  --color-icon-primary-hover: #66B2FF;
  --color-icon-primary-pressed: #99ccff;
  --color-icon-primary-disabled: #0066cc;
  --color-icon-secondary-default: #FFFFFF;
  --color-icon-secondary-hover: #EFF2F5;
  --color-icon-secondary-pressed: #EFF2F5;
  --color-icon-secondary-disabled: #394c60;
  --color-icon-tertiary-default: #9FB2C6;
  --color-icon-tertiary-hover: #bfccd9;
  --color-icon-tertiary-pressed: #dfe5ec;
  --color-icon-tertiary-disabled: #4c6580;
  --icon-sun-color: #9FB2C6;
  --icon-moon-color: #5E5CE6;
  --accessibility-public-bg: #dff1c3;
  --accessibility-public-text-color: #294400;
  --accessibility-private-bg: #faeac8;
  --accessibility-private-text-color: #422400;
  --icon-grey: #9FB2C6;
  --icon-success: #2AA248;
  --icon-warning: #FF9500;
  --icon-error: #FF3A30;
  --color-gray-500: #8099B3;
}
*/