/**
 * Design tokens — styleguide (colors, typography).
 */

@import url('./fonts.css');

:root {

  /* --- Layout --- */
  --container-max-width:  1440px;
  --container-px:         40px;  /* desktop */
  --container-px-mobile:  16px;  /* mobile ≤ 768px */

  /* --- Breakpoints (for reference in JS / comments) --- */
  /* mobile:  max-width: 768px  */
  /* desktop: min-width: 769px  */

  /* --- Typography --- */
  --font-primary: 'Manrope', sans-serif;

  /* --- Backgrounds / Surfaces --- */
  --color-bg-deepest:  #24232E; /* самый тёмный фон */
  --color-bg-deep:     #2B2A38;
  --color-bg-dark:     #363445;
  --color-bg-medium:   #464362;

  /* --- Brand / Purple palette --- */
  --color-purple-deep:        #3F3880;
  --color-purple-deep-hover:  #352F70;
  --color-purple-main:   #4E4794;
  --color-purple-mid:    #5C55A3;
  --color-purple-bright: #5533EE;
  --color-purple-pale:   #B6AEFB;
  --color-purple-muted:  #9D9AAC;

  /* --- Accents --- */
  --color-accent-violet: #9933DD;
  --color-accent-blue:   #1A47B8;
  --color-accent-blue-pure: #0000FF;
  --color-accent-sky:    #29AAEB;
  --color-accent-cyan:   #44CCFF;

  /* --- Status --- */
  --color-warning: #F2C40F;
  --color-error:   #F93939;

  /* --- Neutrals --- */
  --color-neutral-900: #343434;
  --color-neutral-700: #4C4C4C;
  --color-neutral-600: #5C5C5C;
  --color-neutral-500: #7F7F7F;
  --color-neutral-400: #A2A2A2;
  --color-neutral-200: #D9D9D9;
  --color-neutral-100: #EFEFEF;

  /* --- Light / White scale --- */
  --color-light-400: #C5C2CC;
  --color-light-300: #D0CED6;
  --color-light-250: #E0DFE8;
  --color-light-200: #EFEDF2;
  --color-light-150: #EEEBF5;
  --color-light-100: #F3F2F5;
  --color-light-50:  #FAFAFA;
  --color-white:     #FFFFFF;

  /* --- Alpha overlays (rgba) --- */
  --color-bg-deepest-a40:  rgba(36, 35, 46, 0.4);   /* #24232E 40% */
  --color-bg-deepest-a86:  rgba(36, 35, 46, 0.86);  /* #24232E 86% */
  --color-purple-deep-a80: rgba(63, 56, 128, 0.8);  /* #3F3880 80% */
  --color-light-100-a60:   rgba(243, 242, 245, 0.6); /* #F3F2F5 60% */
  --color-muted-a04:  rgba(96, 94, 117, 0.04);
  --color-muted-a05:  rgba(96, 94, 117, 0.05);
  --color-muted-a06:  rgba(96, 94, 117, 0.06);
  --color-muted-a08:  rgba(96, 94, 117, 0.08);
  --color-muted-a10:  rgba(96, 94, 117, 0.1);
  --color-muted-a14:  rgba(96, 94, 117, 0.14);
  --color-muted-a15:  rgba(96, 94, 117, 0.15);
  --color-muted-a20:  rgba(96, 94, 117, 0.2);
  --color-white-a10:  rgba(255, 255, 255, 0.1);
  --color-white-a16:  rgba(255, 255, 255, 0.16);
  --color-white-a40:  rgba(255, 255, 255, 0.4);
  --color-white-a60:  rgba(255, 255, 255, 0.6);
  --color-white-a70:  rgba(255, 255, 255, 0.7);
  --color-white-a80:  rgba(255, 255, 255, 0.8);

}