/* ===================================================
   VGT Design System — CSS Custom Properties
   Brand colors per logobook_vgt2: blue #0A6CFF, green #17E9B7, gray #EFF5FD
   =================================================== */

:root {
  /* Brand Colors — #0A6CFF (R10 G108 B255) */
  --color-brand-50:  #E8F0FF;
  --color-brand-100: #C5D9FF;
  --color-brand-200: #8BB8FF;
  --color-brand-300: #5196FF;
  --color-brand-400: #2980FF;
  --color-brand-500: #0A6CFF;   /* Primary brand blue */
  --color-brand-600: #0059E0;
  --color-brand-700: #0047B3;
  --color-brand-800: #003585;
  --color-brand-900: #00245C;

  /* Accent — Green #17E9B7 (R23 G223 B183) */
  --color-accent-50:  #E5FCF5;
  --color-accent-100: #B3F6E1;
  --color-accent-400: #35ECC3;
  --color-accent-500: #17E9B7;  /* CTA green */
  --color-accent-600: #00C99A;

  /* Neutrals — light bg #EFF5FD per brand */
  --color-white:      #FFFFFF;
  --color-gray-50:    #EFF5FD;
  --color-gray-100:   #E2EAF6;
  --color-gray-200:   #C8D6EA;
  --color-gray-300:   #A8BBD6;
  --color-gray-400:   #7A93B8;
  --color-gray-500:   #556D93;
  --color-gray-600:   #3E5270;
  --color-gray-700:   #2C3A52;
  --color-gray-800:   #1B2438;
  --color-gray-900:   #0D1320;

  /* Semantic */
  --color-success:    #17E9B7;
  --color-warning:    #F59E0B;
  --color-error:      #EF4444;
  --color-info:       var(--color-brand-500);

  /* Typography — Golos Text (brand font) */
  --font-family-base: 'Golos Text', -apple-system, BlinkMacSystemFont, Verdana, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2rem;   /* 36px */
  --font-size-5xl:  3rem;      /* 48px */
  --font-size-6xl:  3.75rem;   /* 60px */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold: 600;
  --font-weight-bold:    700;
  --font-weight-extrabold: 800;

  --line-height-tight:  1.2;
  --line-height-snug:   1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Spacing (8pt grid) */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Border Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  40px;   /* скруглённый низ hero-секций */
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs:  0 1px 2px 0 rgba(13, 19, 32, 0.05);
  --shadow-sm:  0 2px 4px 0 rgba(13, 19, 32, 0.07);
  --shadow-md:  0 4px 12px 0 rgba(13, 19, 32, 0.10);
  --shadow-lg:  0 8px 24px 0 rgba(13, 19, 32, 0.12);
  --shadow-xl:  0 16px 40px 0 rgba(13, 19, 32, 0.14);
  --shadow-2xl: 0 32px 64px 0 rgba(13, 19, 32, 0.18);
  --shadow-brand:  0 8px 24px 0 rgba(10, 108, 255, 0.25);
  --shadow-accent: 0 8px 24px 0 rgba(23, 233, 183, 0.30);

  /* Layout */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1440px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown: 100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-toast:   500;

  /* Header height */
  --header-height: 72px;
}