/* public/css/tokens.css
   THE design system. One definition, loaded by the app and by every public
   page, so the product and the marketing site cannot drift apart.

   It used to live inline in index.html while landing.html and pnz.html ran
   their own palette, which is why a visitor clicking from the website into
   Vocara watched the brand teal change under them. Two teals is what "two
   teams built this" looks like.

   Marketing pages SHOULD look different from the app: a landing page is seen
   once and has to persuade, the app is opened forty times a day and has to get
   out of the way. They share this vocabulary, not the restraint.
*/
:root {

  /* SURFACES */
  --v-canvas:      #EDEBE4;   /* the warm paper the app sits on */
  --v-sheet:       #FFFFFF;   /* the one card colour */
  --v-sunk:        #F7F6F2;   /* recessed wells inside a sheet */

  /* INK - one hue, five weights. Replaces every grey and every slate. */
  --v-ink:         #14232A;
  --v-ink-70:      rgba(20,35,42,.70);
  --v-ink-50:      rgba(20,35,42,.50);
  --v-ink-38:      rgba(20,35,42,.38);
  --v-ink-22:      rgba(20,35,42,.22);

  /* MEANING */
  --v-teal:        #1F6B5C;   /* verified, complete, synced */
  --v-teal-soft:   rgba(31,107,92,.10);
  --v-gold:        #A8813F;   /* needs your attention, expiring */
  --v-gold-soft:   rgba(168,129,63,.12);
  --v-alert:       #B4472F;   /* blocking, overdue, destructive */
  --v-alert-soft:  rgba(180,71,47,.10);

  /* HAIRLINES */
  --v-line:        rgba(20,35,42,.09);
  --v-line-2:      rgba(20,35,42,.14);

  /* RADIUS - four values, nothing else */
  --v-r-sm:        10px;
  --v-r-md:        14px;
  --v-r-lg:        22px;
  --v-r-full:      999px;

  /* ELEVATION - long and soft, never dark */
  --v-lift-1: 0 1px 2px rgba(20,35,42,.04), 0 4px 12px -4px rgba(20,35,42,.06);
  --v-lift-2: 0 1px 3px rgba(20,35,42,.05), 0 12px 32px -12px rgba(20,35,42,.14);
  --v-lift-3: 0 2px 6px rgba(20,35,42,.06), 0 24px 60px -20px rgba(20,35,42,.20);

  /* GLASS - the rail and the floating action bar, nothing else.
     Blur over scrolling content is the most expensive thing we can ask a
     browser to paint, so it is opt-in per component and off on mobile. */
  --v-glass-bg:     rgba(255,255,255,.58);
  --v-glass-edge:   rgba(255,255,255,.85);
  --v-glass-blur:   blur(28px) saturate(180%);

  /* TYPE - six steps. The 64px marketing hero is not one of them. */
  --v-t-mono:      10px;   /* labels, uppercase, tracked */
  --v-t-sm:        12px;
  --v-t-body:      13.5px; /* every UI control */
  --v-t-lead:      15px;   /* note body copy */
  --v-t-h2:        21px;   /* section heading, Playfair */
  --v-t-h1:        28px;   /* page title, Playfair */
}