/* css/variables.css */

:root {
  /* Цвета */
  --color-primary: #2b2f33; /* #4c4948; */
  --color-secondary: #f9f9f9;
  --color-accent: #c8102e; /* #a41b28; */
  --color-accent-hover: #92001c; /* #8b0000; */
  --color-bg: #f5f5f5;
  --color-text: #181c20; /* #050607; */
  --color-text-light: #777777;
  --color-white: #ffffff;
  --color-white-light: rgba(255, 255, 255, 0.8);
  --color-white-lighter: #eef1f6; /* rgba(255, 255, 255, 0.6); */

  --color-grey-border: #e5e5e5;

  /* --fk-primary: #a41b28;
  --fk-primary-hover: #8b0000; */
  --fk-dark: #4c4948;
  /* --fk-text: #050607; #333333; */
  /* --fk-text-light: #666666; */
  --fk-border: #e5e5e5;
  /* --fk-bg-light: #f9f9f9; */
  /* --fk-text-white: #ffffff; */

  --color-success: #27ae60;
  --color-success-dark: #15803d;
  --color-warning: #e67e22;
  --color-error: #a41b28;

  --border-radius-sm: 8px;
  --border-radius-md: 12px;
  --border-radius-lg: 24px;
  --btn-border-radius: 8px;

  --font-size-exs: 0.7rem; /* 11px */
  --font-size-xs: 0.8rem; /* 13px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-base-l: 1.125rem; /* 18px */
  --font-size-md: 1.25rem; /* 20px */
  --font-size-lg: 1.5rem; /* 24px */
  --font-size-xl: 2rem; /* 32px */

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  --space-xs: 0.75rem; /* 12px */
  --space-sm: 0.875rem; /* 14px */
  --space-md: 1rem; /* 16px */
  --space-lg: 1.25rem; /* 20px */
  --space-xl: 1.375rem; /* 22px */
  --space-xxl: 1.5rem; /* 24px */

  --space-medium: 2.5rem; /* 40px */
  --space-large: 3.125rem; /* 50px */
  --space-extra-large: 4rem; /* 64px */

  /* Box Shadow  */
  --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 4px 15px rgba(0, 0, 0, 0.1);
  --shadow-xxl: 0 4px 15px rgba(0, 0, 0, 0.1);

  --duration-sm: 0.2s;
  --duration-md: 0.3s;
  --duration-lg: 0.4s;
}