:root {
  --background-color_body: rgba(248, 248, 248, 1);
  --background-color_nav: rgba(255, 255, 255, 1);
  --background-color_container: rgba(246, 246, 246, 1);
  --background-color_content: rgba(255, 255, 255, 1);

  /* === Цветовая палитра === */
  --color-text-main: rgba(17, 17, 17, 1);       /* Основной текст (чёрный с лёгким смягчением) */
  --color-text-title: rgba(0, 0, 0, 1);         /* Заголовки */
  --color-text-secondary: rgba(68, 68, 68, 1);  /* Второстепенный текст */
  --color-text-muted: rgba(102, 102, 102, 1);   /* Служебные данные */

  /* === Типографика === */
  --font-family-base: 'Inter Variable', sans-serif;

  /* 26px — заголовки */
  --text-title-size: 26px;
  --text-title-weight: 700;
  --text-title-line: 1.3;
  --text-title-color: var(--color-text-title);

  /* 20px — подзаголовки */
  --text-subtitle-size: 20px;
  --text-subtitle-weight: 600;
  --text-subtitle-line: 1.4;
  --text-subtitle-color: var(--color-text-title);

  /* 14px — основной текст */
  --text-base-size: 14px;
  --text-base-weight: 400;
  --text-base-line: 1.6;
  --text-base-color: var(--color-text-main);

  /* 12px — мелкие второстепенные данные */
  --text-small-size: 12px;
  --text-small-weight: 400;
  --text-small-line: 1.5;
  --text-small-color: var(--color-text-secondary);

  /* 10px — служебные подписи */
  --text-tiny-size: 10px;
  --text-tiny-weight: 400;
  --text-tiny-line: 1.5;
  --text-tiny-color: var(--color-text-muted);

  /* font-size */
  --font-size_h1: var(--text-title-size);
  --font-size_h2: var(--text-subtitle-size);
  --font-size_h3: var(--text-base-size);

  /* font-weight */
  --font-weight_light-ultra: 300;
  --font-weight_light: 400;
  --font-weight_middle: 500;
  --font-weight_bold: 700;

  /* COLORS */

  --color-black: rgba(0, 0, 0, 1);
  --color-black_transparent_09: rgba(0, 0, 0, 0.9);
  --color-black_transparent_08: rgba(0, 0, 0, 0.8);
  --color-blue-light: rgba(31, 187, 246, 1);
  --color-blue-light-ultra: rgba(238, 246, 253, 1);
  --color-blue-medium: rgba(5, 129, 179, 1);
  --color-red: rgba(213, 69, 61, 1);
  --color-grey: rgba(71, 72, 74, 1);
  --color-grey_transparent_08: rgba(71, 72, 74, 0.8);
  --color-grey_transparent_095: rgba(71, 72, 74, 0.95);
  --color-white: rgba(255, 255, 255, 1);
  --color-white_transparent_09: rgba(255, 255, 255, 0.9);
  --color-white_transparent_095: rgba(255, 255, 255, 0.95);
  --color-gold: rgba(255,215,0, 1);
  --color-silver: rgba(192,192,192, 1);
  --color-bronze: rgba(184,115,51, 1);

  --accent-element-color: var(--color-blue-light);
  --accent-element-color_hover: var(--color-blue-medium);

  /* header */
  --header-color: var(--color-grey);
  --header-color-light: var(--accent-element-color);
  --header-color-medium: var(--accent-element-color_hover);
  --header-color-dark: var(--color-black_transparent_09);
  --header-background-image: url();
  --height_main_header: 120px;
  --height_main_header-menu: 60px;
  --height_popover-header: 4.8em;
  --height_aside-header: 80px;

  /* abc */
  --background-color_abc: var(--header-color-light);
  --background-color_abc-hover: var(--header-color-medium);
  --background-color_abc_block: var(--header-color);
  --background-color_abc_popover: var(--background-color_container);
  --background-color_abc_button: var(--header-color);
  --alfabet-button_color: var(--color-white);

  /* icon-size */
  --icon-size_story_footer: 20px;
  --icon-size_story_small: 1.3em;
  --icon-size_button_small: 1.4em;
  --icon-size_middle: 1.6em;
  --icon-gap_story_small: var(--gap_small);
  --comments-avatar-width: 5.6em;

  /* icons */
  --icon-color: var(--color-grey);

  /* gap */
  --gap_extra-small: 0.2em;
  --gap_small: 0.4em;
  --gap_normal: 0.6em;
  --gap_middle: 1em;
  --gap_large: 20px;
  --gap_story_footer: 1em;
  --gap_customcomments_footer: 1em;

  /* padding */
  --padding_extra-small: 0.2em;
  --padding_small: 0.4em;
  --padding_normal: 0.6em;
  --padding_middle: 1em;
  --padding_large: 20px;

  /* opacity */
  --opacity_icon: 0.4;
  --opacity_icon_accent: 0.6;

  /* nav */
  --nav_width: 80px;
  --nav_elements-color: var(--color-text-main);

  /* box-shadow */
  --box-shadow-color: rgba(0, 0, 0, 0.3);
  --box-shadow_block: 0 1px 2px 0 var(--box-shadow-color);
  --box-shadow_popover: 1px 2px 5px var(--box-shadow-color);

  /* borders */
  --separator-color: rgba(71, 72, 74, 0.1);
  --separator-border: 1px var(--separator-color) solid;
  --separator-border-accent: 1px var(--accent-element-color) solid;
  --separator-border-left: 1px var(--separator-color) solid;

  /* radius */
  --radius_normal: 5px;
  --radius_top: var(--radius_normal) 0 0 0;
  --radius_bottom: 0 0 0 var(--radius_normal);
  --radius_top-bottom: var(--radius_normal) 0 0 var(--radius_normal);

  /* buttons */
  --button-color-black: var(--color-text-title);
  --button-background: var(--background-color_content);
  --button-background-accent: var(--accent-element-color);
  --button-background-accent_hover: var(--color-blue-medium);
  --button_news_height: 9em;
  --button_player_height: 3em;
  --button_player-fullstory_height: 2.4em;

  /* popovers */
  --popover_background-color: var(--background-color_content);
  --popover_outline: var(--separator-color);
  --popover-form-label: var(--color-grey);
  --popover-form-input-border:  1px rgba(71, 72, 74, 0.2) solid;
  --popover-form-input-focus: var(--accent-element-color);
  --popover-form-input-background: var(--background-color_content);
  --popover-form-input-placeholder: var(--color-grey_transparent_08);
  --popover-form-link-accent: var(--accent-element-color);
  --popover-form-button-color: var(--background-color_content);
  --popover-form-button-hover: var(--accent-element-color_hover);

  /* forms */
  --textarea-border: 1px rgba(71, 72, 74, 0.2) solid;
  --textarea-placeholder: var(--color-grey_transparent_08);
  --textarea-padding: 0.8em 0.8em 0.9em 0.8em;
  --textarea-background: var(--background-color_content);
  --textarea-border-radius: 3px;

  --checkbox-color: var(--color-grey);
  --checkbox-background: var(--background-color_content);
  --checkbox-border: 1px rgba(71, 72, 74, 0.2) solid;
  --checkbox-border-radius: 3px;

  --form-color: var(--color-grey);
  --form-color-title: var(--color-white);
  --form-placeholder: var(--color-grey_transparent_08);
  --form-background: var(--background-color_content);
  --form-background-title: var(--color-grey_transparent_08);
  --form-background-option: var(--color-blue-light-ultra);
  --form-border-radius: 3px;
  --form-border: 1px rgba(71, 72, 74, 0.2) solid;
  --form-input-padding: 0.6em 0.8em 0.6em 0.8em;
  --form-input-padding-logged: 0.6em 2.8em 0.6em 0.8em;

}
/*
@media (max-height: 600px) {

  :root {
    --font-size_h1: 20px;
    --font-size_h2: 18px;
    --nav_width: 60px;
    --height_main_header: 100px;
    --height_main_header-menu: 40px;
    --height_aside-header: calc(var(--height_main_header) - var(--height_main_header-menu));
  }

}
*/
@media (max-width: 768px) {
  :root {
    --nav_width: 70px;
    --separator-border-left: 0;
    --radius_top: var(--radius_normal) var(--radius_normal) 0 0;
    --radius_bottom: 0 0 var(--radius_normal) var(--radius_normal);
    --radius_top-bottom: var(--radius_normal);
  }
}

@media (max-width: 480px) {

  :root {
    --nav_width: 54px;
    --font-size_h1: 18px;
    --font-size_h2: 16px;
    --height_main_header: 80px;
    --height_main_header-menu: 40px;
    --height_aside-header: 60px;
    --gap_large: var(--gap_middle);
    --padding_large: var(--padding_middle);
    --comments-avatar-width: 4em;
    --button_news_height: 6em;
    --button_player_height: 2.4em;
  }

}

@media (max-height: 600px) and (max-width: 1024px) {
  :root {
    --nav_width: 54px;
    --font-size_h1: 18px;
    --font-size_h2: 16px;
    --height_main_header: 80px;
    --height_main_header-menu: 40px;
    --height_aside-header: 60px;
    --gap_large: var(--gap_middle);
    --padding_large: var(--padding_middle);
    --comments-avatar-width: 4em;
    --button_news_height: 6em;
    --button_player_height: 2.4em;
    --radius_top: var(--radius_normal) var(--radius_normal) 0 0;
    --radius_bottom: 0 0 var(--radius_normal) var(--radius_normal);
    --radius_top-bottom: var(--radius_normal);
  }
}