/* ==========================================================================
   tokens.css
   Brand custom properties. The only file that holds a raw color value.
   Every other stylesheet references var(--name).

   Colors are the web values from the Fortified Data brand guidelines, not the
   print values. Both mockups declared an identical :root block; this is that
   block, deduplicated, with the second :root in managed-services-page-v7.html
   (--navy-tint) folded in.
   ========================================================================== */
:root{

  /* ---------- brand palette ---------- */
  --navy:#232B5F;          /* primary: structure, dark panels, headings */
  --blue:#1B8DCD;          /* primary accent: rules, markers, subheads */
  --green:#14A05A;         /* secondary accent */
  --purple:#5A449A;        /* light purple. Web scope unresolved, see note */
  --purple-dark:#3C296D;   /* dark purple: depth and dark fills */
  --white:#FFFFFF;

  /* Purple does not appear in the live site's global colors, which suggests
     it is a print-only pairing. Open decision 7 in BUILD-REFERENCE.md. It is
     declared here because both mockups use it in the accent rotation; if the
     answer comes back "print only", change it in this file and nowhere else. */

  /* ---------- site neutrals ---------- */
  --title:#222222;         /* headings, web only */
  --body:#333333;          /* body copy, web only */
  --line:#D8D8D8;          /* borders and dividers */
  --paper:#F8F8F8;         /* page background. Never pure white */
  --alert:#D1373F;         /* validation error. The brand palette has no red
                              at all, and a form has to be able to say a field
                              is wrong. Ported from the live form's styling.
                              Nothing but form validation should use it: it is
                              not a brand color and it is not in the rotation. */

  /* ---------- derived tints ----------
     No ramp is defined in the guidelines yet. These are the four derivations
     both mockups arrived at independently. */
  --muted:#5B6180;                  /* navy-family gray, 5.7:1 on paper */
  --on-navy:rgba(255,255,255,.84);  /* body copy on a navy panel */
  --rule-navy:rgba(255,255,255,.22);/* hairline on a navy panel */
  --navy-tint:#DBDFEB;              /* ~92% white + light purple, band fill */

  /* ---------- interaction states ----------
     Hand-mixed in the mockups as bare hex. Named here so a hover state is not
     a magic number sitting in components.css. */
  --navy-hover:#1A2049;    /* navy fill, hovered */
  --navy-deep:#16436E;     /* nav link label, hovered */
  --blue-hover:#166EA1;    /* blue fill, hovered. The submit button is the
                              only blue fill in the build; every other hover
                              pair above is navy-family and none of them fits
                              a blue button. Ported from the live form. */
  --wash-blue:#F2F8FC;     /* dropdown row, hovered */
  --wash-navy:#E9EEF4;     /* white button on navy, hovered */
  --wash-drawer:#FAFBFC;   /* mobile drawer submenu fill */
  --line-soft:#EFEFEF;     /* drawer row divider, lighter than --line */
  --off:#C6CAD6;           /* inactive star, switch track */
  --off-mark:#B9BEC9;      /* "not included" dash in the comparison matrix */
  --bar-track:#EEF0F4;     /* rotator progress track */

  /* ---------- type stacks ----------
     Asap Bold is reserved for display titles and large numerals. Section
     subheads and everything smaller use Open Sans Bold. Do not apply Asap to
     body copy at any size. */
  --disp:'Asap',Arial,Helvetica,sans-serif;
  --text:'Open Sans',Arial,Helvetica,sans-serif;

  /* ---------- spacing scale ----------
     Not in the brand guidelines. Read off the two mockups, which between them
     used eleven distinct spacing values; these are those values, rounded to a
     scale so page 30 does not invent a twelfth. */
  --sp-1:6px;
  --sp-2:12px;
  --sp-3:14px;
  --sp-4:18px;
  --sp-5:24px;
  --sp-6:28px;
  --sp-7:36px;
  --sp-8:48px;
  --sp-9:56px;
  --sp-10:72px;

  /* ---------- layout ---------- */
  /* Content measure. Both mockups specified 1080px and the build ran at that
     until 17 September 2026, when it was widened sitewide at the client's
     request: 1080 left visible margin either side on an ordinary desktop, and
     the blog's three-card grid beside its 200px category rail was the page
     that made it obvious, at 249px a card against the 328px a standard
     three-card row uses. Nothing wraps text to this: base.css caps p at 66ch
     and .legal caps itself at 78ch, so every measure that governs a line
     length is in ch and none of them moved. What moved is the grids, the
     header and the footer. */
  --wrap:1280px;
  --gutter:24px;           /* side padding inside .wrap */
  --section-y:var(--sp-10);/* vertical section rhythm, desktop */
  --section-y-sm:var(--sp-8);

  /* ---------- motion ---------- */
  --ease:.18s ease;        /* hover and state changes */
  --ease-slow:.38s ease;   /* rotator crossfade */
}