/* ==========================================================================
   Selectsys design tokens
   --------------------------------------------------------------------------
   Phase 2, step 1. This file declares values only. On its own it changes
   nothing: no selector here paints anything. Everything else in the new
   system is built from these properties.

   The brand blue is #214497, taken from the existing Selectsys logo
   (images/logo1.svg). The logo is not part of the redesign; the palette is
   anchored to it so the brand colour is not a new decision.

   Load order: sx-tokens.css -> sx-base.css -> sx-components.css, after the
   legacy stylesheets.
   ========================================================================== */

:root{

  /* ------------------------------------------------------------ brand blue */
  --sx-blue:        #214497;  /* primary. Buttons, links, eyebrows, accents  */
  --sx-blue-hover:  #1A3778;  /* hover and pressed                           */
  --sx-blue-deep:   #16306E;  /* text on pale blue, dark band ground         */
  --sx-blue-soft:   #5B79C4;  /* quiet accents, list markers, dividers       */
  --sx-blue-pale:   #C9D6F2;  /* borders inside blue contexts                */
  --sx-blue-on-dark:#A8C0F0;  /* links and accents on the blue band          */

  /* ----------------------------------------------------------- neutral ink */
  --sx-ink:         #101A31;  /* every heading. Navy-leaning near-black      */
  --sx-body:        #48526A;  /* body copy                                   */
  --sx-muted:       #626C82;  /* captions, metadata, secondary lines         */

  /* ---------------------------------------------------------- ground/lines */
  --sx-white:       #FFFFFF;  /* the default section ground                  */
  --sx-tint:        #F5F7FB;  /* the one off-white. Replaces 4 legacy greys  */
  --sx-tint-blue:   #EDF2FD;  /* very light blue. Icon wells, soft callouts  */
  --sx-line:        #E3E7EF;  /* the one border value                        */
  --sx-line-soft:   #EEF1F7;  /* internal rules inside a component           */

  /* ----------------------------------------------------- functional states */
  /* validation only. Not brand colours, never used decoratively. */
  --sx-ok:          #1F7A4D;  --sx-ok-bg:   #EAF4EE;
  --sx-err:         #B3261E;  --sx-err-bg:  #FCEDEC;

  /* ------------------------------------------------------------ typography */
  /* Inter, already loaded site-wide. One family across the site. */
  --sx-font: Inter, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --sx-h1:   clamp(32px, 4.2vw, 48px);
  --sx-h2:   clamp(25px, 2.6vw, 33px);
  --sx-h3:   20px;
  --sx-h4:   17px;
  --sx-lead: 18px;
  --sx-body-size: 16.5px;
  --sx-small:14px;
  --sx-xs:   12.5px;

  --sx-lh-h1:   1.07;
  --sx-lh-h2:   1.16;
  --sx-lh-h3:   1.3;
  --sx-lh-body: 1.68;
  --sx-lh-tight:1.45;

  --sx-track-h1: -.032em;
  --sx-track-h2: -.028em;
  --sx-track-h3: -.016em;
  --sx-track-eyebrow: .11em;

  --sx-w-regular: 400;
  --sx-w-medium:  500;
  --sx-w-semi:    600;
  --sx-w-bold:    700;

  /* --------------------------------------------------------------- spacing */
  /* one scale. Every margin and padding in the new system is one of these. */
  --sx-1:  4px;
  --sx-2:  8px;
  --sx-3:  12px;
  --sx-4:  16px;
  --sx-5:  24px;
  --sx-6:  32px;
  --sx-7:  48px;
  --sx-8:  64px;
  --sx-9:  96px;

  /* section rhythm */
  --sx-section-y:        96px;  /* desktop                                   */
  --sx-section-y-tight:  64px;
  --sx-section-y-mobile: 56px;
  --sx-hero-top:        104px;
  --sx-hero-bottom:      88px;

  /* ---------------------------------------------------------------- layout */
  --sx-max:        1200px;  /* maximum content width                         */
  --sx-gutter:       32px;  /* desktop                                       */
  --sx-gutter-mob:   20px;  /* mobile                                        */
  --sx-measure:      68ch;  /* reading width for body copy (~68 chars)       */
  --sx-measure-lead: 60ch;  /* reading width for lead paragraphs             */
  --sx-header-h:     72px;

  /* ----------------------------------------------------------------- shape */
  --sx-radius-sm:  6px;   /* inputs, pills, small controls                   */
  --sx-radius:     8px;   /* buttons                                         */
  --sx-radius-lg: 10px;   /* cards, panels, tables                           */
  --sx-radius-pill: 100px;

  /* ---------------------------------------------------------------- shadow */
  /* two values, and neither is used on a static card. Cards use a border. */
  --sx-shadow:    0 1px 2px rgba(16,26,49,.05), 0 10px 28px -18px rgba(16,26,49,.22);
  --sx-shadow-lg: 0 1px 2px rgba(16,26,49,.06), 0 22px 48px -20px rgba(16,26,49,.28);
  --sx-focus:     0 0 0 3px rgba(33,68,151,.28);

  /* ----------------------------------------------------------------- misc */
  --sx-control-h:    46px;  /* buttons and inputs                            */
  --sx-control-h-sm: 38px;
  --sx-z-header:    1030;
  --sx-z-panel:     1020;
}