/* =====================================================================
   ЭТЕРИС ИНЖИНИРИНГ — Color tokens
   Base palette + semantic aliases. Mandated brand values:
     navy   #1B375C  (--navy-700)
     accent #E85921  (--orange-500)
   Secondary accent (steel blue #708DB9) sampled from the logo mark.
   ===================================================================== */
:root {
  /* ---- Navy (primary brand) ---------------------------------------- */
  --navy-50:  #EEF3F8;
  --navy-100: #D8E2ED;
  --navy-200: #AFC3DA;
  --navy-300: #7D9CC2;
  --navy-400: #517BAA;
  --navy-500: #315D8F;
  --navy-600: #244B78;
  --navy-700: #1B375C; /* ← BRAND NAVY */
  --navy-800: #163050;
  --navy-900: #122842;
  --navy-950: #0D1B2E;

  /* ---- Orange (accent) --------------------------------------------- */
  --orange-50:  #FEF3EC;
  --orange-100: #FCE2D3;
  --orange-200: #F9C4A8;
  --orange-300: #F49E73;
  --orange-400: #EF7A45;
  --orange-500: #E85921; /* ← BRAND ACCENT */
  --orange-600: #CF4A17;
  --orange-700: #AC3C13;
  --orange-800: #8A3010;

  /* ---- Steel blue (secondary accent, from logo) -------------------- */
  --steel-100: #E4EAF3;
  --steel-200: #C6D3E6;
  --steel-300: #A0B4D4;
  --steel-400: #8AA1C8;
  --steel-500: #708DB9; /* ← LOGO STEEL BLUE */
  --steel-600: #536F9C;
  --steel-700: #3E567D;

  /* ---- Neutral gray (cool, slightly navy-tinted) ------------------- */
  --gray-50:  #F5F7FA;
  --gray-100: #EDF0F4;
  --gray-150: #E6EAF0;
  --gray-200: #DCE1E8;
  --gray-300: #C3CAD4;
  --gray-400: #9AA3B0;
  --gray-500: #737A86; /* ← logo mid-stripe gray */
  --gray-600: #565E6B;
  --gray-700: #3F4650;
  --gray-800: #2B313A;
  --gray-900: #1B2029;
  --gray-950: #0F131A;

  --white: #FFFFFF;
  --black: #0B0E12;

  /* ---- Semantic hues ----------------------------------------------- */
  --green-50:  #E7F4EC;
  --green-500: #1F9254;
  --green-700: #14663B;
  --amber-50:  #FAF0D8;
  --amber-500: #C98A04;
  --amber-700: #8A5E00;
  --red-50:    #FBE7E4;
  --red-500:   #C42B1C;
  --red-700:   #8F1D12;

  /* =================================================================
     SEMANTIC ALIASES — reference these in product code, not raw scales
     ================================================================= */

  /* Brand */
  --brand-navy:        var(--navy-700);
  --brand-navy-deep:   var(--navy-900);
  --brand-accent:      var(--orange-500);
  --brand-steel:       var(--steel-500);

  /* Surfaces */
  --surface-page:        var(--gray-50);
  --surface-card:        var(--white);
  --surface-sunken:      var(--gray-100);
  --surface-raised:      var(--white);
  --surface-navy:        var(--navy-700);
  --surface-navy-deep:   var(--navy-900);
  --surface-accent:      var(--orange-500);
  --surface-accent-soft: var(--orange-100);
  --surface-steel-soft:  var(--steel-100);

  /* Text */
  --text-heading:       var(--navy-900);
  --text-body:          var(--gray-600);
  --text-muted:         var(--gray-500);
  --text-subtle:        var(--gray-400);
  --text-on-navy:       var(--white);
  --text-on-navy-muted: #A9BAD2;
  --text-on-accent:     var(--white);
  --text-accent:        var(--orange-500);
  --text-link:          var(--navy-700);
  --text-link-hover:    var(--orange-500);

  /* Borders & dividers */
  --border:           var(--gray-200);
  --border-strong:    var(--gray-300);
  --border-on-navy:   rgba(255, 255, 255, 0.14);
  --divider:          var(--gray-150);

  /* Accent interaction states */
  --accent:           var(--orange-500);
  --accent-hover:     var(--orange-600);
  --accent-active:    var(--orange-700);
  --accent-soft:      var(--orange-100);
  --accent-contrast:  var(--white);

  /* Navy interaction states */
  --navy:             var(--navy-700);
  --navy-hover:       var(--navy-800);
  --navy-active:      var(--navy-900);

  /* Focus */
  --focus-ring:       var(--steel-500);
  --focus-ring-accent: var(--orange-500);

  /* Status */
  --success:      var(--green-500);
  --success-soft: var(--green-50);
  --success-fg:   var(--green-700);
  --warning:      var(--amber-500);
  --warning-soft: var(--amber-50);
  --warning-fg:   var(--amber-700);
  --danger:       var(--red-500);
  --danger-soft:  var(--red-50);
  --danger-fg:    var(--red-700);
  --info:         var(--steel-600);
  --info-soft:    var(--steel-100);
  --info-fg:      var(--steel-700);

  /* Functional overlays (image-caption legibility — not decorative) */
  --overlay-caption: linear-gradient(to top, rgba(13, 27, 46, 0.88) 0%, rgba(13, 27, 46, 0.45) 42%, rgba(13, 27, 46, 0) 100%); /* @kind other */
  --overlay-scrim:   rgba(13, 27, 46, 0.55); /* @kind other */
}