/* ==========================================================================
   ARGO — DESIGN TOKENS
   v1.0.0 — aligned with design/ARGO-DESIGN-SYSTEM.md §2.1
   Змінюй значення тільки тут — решта CSS-файлів посилається на ці змінні.
   ========================================================================== */

:root {

  /* ---------- СІТКА ---------- */
  --grid-max-width:        1128px;
  --grid-columns:          12;
  --grid-gutter:           24px;
  --grid-column:           72px;
  --grid-content-width:    744px;
  --grid-sidebar-width:    360px;

  /* ---------- КОЛЬОРОВА ПАЛІТРА: BLUE GREY ---------- */
  --bluegrey-50:  #ECEFF1;
  --bluegrey-100: #CFD8DC;
  --bluegrey-200: #B0BEC5;
  --bluegrey-300: #90A4AE;
  --bluegrey-400: #78909C;
  --bluegrey-500: #607D8B;
  --bluegrey-600: #546E7A;
  --bluegrey-700: #455A64;
  --bluegrey-800: #37474F;
  --bluegrey-900: #263238;

  /* ---------- АКЦЕНТ ---------- */
  --orange-900: #E65100;

  /* ---------- СЕМАНТИЧНІ КОЛЬОРИ ---------- */
  --color-header-bg:     var(--bluegrey-900);
  --color-footer-bg:     var(--bluegrey-900);
  --color-page-bg:       #FFFFFF;
  --color-surface:       #FFFFFF;
  --color-text-body:     #212121;
  --color-text-muted:    var(--bluegrey-500);
  --color-text-inverse:  #FFFFFF;
  --color-text-inverse-muted: var(--bluegrey-300);
  --color-accent:        var(--orange-900);
  --color-border:        var(--bluegrey-100);
  --color-border-strong: var(--bluegrey-300);

  /* ---------- NAV STATES ---------- */
  --menu-main-bg:          var(--bluegrey-900);
  --menu-main-text:        #FFFFFF;
  --menu-main-hover-bg:    var(--bluegrey-700);
  --menu-main-hover-text:  #FFFFFF;
  --menu-main-active-bg:   #FFFFFF;
  --menu-main-active-text: var(--bluegrey-900);

  /* menu-top — inactive: muted grey; active UKR: light grey box, dark text */
  --menu-top-bg:           transparent;
  --menu-top-text:         var(--bluegrey-300);
  --menu-top-hover-bg:     var(--bluegrey-300);
  --menu-top-hover-text:   var(--bluegrey-900);
  --menu-top-active-bg:    var(--bluegrey-300);
  --menu-top-active-text:  var(--bluegrey-900);
  --menu-top-active-border:transparent;

  --menu-footer-text:      var(--bluegrey-300);

  /* ---------- ТИПОГРАФІКА ---------- */
  --font-family-base: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;

  --font-size-nav-main:    0.875rem;
  --font-size-menu-top:    0.75rem;
  --font-size-menu-footer: 0.875rem;

  --font-size-body: 1rem;
  --font-size-h1:   2.5rem;
  --font-size-h2:   2rem;
  --font-size-h3:   1.5rem;

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --line-height-base: 1.5;
  --line-height-tight: 1.2;

  /* ---------- HEADER / FOOTER SIZES ---------- */
  --header-top-height:  64px;
  --header-nav-height:  40px;
  --footer-height:      48px;
  --nav-icon-size:      24px;
  --nav-item-padding:   0.625rem;
}