/* ============================================================
   schels · Color tokens
   ------------------------------------------------------------
   The practice works in pure monochrome — black ink on white —
   with exactly two functional accents sampled from the public
   infographics: BLUE for the technical / measured / interactive
   layer, RED reserved for a single critical dimension or warning.
   Use accents sparingly. Black, white and neutral grey do 95%
   of the work.
   ============================================================ */

:root {
  /* ---- Absolutes ---------------------------------------- */
  --black: #000000;
  --white: #ffffff;

  /* ---- Ink (neutral text + structure) ------------------- */
  --ink-900: #000000; /* pure black — banners, logo, primary marks   */
  --ink-800: #111111; /* display headlines on white                  */
  --ink-700: #2b2b2b; /* strong body text                            */
  --ink-500: #565656; /* secondary text, infographic sub-labels      */
  --ink-400: #767676; /* muted captions, eyebrow grey                */
  --ink-300: #9a9a9a; /* disabled, placeholder                       */

  /* ---- Lines + surfaces --------------------------------- */
  --line-300: #cfcfcf; /* strong hairline / divider                  */
  --line-200: #e2e2e2; /* default border                             */
  --line-100: #ededed; /* faint border / inner rule                  */
  --surface-100: #f6f6f6; /* card fill, alternating row              */
  --surface-50:  #fafafa; /* page tint                               */
  --surface-0:   #ffffff; /* base surface                            */

  /* ---- Accent · Blue (technical / measured / link) ------ */
  --blue-600: #2563eb; /* primary accent — arrows, links, focus      */
  --blue-700: #1d4fc4; /* hover / pressed accent                     */
  --blue-100: #dbeafe; /* measured-area fill                         */
  --blue-50:  #eff5fe; /* faint accent tint                          */

  /* ---- Accent · Red (single critical dimension / alert) - */
  --red-500: #ef4444; /* key dimension, error                        */
  --red-600: #dc2f2f; /* hover / pressed                             */
  --red-50:  #fef2f2; /* faint alert tint                            */

  /* ---- Semantic aliases --------------------------------- */
  --bg-page:        var(--surface-0);
  --bg-banner:      var(--ink-900);   /* the black header band       */
  --bg-card:        var(--surface-0);
  --bg-subtle:      var(--surface-100);
  --bg-inset:       var(--surface-50);

  --text-strong:    var(--ink-800);
  --text-body:      var(--ink-700);
  --text-muted:     var(--ink-500);
  --text-faint:     var(--ink-400);
  --text-on-banner: var(--white);
  --text-link:      var(--blue-600);

  --border-default: var(--line-200);
  --border-strong:  var(--ink-900);   /* the hard 1.5px CTA outline  */
  --border-subtle:  var(--line-100);

  --accent:         var(--blue-600);
  --accent-fill:    var(--blue-100);
  --accent-hover:   var(--blue-700);
  --critical:       var(--red-500);

  --focus-ring:     var(--blue-600);
}