/* MeasureScale design tokens — v0.1, 13 Oct 2026
   Source of truth for the marketing site. Plain custom properties, no build step,
   so it moves straight into a WordPress block theme (theme.json mirrors these names).

   Colour rule: two brand colours, taken unchanged from the logo.
   Every neutral is tinted with the logo's own hue (209°).
   Font rule: Fustat, the wordmark's typeface. */

/* Fustat (OFL 1.1, see fonts/OFL.txt). The wordmark's typeface, licensed through Adobe Fonts
   for design tools. The site self-hosts a Latin subset of the same OFL file:
   no kit to keep alive, no third-party request, 26 KB for every weight 200–800. */
@font-face{
  font-family:"Fustat";
  src:url("fonts/Fustat-Latin.woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}

:root{
  /* Brand: exactly the logo */
  --ms-blue:#337DC2;          /* logo dark circles. Fills, icons, focus, large text only (4.33:1 on white) */
  --ms-sky:#63B4FF;           /* logo light circles. Decoration on light; text allowed on night (8.19:1) */

  /* Neutrals, hue 209° */
  --ms-ink:#0B1722;           /* headings, body. 18.11:1 on white */
  --ms-ink-soft:#2C3E4E;      /* lead paragraphs. 11.02:1 */
  --ms-mute:#4F5F6D;          /* captions, labels. 6.58:1 on white, 6.23:1 on paper */
  --ms-border-input:#718598;  /* form-field edges. 3.81:1, meets the 3:1 rule for controls */
  --ms-line-strong:#A9B8C6;   /* hover edges, dividers that need weight (decorative) */
  --ms-line:#DAE3EC;          /* card and table dividers (decorative) */
  --ms-line-soft:#EAF0F6;     /* hairlines inside components (decorative) */
  --ms-paper:#F6F9FB;         /* page background */
  --ms-surface:#FFFFFF;       /* cards, product visuals, charts */
  --ms-tint:#E8F4FF;          /* brand-tinted panels, icon chips */
  --ms-tint-strong:#CCE6FF;   /* selected states, highlight bars */

  /* Night: dark sections */
  --ms-night:#0B1722;         /* same as ink */
  --ms-night-raised:#152432;
  --ms-night-line:#273949;
  --ms-night-text:#E8EFF5;
  --ms-night-mute:#A8B8C7;    /* 8.92:1 on night */

  /* Status: only for results, always with an icon and a word */
  --ms-ok:#1D6B45;   --ms-ok-tint:#E3F3EA;    --ms-ok-night:#8FE0B4;
  --ms-warn:#8A5A00; --ms-warn-tint:#FBF0D9;  --ms-warn-night:#F2C46B;
  --ms-bad:#A23B2E;  --ms-bad-tint:#FBE6E2;   --ms-bad-night:#F4A39B;

  /* Data: Search Console's metric colours, clicks takes the brand blue.
     Charts always sit on --ms-surface (position orange is 2.92:1 on paper) */
  --ms-clicks:#337DC2;
  --ms-impressions:#5E35B1;   --ms-impressions-night:#9575CD;
  --ms-ctr:#00897B;           --ms-ctr-night:#26A69A;
  --ms-position:#E8710A;
  --ms-baseline:#A9B8C6;      /* comparison series, previous period */

  /* Type */
  --ms-font:"Fustat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ms-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ms-w-regular:400; --ms-w-medium:500; --ms-w-semibold:600; --ms-w-bold:700; --ms-w-black:800;

  --ms-text-hero:clamp(2.625rem,1.2rem + 5.2vw,4.75rem);   /* 42 → 76, homepage H1 only */
  --ms-text-display:clamp(2.5rem,1.6rem + 3.8vw,4rem);     /* 40 → 64 */
  --ms-text-h1:clamp(2.125rem,1.5rem + 2.6vw,3rem);        /* 34 → 48 */
  --ms-text-h2:clamp(1.75rem,1.35rem + 1.7vw,2.25rem);     /* 28 → 36 */
  --ms-text-h3:1.375rem;      /* 22 */
  --ms-text-h4:1.125rem;      /* 18 */
  --ms-text-lead:clamp(1.125rem,1.05rem + .35vw,1.25rem);  /* 18 → 20 */
  --ms-text-body:1.0625rem;   /* 17 */
  --ms-text-small:.9375rem;   /* 15 */
  --ms-text-caption:.8125rem; /* 13 */
  --ms-text-button:1.1875rem; /* 19, bold: the large-text size that lets white sit on --ms-blue */

  --ms-lh-tight:1.05; --ms-lh-heading:1.15; --ms-lh-body:1.65;
  --ms-track-display:-.03em; --ms-track-heading:-.02em; --ms-track-eyebrow:.12em;

  /* Space: 4px grid */
  --ms-s-1:4px;  --ms-s-2:8px;  --ms-s-3:12px; --ms-s-4:16px; --ms-s-5:20px; --ms-s-6:24px;
  --ms-s-8:32px; --ms-s-10:40px; --ms-s-12:48px; --ms-s-16:64px; --ms-s-20:80px; --ms-s-24:96px; --ms-s-32:128px;
  --ms-section:clamp(64px,4rem + 4vw,128px);
  --ms-gutter:clamp(16px,1rem + 2vw,40px);
  --ms-max:1200px; --ms-max-text:68ch;

  /* Shape: the logo is circles, so actions are pills */
  --ms-r-sm:6px;     /* code, inline tags */
  --ms-r-md:10px;    /* inputs, mini panels inside cards */
  --ms-r-lg:16px;    /* cards */
  --ms-r-xl:20px;    /* product visuals */
  --ms-r-pill:999px; /* buttons, chips, toggles */

  --ms-shadow-sm:0 1px 2px rgba(11,23,34,.06);
  --ms-shadow-md:0 1px 2px rgba(11,23,34,.05),0 10px 30px -14px rgba(11,23,34,.18);
  --ms-shadow-lg:0 2px 4px rgba(11,23,34,.05),0 24px 60px -24px rgba(11,23,34,.28);

  /* Motion */
  --ms-ease:cubic-bezier(.22,1,.36,1);
  --ms-fast:150ms; --ms-base:250ms; --ms-slow:450ms;

  --ms-focus:0 0 0 3px var(--ms-surface),0 0 0 5px var(--ms-blue);
}