/* Design tokens from docs/style_guide.md (measured in the approved reel videos/onni-duas-perguntas).
   One family (Inter, the face of the Fabric and Builder UIs) in two roles, one accent. */
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Inter", "Helvetica Neue", Arial, sans-serif;

  --ink: #1b202d;          /* navy of the UI chrome, 15.16:1 on paper */
  --paper: #f5f7fa;        /* UI canvas */
  --paper-2: #e9edf3;      /* panels on paper */
  --ink-2: #5a6578;        /* 5.48:1 on paper */
  --line: #d3d9e3;
  --accent: #608bc1;       /* the one accent: lines, key words on night, focus ring */
  --accent-soft: #8db0dc;  /* lighter step of the accent: small accent text on night-2 panels (AA) */
  --accent-deep: #3f6aa3;  /* same hue, for small text and buttons on paper (5.15:1; white on it 5.52:1) */
  --status: #c0392b;       /* bottleneck lines in the Revenue-to-Cash scene only */
  --night: #1b202d;
  --night-2: #232a3a;
  --on-night: #f5f7fa;
  --on-night-2: #9aa6b8;   /* 6.60:1 on night */
  --night-line: rgb(245 247 250 / 0.16);

  --t-xs: clamp(0.875rem, 0.85rem + 0.1vw, 0.92rem);
  --t-s: clamp(0.9rem, 0.87rem + 0.15vw, 1rem);
  --t-m: clamp(1rem, 0.96rem + 0.2vw, 1.15rem);
  --t-l: clamp(1.3rem, 1.15rem + 0.7vw, 1.8rem);
  --t-xl: clamp(2rem, 1.4rem + 2.6vw, 4rem);
  --t-xxl: clamp(2.75rem, 1.6rem + 5.6vw, 8.5rem);

  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem; --s-10: 10rem;

  --gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  --measure: 60ch;
  --radius: 10px;
}