/* Северсталь — Color tokens
   Sampled directly from the employer-brand site.
   Two-tone identity: deep corporate navy + vivid signal red, on a cool light ground. */
:root {
  /* ---- Brand core ---- */
  --sv-navy:        #002F6C; /* primary brand blue — buttons, band fills, logo */
  --sv-navy-deep:   #011E46; /* footer, darkest surfaces, pressed navy */
  --sv-navy-ink:    #0F2340; /* headings on light */
  --sv-red:         #FF0000; /* signal accent — emphasis words, doodles, bullets */
  --sv-red-deep:    #D40000; /* red hover/press */

  /* ---- Neutral ramp (cool, blue-tinted) ---- */
  --sv-white:       #FFFFFF;
  --sv-ground:      #EFF2F7; /* page background */
  --sv-ground-2:    #E4E9F2; /* alternating section band */
  --sv-line:        #DDE3EC; /* hairline borders */
  --sv-gray-400:    #9BA6B6; /* placeholder / disabled text */
  --sv-gray-500:    #6B7789; /* secondary body text */
  --sv-gray-700:    #3C4759; /* strong body text */

  /* ---- On-navy neutrals ---- */
  --sv-on-navy:        #FFFFFF;
  --sv-on-navy-muted:  #9FB0CC; /* muted links/labels on navy */
  --sv-navy-chip:      #123A73; /* translucent-look chip on navy */
  --sv-navy-hover:     #0A356F; /* navy surface hover */

  /* ---- Semantic aliases ---- */
  --text-heading:   var(--sv-navy-ink);
  --text-body:      var(--sv-gray-500);
  --text-strong:    var(--sv-gray-700);
  --text-accent:    var(--sv-red);
  --text-brand:     var(--sv-navy);
  --text-placeholder: var(--sv-gray-400);

  --surface-page:   var(--sv-ground);
  --surface-band:   var(--sv-ground-2);
  --surface-card:   var(--sv-white);
  --surface-invert: var(--sv-navy);
  --surface-invert-deep: var(--sv-navy-deep);

  --border-hairline: var(--sv-line);

  --accent:         var(--sv-red);
  --accent-hover:   var(--sv-red-deep);
  --brand:          var(--sv-navy);
  --brand-hover:    var(--sv-navy-hover);
}