/* ==========================================================================
   tokens — bone paper, ink, one electric blue
   ==========================================================================

   मात्रा (matra) is the horizontal line Devanagari letters hang from — and
   also the word for a unit of measure. The whole site is built on that rule:
   a hairline that runs above things, and a grid that everything measures
   against. Blue is only ever allowed to be a mark on that measure, never a
   surface.
   ========================================================================== */

:root {
  /* ground */
  --paper:    #f0efe9;
  --paper-2:  #e8e6dd;
  --paper-3:  #dedbd0;

  /* ink */
  --ink:      #12120f;
  --ink-2:    rgba(18, 18, 15, 0.68);
  --ink-3:    rgba(18, 18, 15, 0.44);
  --ink-4:    rgba(18, 18, 15, 0.24);
  --line:     rgba(18, 18, 15, 0.14);
  --line-2:   rgba(18, 18, 15, 0.3);

  /* the one mark colour */
  --blue:     #2b35ff;
  --blue-2:   rgba(43, 53, 255, 0.5);
  --blue-3:   rgba(43, 53, 255, 0.12);

  /* inverted blocks — the case, the footer */
  --on-ink:   #f4f3ee;
  --on-ink-2: rgba(244, 243, 238, 0.62);
  --on-ink-3: rgba(244, 243, 238, 0.34);
  --ink-line: rgba(244, 243, 238, 0.16);

  /* type — the foundry's two scripts share an axis range on purpose */
  --f-sans: "Anek Latin", system-ui, sans-serif;
  --f-deva: "Anek Devanagari", "Anek Latin", system-ui, sans-serif;
  --f-mono: "Space Mono", ui-monospace, monospace;

  --t-hero: clamp(2.9rem, 10.5vw, 11.5rem);
  --t-h2:   clamp(2rem, 5.6vw, 5rem);
  --t-h3:   clamp(1.3rem, 2.6vw, 2.3rem);
  --t-body: clamp(1rem, 1.1vw, 1.22rem);
  --t-lead: clamp(1.2rem, 1.9vw, 1.8rem);
  --t-meta: clamp(0.64rem, 0.74vw, 0.75rem);

  /* rhythm */
  --gut:  clamp(1.1rem, 3.4vw, 3.2rem);
  --sec:  clamp(5rem, 15vh, 12rem);
  --rule: 2px;              /* the matra itself */

  /* Two curves, and the rule for which is which: --ease for anything that is
     information (type arriving, sections moving), --ease-back for anything
     that is behaving like an OBJECT. A page about physical letterforms is
     allowed one curve that overshoots; body copy is not. */
  --ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.28, 0.4, 1);
  --ease-io:   cubic-bezier(0.76, 0, 0.24, 1);
}