/* ==========================================================================
   MWS Care Services — Design Tokens
   Every value below derives from the two brand colours:
     Primary   #181271   oklch(0.279 0.152 273.2)
     Secondary #449AE4   oklch(0.667 0.138 247.6)
   Ramps were generated by holding each brand hue constant in OKLCH and
   varying lightness, so no tone on the page fights the brand.
   ========================================================================== */

:root {
  /* --- Brand ------------------------------------------------------------ */
  --mws-primary:            #181271;
  --mws-secondary:          #449AE4;

  /* --- Primary ramp (hue 273.2) ----------------------------------------- */
  --mws-primary-950:        #0B0A43;  /* pressed states, deepest ground     */
  --mws-primary-900:        #181271;  /* BRAND — CTAs, headings, stats      */
  --mws-primary-800:        #21286F;
  --mws-primary-700:        #323D8F;
  --mws-primary-600:        #4958B8;  /* borders on dark brand surfaces     */
  --mws-primary-500:        #6D7FD5;
  --mws-primary-400:        #94A6F2;
  --mws-primary-300:        #BDCEFF;  /* text on brand-indigo backgrounds   */
  --mws-primary-200:        #D6E5FF;
  --mws-primary-100:        #E3F1FF;  /* tinted chips, icon wells           */

  /* --- Secondary ramp (hue 247.6) --------------------------------------- */
  --mws-secondary-900:      #002F5C;
  --mws-secondary-800:      #004A7F;
  --mws-secondary-700:      #1667A5;  /* accent text that must pass contrast */
  --mws-secondary-600:      #2F85CC;
  --mws-secondary-500:      #449AE4;  /* BRAND — accents, dots, highlights  */
  --mws-secondary-400:      #6FB7FA;
  --mws-secondary-300:      #93D4FF;
  --mws-secondary-200:      #AEEBFF;

  /* --- Ink & surface (neutrals, tinted toward the primary hue) ---------- */
  --mws-ink-900:            #14152E;  /* headings, strong body              */
  --mws-ink-700:            #2A2D4A;  /* data values inside cards           */
  --mws-ink-500:            #4C5070;  /* body copy, nav links               */
  --mws-ink-400:            #83879F;  /* muted labels, captions             */

  --mws-line-300:           #C4CBE4;  /* outlined-button border             */
  --mws-line-200:           #DEE3F2;  /* default border                     */
  --mws-line-100:           #E8EBF8;  /* subtle divider inside cards        */

  --mws-surface-100:        #F2F5FE;  /* tinted band                        */
  --mws-surface-050:        #F9FBFF;  /* page ground                        */
  --mws-surface-000:        #FFFFFF;  /* cards, nav                         */

  /* --- Type ------------------------------------------------------------- */
  --mws-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mws-font-body:    'Public Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --mws-size-display-1: 3.5rem;    /* 56px — h1                            */
  --mws-size-display-2: 2.125rem;  /* 34px — section headings, stat figures */
  --mws-size-display-3: 2rem;      /* 32px — secondary section headings    */
  --mws-size-heading:   1.125rem;  /* 18px — card titles                   */
  --mws-size-lead:      1.0625rem; /* 17px — hero subhead                  */
  --mws-size-body:      1rem;      /* 16px — body copy                     */
  --mws-size-body-sm:   0.90625rem;/* 14.5px — card body                   */
  --mws-size-ui:        0.875rem;  /* 14px — nav, buttons                  */
  --mws-size-meta:      0.8125rem; /* 13px — captions                      */
  --mws-size-label:     0.6875rem; /* 11px — uppercase labels              */

  --mws-leading-tight:  1.08;
  --mws-leading-snug:   1.2;
  --mws-leading-normal: 1.5;
  --mws-leading-relaxed:1.65;

  --mws-track-display: -0.02em;
  --mws-track-heading: -0.015em;
  --mws-track-label:    0.10em;
  --mws-track-eyebrow:  0.14em;

  /* --- Spacing (4px base) ----------------------------------------------- */
  --mws-space-1: 0.25rem;   /*  4px */
  --mws-space-2: 0.5rem;    /*  8px */
  --mws-space-3: 0.75rem;   /* 12px */
  --mws-space-4: 1rem;      /* 16px */
  --mws-space-5: 1.375rem;  /* 22px */
  --mws-space-6: 1.75rem;   /* 28px */
  --mws-space-7: 2.125rem;  /* 34px */
  --mws-space-8: 2.75rem;   /* 44px */
  --mws-space-9: 4rem;      /* 64px */
  --mws-space-10: 4.75rem;  /* 76px */

  --mws-gutter:         3.75rem;  /* 60px — desktop page gutter            */
  --mws-gutter-mobile:  1.25rem;  /* 20px — phone page gutter              */
  --mws-section-y:      4.5rem;   /* 72px — desktop section padding        */
  --mws-section-y-mobile: 3rem;   /* 48px                                  */
  --mws-max-width:      1200px;

  /* --- Radius ----------------------------------------------------------- */
  --mws-radius-sm:   4px;   /* buttons, inputs        */
  --mws-radius-md:   6px;   /* small panels           */
  --mws-radius-lg:   8px;   /* cards, media           */
  --mws-radius-pill: 999px; /* status chips           */

  /* --- Elevation -------------------------------------------------------- */
  --mws-shadow-card: 0 1px 2px rgba(20, 21, 46, 0.05),
                     0 12px 32px rgba(20, 21, 46, 0.09);
  --mws-shadow-play: 0 6px 24px rgba(20, 21, 46, 0.30);

  /* --- Motion ----------------------------------------------------------- */
  --mws-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --mws-duration: 160ms;
}

/* Contrast notes — verified against WCAG AA (4.5:1 for body text)
   --mws-primary-900  on --mws-surface-000 ....... 14.9:1  AAA
   --mws-ink-500      on --mws-surface-000 ........ 8.0:1  AAA
   --mws-ink-400      on --mws-surface-000 ........ 4.0:1  large text only
   --mws-secondary-700 on --mws-surface-000 ....... 5.4:1  AA
   --mws-secondary-500 on --mws-surface-000 ....... 3.0:1  NON-TEXT ONLY
   --mws-primary-300  on --mws-primary-900 ........ 9.9:1  AAA
   Do not set body copy in --mws-secondary-500. Use it for dots, icons,
   rules, and fills; use --mws-secondary-700 when it has to be readable. */

/* ==========================================================================
   Added during the build
   ========================================================================== */
:root {
  --mws-ink-450:  #63678A;  /* AA-safe muted text; see the contrast table    */
  --mws-error:    #B4232B;  /* form error states only — the one non-brand hue */

  /* The logo artwork was recoloured to --mws-primary-900 (#181271) rather
     than the palette being widened to accommodate it, so there is no
     separate "logo blue". One indigo everywhere. The MWS Connect mark's
     lighter blue was snapped to --mws-secondary-500 at the same time.     */
}