/* ==========================================================================
   tokens — graphite, brass, ruby, blued steel
   ==========================================================================

   The ground is a mid graphite rather than near-black. Every other build in
   this studio sits at one end or the other — near-black or near-white — and
   a movement photographed on a watchmaker's bench sits in between, where
   brass reads warm and steel reads cool against the same field.

   Two colour systems, kept strictly apart:

     Interface   graphite, light, and ONE accent — blued steel.
     Material    brass, steel, ruby, gold. These appear only inside the
                 drawn movement, where they are what the parts are made of,
                 not decisions about a palette.

   If a heading ever turns brass, the distinction has collapsed.
   ========================================================================== */

:root {
  /* interface */
  --graphite:   #23272c;
  --graphite-2: #2a2f35;
  --graphite-3: #333940;

  --light:      #eef0f2;
  --light-2:    rgba(238, 240, 242, 0.66);
  --light-3:    rgba(238, 240, 242, 0.42);
  --light-4:    rgba(238, 240, 242, 0.22);
  --line:       rgba(238, 240, 242, 0.13);
  --line-2:     rgba(238, 240, 242, 0.26);

  --blued:      #4a72c4;
  --blued-2:    rgba(74, 114, 196, 0.5);
  --blued-3:    rgba(74, 114, 196, 0.14);

  /* material — used by the canvas only */
  --plate:      #31363d;
  --bridge:     #3a4047;
  --brass:      #b98d4e;
  --brass-dark: #8a6836;
  --steel:      #9aa4ae;
  --ruby:       #b03a4e;
  --engrave:    rgba(238, 240, 242, 0.22);

  /* type */
  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-body:    "IBM Plex Sans", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --t-hero: clamp(3rem, 10vw, 11rem);
  --t-h2:   clamp(2.1rem, 5.6vw, 5rem);
  --t-body: clamp(1rem, 1.1vw, 1.18rem);
  --t-lead: clamp(1.15rem, 1.75vw, 1.6rem);
  --t-meta: clamp(0.63rem, 0.72vw, 0.73rem);

  --gut: clamp(1.1rem, 3.4vw, 3.2rem);
  --sec: clamp(5rem, 15vh, 12rem);

  /* Named after the two motions a watch makes. --sweep is the long smooth
     one a seconds hand does; --detent is the short decisive one a click
     spring does. */
  --sweep:  cubic-bezier(0.32, 0.9, 0.24, 1);
  --detent: cubic-bezier(0.6, 0, 0.2, 1);
}