/* Reno design tokens: the one place for colour, type, spacing, motion and breakpoints.
   Every page loads this first, then base.css, components.css and its own css/pages/ file.

   Breakpoints. CSS can't share these as variables, so media queries repeat the numbers and
   js/lib/chrome.js mirrors them as BP:
     phone    up to 767px
     tablet   768 to 1023px
     desktop  1024px and up (the landing's photo tiles change once more at 1280px)

   Type scale, from Render's v7 / v8 reference (13px UI size, display only for section titles):
     --t-ui       13px        labels, index, nav, buttons, captions, footer
     --t-body     15px        paragraphs
     --t-large    28 to 44px  pills, amounts and the mobile menu (Ronzino)
     --t-display  44 to 64px  section titles (Serial Blur, the one display cut)
   One Ronzino weight (400). Hierarchy comes from size and colour, never weight. */
:root{
  /* colour */
  --paper:#fff;                   /* page ground; the landing uses #fafafa (css/pages/landing.css) */
  --bar:rgba(255,255,255,.86);    /* the top bar once the page scrolls */
  --ink:#141210;
  --ink-2:#4a4744;
  --ink-hover:#3a3835;            /* filled buttons on hover */
  --stone:#9A9893;
  --hair:#e6e4e0;
  --field:#cfccc7;                /* input border at rest, between hair and stone */
  --chip:#ebe9e5;                 /* the active nav link */
  --tile:#ececeb;                 /* photo tiles while their image loads */
  --white:#fff;                   /* surfaces that sit on a white image ground or over the page */
  --orange:#FF7D01;               /* one mark per view at most */

  /* type */
  --fallback:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --ui:"Ronzino",var(--fallback);
  --display:"Serial Blur",var(--fallback);
  --t-ui:13px;      --lh-ui:1.4;     --tr-ui:.01em;
  --t-body:15px;    --lh-body:1.5;
  --t-large:clamp(28px, 3vw, 44px);  --lh-large:1;   --tr-large:-0.01em;
  --t-display:clamp(44px, 4.45vw, 64px); --lh-display:1; --tr-display:-0.02em;

  /* layout */
  --gutter:40px;
  --split:0.32;    /* photo column share; nav links and every text column start on this line */
  --tx:36px;       /* text inset from the split line */
  --navh:56px;

  /* motion */
  --ease:cubic-bezier(.2,.7,.1,1);
  /* heading resolve: blur, then how long the blur, fade and metal ramp take. Pages that step
     through headings quickly use these; the landing sets slower ones */
  --rs-blur:20px; --rs-t:1.1s; --rs-fade:.4s; --rs-ramp:1.3s; --rs-delay:.1s;
}
/* tablet */
@media (min-width:768px) and (max-width:1023px){
  :root{--gutter:28px;--split:0.36;--tx:24px;}
}
/* phone */
@media (max-width:767px){
  :root{--gutter:20px;--t-large:clamp(26px, 7.4vw, 32px);}
}