/* ==========================================================================
   DESIGN TOKENS  (design lane)

   Direction: a type specimen sheet. The reader is about to put one of these
   names on a van, so the page shows names in the voice they are meant to
   carry. Each style register in the name lists gets its own typographic
   voice; the generator is a black instrument panel; the rest is cold grey
   sheet stock, the ink is blue-black, and the one chromatic colour is
   hi-vis: the yellow-green of vests, cones and van chevrons, reserved for
   the control that does work. Nothing on the page is warm. The ground is
   cool, the ink is cool, and the accent sits at hue 72, well clear of any
   warm hue; a warm accent on a warm ground is another company's look.

   Fonts are imported here because the page shell links a different family.
   DESIGN-NOTES.md asks for the shell's FONT_URL to be switched to this one,
   ========================================================================== */
:root {
  color-scheme: light;

  /* ---- color ------------------------------------------------------------
     Every text-on-ground pair below was measured (WCAG relative luminance).
     Minimums held:
       ink on paper 16.0      ink-2 on paper 10.0     muted on paper 5.9
       ink on paper-deep 14.0 ink-2 on paper-deep 8.7 muted on paper-deep 5.2
       action-text on paper 6.4   action-text on paper-deep 5.7
       ink on action 14.5     ink on action-hover 10.9
       paper on ink 16.0      on-dark-muted on ink 9.2
       paper on dark-raised 14.1   on-dark-muted on dark-raised 8.1
       action on ink 14.5
     Lowest text pair on the page: 5.2. Hi-vis is never text on the light
     ground (1.1 by luminance; it is seen by chroma, not lightness). On light
     it is a fill with ink text or a rule; on dark it may be text. For the
     same reason the focus ring is ink on light grounds and hi-vis on dark
     ones; page.css scopes --focus per region. */
  --paper:         #ECEFF1;         /* cold grey-white, laminated sheet stock */
  --paper-deep:    #DCE1E5;
  --ink:           #101418;         /* blue-black */
  --ink-2:         #333A42;
  --muted:         #535C65;
  --rule:          #B8C1C9;

  --brand:         var(--ink);      /* the site's identity is black type and black rules */
  --action:        #C4F500;         /* hi-vis; the one control that does work */
  --action-hover:  #ABD600;
  --action-text:   #4A5C00;         /* the same hue dark enough to be text on light ground */

  --dark:          var(--ink);
  --dark-raised:   #1B2127;
  --dark-rule:     #2F373F;
  --on-dark:       var(--paper);
  --on-dark-muted: #AEB8C1;

  /* ---- type -------------------------------------------------------------
     display: Bricolage Grotesque, variable width 75..100 and weight 200..800.
              Condensed 800 is the headline voice; 600 at full width sets
              the name lists.
     text:    Fraunces, variable optical size 9..144 with italic. Body prose
              at small optical size, luxury and professional registers at
              the large one.
     ui:      DM Mono for counts, labels, table heads, trade vocabulary. */
  --font-display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-text:    "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:      "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --size-h1:    clamp(2.5rem, 1.2rem + 5.4vw, 6.75rem);
  --size-h2:    clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
  --size-h3:    clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);   /* nameblock titles */
  --size-sub:   clamp(1.15rem, 1.05rem + 0.6vw, 1.5rem);
  --size-body:  1.0625rem;
  --size-small: 0.9rem;
  --size-label: 0.72rem;

  --leading-body: 1.6;

  /* ---- measure and rhythm ----------------------------------------------- */
  --page-max: 78rem;
  --measure:  38rem;
  --gutter:   1rem;

  --block: clamp(2.5rem, 5vw, 4.5rem);   /* vertical gap between sections */

  /* the sticky jump strip's reserved height: anchor targets and focused
     controls are scrolled to sit below it, not under it. One row below
     768px; from 768px the strip wraps to at most three rows. */
  --jump-h: 3.25rem;

  /* ---- name lists -------------------------------------------------------
     Columns are width-driven above phone size so the layout holds at 350 or
     500 names and with one-word or five-word names. Below 600px a fixed
     count keeps the phone from dropping to one long column. */
  --namelist-col:     15rem;
  --namelist-gap:     2.5rem;
  --namelist-columns: 2;

  --focus: 3px solid var(--ink);   /* light grounds; dark regions override to --action */

  /* ---- identity ---------------------------------------------------------
     The name is set once, as outlines of Bricolage Grotesque at width 75
     and weight 800, and shipped as SVG in design/identity/. The mark is a
     solid square with the V of Vault knocked out and a band across the top,
     drawn on a 16 unit grid so it stays honest at favicon size. The two
     heights below are the only knobs; every box is sized from the SVG
     viewBox ratio so nothing is measured by eye.
       wordmark: 8625 x 846 (caps are 660 of the 846, the tab sits above)
       lockup:   9771 x 846 (mark, 300 of air, then the name) */
  --wordmark-h: 1.15rem;    /* header: caps land at 14.4px, as the old text did */
  --lockup-h:   1.35rem;    /* footer */
}

@media (min-width: 600px)  { :root { --gutter: 1.5rem; } }
@media (min-width: 768px)  { :root { --jump-h: 6.5rem; } }
@media (min-width: 1024px) { :root { --gutter: 2.5rem; } }