/* Glasshouse design tokens.
 *
 * The palette mirrors app/src/design/tokens.ts and the names are kept
 * identical so the two can be diffed. When a value changes there, it changes
 * here the same day, and the app repo is always the one that is right.
 *
 * This file holds the only literal colour values on the site. Everything in
 * style.css refers to a token.
 *
 * The site inverts the app's figure and ground on purpose. In the app, paper
 * is the ground because the whole thing is meant to feel like a page. Here
 * the ground is ink, because the page is mostly a frame around plant
 * artwork, and that artwork carries its own warm cream. A near miss between
 * two creams reads as a mistake; a deliberate dark ground reads as a
 * mounting. It measures better as well: at the same opacities, text on ink
 * runs 4.8 to 12.5 where text on paper ran 3.3 to 12.5, so the uppercase
 * labels clear the 4.5 an audit asks for instead of failing it, and the moss
 * focus ring reaches 4.4 where on paper it only managed 2.8.
 *
 * There is no cream token. The artwork's own paper measures rgb(242, 223,
 * 194) and the site does not try to match it.
 */

@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/worksans-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('../fonts/worksans-light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('../fonts/ebgaramond-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  /* The five. No sixth. */
  --paper:    #F7F4D5;
  --ink:      #0A3323;
  --moss:     #839958;
  --rose:     #D3968C;
  --midnight: #105666;

  /* Which of the five is doing which job here. */
  --ground:    var(--ink);
  --on-ground: var(--paper);

  /* Hairlines, in the ground's opposite so they are visible on it. */
  --rule:       rgba(247, 244, 213, 0.35);
  --rule-quiet: rgba(247, 244, 213, 0.20);

  --display:   'Fraunces', Georgia, serif;
  --ui:        'Work Sans', system-ui, -apple-system, sans-serif;
  --botanical: 'EB Garamond', Georgia, serif;

  --r-card: 18px;
  --r-btn:  14px;
  --r-pill: 999px;
  /* The frame around a phone. Not any particular handset, just a device. */
  --r-phone: 32px;

  --t-quick:  400ms;
  --t-gentle: 600ms;
  --t-slow:   800ms;
  --ease: cubic-bezier(0.42, 0, 0.58, 1);

  /* The opacity ladder. Hierarchy is opacity on one colour, because this
   * system has no secondary text colour. Every step below clears 4.5
   * against the ground: 12.5, 8.5, 7.7, 5.5, 4.8. */
  --o-primary:   1;
  --o-body:      0.8;
  --o-secondary: 0.75;
  --o-meta:      0.6;
  --o-label:     0.55;
  --o-mark:      0.3;
}