/* MeshVault v4 tokens: the label-maker world.
   Monochrome by law. Contrast comes from material (wall, card stock, tape), never hue.
   One module (--u, 4px): spacing, line heights and tape heights are whole multiples of it.
   Fonts are self-hosted (CSP font-src 'self'); the tape face ships with tape.css. */

@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(/assets/fonts/libre-franklin-latin-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url(/assets/fonts/libre-franklin-italic-latin-var.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Noto Serif";src:url(/assets/fonts/noto-serif-latin-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Noto Serif";src:url(/assets/fonts/noto-serif-italic-latin-var.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  color-scheme:light;

  /* Material. Wall is the page, card is stock laid on it, tape is stuck on either. */
  --wall:#EEEDE9;          /* daylight paper-white wall: the page ground */
  --wall-deep:#E4E2DC;     /* wall in shadow: recessed bands, shelf underside */
  --card:#FDFDFB;          /* card stock: offers, forms, menus, footer sheet */
  --shelf:#F7F6F2;         /* shelf-edge laminate face (nav strip, offer shelf) */
  --ink:#232327;           /* graphite: text, rules that matter, icons */
  --ink-2:#48484F;         /* secondary text, 7.4:1 on --wall */
  --ink-3:#64646B;         /* tertiary text and dates, 4.9:1 on --wall, 5.8:1 on --card */
  --rule:#CDCBC4;          /* hairline between things of equal rank */
  --rule-strong:#9F9D96;   /* form borders, leader lines, shelf lip */
  --tape-black:#141416;    /* black label tape (primary) */
  --tape-white:#F5F4EF;    /* white label tape (second tape) */
  --on-tape-black:#F4F3EE; /* embossed letters on black tape */
  --on-tape-white:#18181B; /* letters on white tape */
  --select:#232327;        /* text selection ground */
  --on-select:#FDFDFB;

  /* Module and spacing: every value is n x --u. */
  --u:4px;
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-8:32px; --s-10:40px; --s-12:48px; --s-16:64px; --s-20:80px; --s-24:96px; --s-32:128px;
  --gutter:clamp(16px,4vw,48px);   /* page side padding; snaps visually at 16/32/48 */
  --measure:66ch;                  /* reading measure */
  --wrap:1248px;                   /* 312 modules */
  --wrap-narrow:816px;
  --tap-min:44px;
  --nav-h:64px;                    /* shelf strip height, 16 modules */

  /* Families. Display from Book v3; reading in the book's Noto Serif; labels and UI in Libre Franklin. */
  --font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --font-text:"Noto Serif",Georgia,"Times New Roman",serif;
  --font-ui:"Libre Franklin","Helvetica Neue",Arial,sans-serif;

  /* Type scale (rem at 16px root). Line heights are multiples of 4px. */
  --t-2xs:.75rem;     /* 12: legal fine print only */
  --t-xs:.8125rem;    /* 13: dates, captions */
  --t-sm:.9375rem;    /* 15: UI labels, footer links */
  --t-md:1.0625rem;   /* 17: body on phones, UI emphasis */
  --t-body:1.125rem;  /* 18: body on desktop */
  --t-body-mobile:1.0625rem;
  --t-lg:1.375rem;    /* 22: lede */
  --t-xl:1.75rem;     /* 28: h3, statements on phones */
  --t-2xl:clamp(2rem,1.4rem + 2.2vw,2.75rem);      /* 32 to 44: statements */
  --t-3xl:clamp(2.5rem,1.6rem + 3.6vw,4rem);       /* 40 to 64: display statements */
  --t-4xl:clamp(3rem,1.8rem + 5vw,5.5rem);         /* 48 to 88: max display (never above 6rem) */
  --lh-tight:1.05;
  --lh-snug:1.2;
  --lh-ui:20px;
  --lh-ui-lg:24px;
  --lh-body:28px;
  --lh-lede:32px;
  --track-caps:.06em;

  /* Depth: only stacked physical layers. Every shadow has an offset and a soft blur. */
  --lift-1:0 1px 1px rgba(24,24,28,.10),0 2px 4px -1px rgba(24,24,28,.08);
  --lift-2:0 1px 1px rgba(24,24,28,.10),0 4px 8px -2px rgba(24,24,28,.12),0 12px 20px -8px rgba(24,24,28,.10);
  --lift-3:0 2px 2px rgba(24,24,28,.10),0 8px 16px -4px rgba(24,24,28,.14),0 24px 40px -16px rgba(24,24,28,.18);
  --shelf-cast:0 1px 0 rgba(255,255,255,.9) inset,0 -1px 0 rgba(24,24,28,.06) inset,0 2px 2px rgba(24,24,28,.08),0 6px 12px -6px rgba(24,24,28,.18);
  --r-card:2px;    /* cut card stock: nearly square */
  --r-field:2px;

  /* Focus: graphite ring with a card-colored gap so it reads on tape, card and wall. */
  --focus-w:2px;
  --focus-gap:3px;
  --focus-ring:0 0 0 var(--focus-gap) var(--card),0 0 0 calc(var(--focus-gap) + var(--focus-w)) var(--ink);

  /* Motion. */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-press:cubic-bezier(.3,0,.2,1);
  --dur-1:120ms;
  --dur-2:240ms;
  --dur-3:480ms;
  --dur-emboss:720ms;

  --z-nav:100;
  --z-menu:110;
}