/* ScanNod design tokens ("Zest" look). Shared by the landing page and the demo.
   Link this file first, then the page's own stylesheet. It holds only @font-face rules and
   custom properties on :root; no selectors that style a page.

   FONTS   --f / --fd  Ysabeau Office (text and display, variable weight 200 to 700)
           --fm        Azeret Mono (case numbers, dates, prices, links; weight 400 to 500)
           Self-hosted from ../fonts/, Latin subset, SIL Open Font Licence (licence files
           sit next to them). The "... Fallback" faces resize a system font to the same
           width so text does not jump when the web font arrives.
   COLOUR  --bg white page · --ink text · --muted secondary text (4.9:1 on white)
           --line hairlines inside cards · --edge card and control borders
           --blue / --aqua  decoration only: scan line, rings, ticks, focus outline
           --blue-ink       blue text on white or --faint (4.9:1)
           --btn-a/--btn-b  filled button: white label stays above 4.5:1 across the gradient
           --faint          tinted button and image backing · --wash-* the pale cool panel
   GRADIENT --scan (the logo's scan line, left to right) · --scan-v (same, top to bottom)
            --wash (hero panel) · --btn (primary button, slides on hover) · --numeral (step numerals)
   SHADOW  --soft cards and dialog · --lift small controls · --lift-hover · --glow under blue buttons
   MOTION  --ease standard ease-out · --ease-io for sweeps that start and stop softly
           --t-fast press · --t-mid hover · --t-slow reveals
   TYPE    --fs-* sizes · --lh-* line heights
   RADIUS  --r-xs 5 ticks · --r-sm 9 images · --r-md 11 buttons, inputs · --r-lg 16 cards, dialog
   LAYOUT  --page max content width · --gutter side padding (respects phone safe areas)

   Light theme only. Pages must also carry <meta name="color-scheme" content="only light">. */

@font-face{font-family:"Ysabeau Office";font-style:normal;font-weight:200 700;font-display:swap;
  src:url("../fonts/YsabeauOffice-latin-wght.woff2") format("woff2")}
@font-face{font-family:"Azeret Mono";font-style:normal;font-weight:400 500;font-display:swap;
  src:url("../fonts/AzeretMono-latin-wght.woff2") format("woff2")}
/* Metric-matched system fallbacks (used only until the files above arrive, or if they fail). */
@font-face{font-family:"Ysabeau Fallback";src:local("Segoe UI"),local("Helvetica Neue"),local("Arial");
  size-adjust:91%;ascent-override:116%;descent-override:32%;line-gap-override:0%}
@font-face{font-family:"Azeret Fallback";src:local("Consolas"),local("Menlo"),local("Courier New");
  size-adjust:118%;ascent-override:80%;descent-override:20%;line-gap-override:0%}

:root{
  color-scheme:only light;

  /* fonts */
  --fd:"Ysabeau Office","Ysabeau Fallback","Optima","Candara","Segoe UI",sans-serif;
  --f:var(--fd);
  --fm:"Azeret Mono","Azeret Fallback",ui-monospace,Consolas,"Courier New",monospace;

  /* colour */
  --bg:#FFFFFF;
  --ink:#1F2630;
  --muted:#667281;
  --line:#E8EDF2;
  --edge:#DDE4EC;
  --edge-hover:#B4CBE8;
  --edge-off:#D3DAE3;
  --blue:#3A86E8;
  --aqua:#35BFD8;
  --blue-ink:#1F6FD6;
  --btn-a:#2573DA;
  --btn-b:#1A78C4;
  --faint:#F4F9FE;
  --faint-hover:#E9F2FD;
  --wash-a:#F3F8FF;
  --wash-b:#ECF4FC;
  --wash-c:#E7F5F7;

  /* gradients */
  --scan:linear-gradient(90deg,var(--blue),var(--aqua));
  --scan-v:linear-gradient(180deg,var(--blue),var(--aqua));
  --wash:linear-gradient(165deg,var(--wash-a) 0%,var(--wash-b) 55%,var(--wash-c) 100%);
  --btn:linear-gradient(100deg,var(--btn-a) 0%,var(--btn-a) 45%,var(--btn-b) 100%);
  --numeral:linear-gradient(180deg,#B7D0F0,#CFEBF0);
  --shot:linear-gradient(180deg,#FBFDFF,var(--faint));

  /* shadows */
  --soft:0 1px 1px rgba(20,40,70,.04),0 8px 16px -8px rgba(20,40,70,.08),0 32px 64px -32px rgba(20,40,70,.22);
  --lift:0 1px 1px rgba(20,40,70,.04),0 10px 20px -16px rgba(20,40,70,.28);
  --lift-hover:0 1px 1px rgba(20,40,70,.04),0 16px 26px -16px rgba(20,40,70,.34);
  --glow:0 1px 1px rgba(20,40,70,.10),0 10px 20px -12px rgba(37,115,218,.75);
  --glow-hover:0 1px 1px rgba(20,40,70,.10),0 16px 26px -14px rgba(37,115,218,.8);
  --ring:rgba(58,134,232,.3);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-io:cubic-bezier(.45,0,.55,1);
  --t-fast:.08s;
  --t-mid:.3s;
  --t-slow:.9s;

  /* type scale */
  --fs-hero:clamp(2.6rem,5.3vw,4.6rem);
  --fs-statement:clamp(1.45rem,2.9vw,2.3rem);
  --fs-price:clamp(8rem,25vw,19rem);
  --fs-numeral:10rem;
  --fs-h3:1.65rem;
  --fs-lead:clamp(1.15rem,1.6vw,1.3rem);
  --fs-body:18px;
  --fs-ui:16.5px;
  --fs-small:14px;
  --fs-mono:13px;
  --fs-mono-s:11.5px;
  --lh-tight:1.02;
  --lh-head:1.18;
  --lh-body:1.5;

  /* radii */
  --r-xs:5px;
  --r-sm:9px;
  --r-md:11px;
  --r-lg:16px;

  /* layout */
  --page:1160px;
  --gutter:22px;

  /* the tick drawn inside a checked box */
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M4.6 9.4l2.9 2.9 5.9-6.6' fill='none' stroke='%233A86E8' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}