/* ==========================================================================
   aangan — design tokens

   A light practice. Where the webstoree showcase is a dark room with one lamp
   in it, this is a drawing sheet in daylight: bone paper, graphite ink, and a
   single oxide red that only ever marks something — a dimension, a section
   cut, a live link. Nothing else is allowed to be coloured.
   ========================================================================== */

:root {
  /* --- paper --- */
  --paper:   #f4f1ea;
  --paper-2: #ebe7dc;
  --paper-3: #ded9ca;

  /* --- graphite --- */
  --ink:   #14130f;
  --ink-2: rgba(20, 19, 15, 0.66);
  --ink-3: rgba(20, 19, 15, 0.42);
  --ink-4: rgba(20, 19, 15, 0.20);

  /* --- the one mark --- */
  --clay:     #b4472c;
  --clay-dim: rgba(180, 71, 44, 0.42);

  /* --- rules --- */
  --line:       rgba(20, 19, 15, 0.16);
  --line-faint: rgba(20, 19, 15, 0.07);

  /* --- on the dark closing frame --- */
  --on-dark:   #f4f1ea;
  --on-dark-2: rgba(244, 241, 234, 0.62);

  /* --- type --- */
  --f-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --f-body:    "Newsreader", ui-serif, Georgia, serif;
  --f-mono:    "Martian Mono", ui-monospace, monospace;
  --f-deva:    "Noto Sans Devanagari", sans-serif;

  /* --- fluid scale --- */
  --t-hero: clamp(3.4rem, 13vw, 15rem);
  --t-h2:   clamp(2.1rem, 5.2vw, 5rem);
  --t-h3:   clamp(1.2rem, 1.9vw, 1.85rem);
  --t-lead: clamp(1.1rem, 1.75vw, 1.8rem);
  --t-body: clamp(0.98rem, 1.05vw, 1.08rem);
  --t-meta: clamp(0.6rem, 0.7vw, 0.7rem);

  /* --- rhythm --- */
  --gut:   clamp(1.25rem, 5vw, 5rem);
  --stack: clamp(5rem, 15vh, 12rem);

  /* --- motion: one curve --- */
  --ease:      cubic-bezier(0.19, 1, 0.22, 1);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- depth: the tunnel --- */
  --persp: 900px;

  --grain-src: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}