/* ============================================================
   Blynq design tokens
   Derived from the design read: off-white canvas, warm near-black
   ink, NO saturated accent. Brand voltage is the gap, not colour.
   ============================================================ */

:root{
  /* ---- surface ---- */
  --canvas:            #f5f4f2;   /* page floor, off-white, faintly warm */
  --canvas-soft:       #faf9f7;   /* alternating band */
  --canvas-deep:       #0c0a09;   /* the one dark band, closing section */
  --surface:           #ffffff;   /* cards */
  --surface-strong:    #efedea;   /* badges, plates */

  /* ---- ink ---- */
  --ink:               #0c0a09;   /* display + primary text */
  --ink-2:             #292524;   /* primary action fill */
  --body:              #4e4a47;   /* running text */
  /* #78716c measured 4.36 on --canvas, under AA. Walked down to 5.29 / 5.52. */
  --muted:             #6b645f;   /* subtitles, labels */
  /* Only legible on --canvas-deep (7.83). Never put this on a light surface,
     where it measures 2.29. Use --muted there. */
  --muted-soft:        #a8a29e;   /* on-dark secondary only */
  --on-ink:            #ffffff;

  /* ---- hairlines ---- */
  --hairline:          #e7e5e4;
  --hairline-strong:   #d6d3d1;

  /* There is deliberately no --accent. A single ink pill carries every
     conversion target. Introducing a brand colour here would undo the
     restraint the product is arguing for. */

  /* ---- type ---- */
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --tight: "Inter Tight", var(--sans);
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display runs light. Weight 200 is the signature, but it is only legible
     at scale, so the scale itself encodes the floor:
       200 -> 40px and above only
       300 -> 24px and above only
       never below 24px  */
  --display-mega: clamp(2.75rem, 7.5vw, 6rem);
  --display-xl:   clamp(2.1rem,  4.8vw, 3.5rem);
  --display-lg:   clamp(1.6rem,  3.2vw, 2.3rem);
  --display-sm:   clamp(1.2rem,  2.4vw, 1.6rem);
  --display-page: clamp(2.6rem,  6.4vw, 5.25rem);  /* inner-page h1, weight 200 */
  --display-num:  clamp(2.6rem,  5vw,   4.5rem);   /* measured figures, weight 200 */
  --text:         1.0625rem;
  --text-sm:      0.9375rem;
  --label:        0.7rem;

  /* ---- rhythm ----
     Longer than a normal marketing site on purpose. The page holds silence. */
  --gap-1: .5rem;  --gap-2: 1rem;   --gap-3: 1.5rem;
  --gap-4: 2.5rem; --gap-5: 4rem;   --gap-6: 7rem;
  --section: clamp(6rem, 14vh, 11rem);

  --measure: 34rem;          /* reading measure */
  --shell:   min(100% - 3rem, 72rem);

  --radius:      2px;        /* near-square. soft pills would read consumer-app */
  --radius-pill: 999px;      /* the one exception: the primary action */

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* The plate the product sits on is a cool grey while the page ink is warm.
   These two are sampled from the actual frames so the canvas can meet the
   product without a seam. */
:root{
  --plate-top:    #c1c1c3;
  --plate-bottom: #c8c8ca;
}