/*
 * Design tokens.
 *
 * Layout concept: one deep-green world cut by pale "starch" slabs that slide
 * over each other; the logo's ribbon is the only loud element and it carries
 * every page change.
 */

:root {
  color-scheme: dark;

  /* Colour */
  --forest: #062E25;      /* page ground */
  --pit: #041F19;         /* recessed panels */
  --green: #094839;       /* brand green, raised surfaces */
  --leaf: #12705A;        /* lines and soft fills on green */
  --ochre: #D68F34;       /* brand accent */
  --ochre-deep: #8F5410;  /* accent text on pale ground */
  --starch: #F0F4EF;      /* pale ground */
  --ink: #0F221D;         /* text on pale ground */
  --mist: #B4CABF;        /* muted text on green */
  --haze: #D5E2DB;        /* lede text over the hero */
  --slate: #48605A;       /* muted text on pale */
  --mint: #9FD8C2;        /* third ingredient colour */
  --sand: #E9C58F;        /* fourth ingredient colour, the finished blend */
  --whatsapp: #25D366;    /* WhatsApp's own green, for the chat bubble only */
  --line: rgba(240, 244, 239, .15);
  --line-ink: rgba(15, 34, 29, .14);

  /* Type */
  --display: "Bricolage Grotesque", "Poppins", "Avenir Next", "Segoe UI", sans-serif;
  --body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-hero: clamp(2.6rem, 6.5vw, 5.5rem);
  --fs-h2: clamp(2rem, 4.8vw, 3.9rem);
  --fs-h3: clamp(1.2rem, 2.1vw, 1.55rem);
  --fs-body: 1.0625rem;
  --fs-small: .8125rem;

  /* Layout */
  --nav-height: 64px;
  --radius: 28px;
  --bubble-size: 56px;    /* floating WhatsApp button */
  --bubble-inset: 22px;   /* its distance from the screen edges */

  /* Motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);
}

@media (max-width: 520px) {
  :root {
    --nav-height: 58px;
    --radius: 22px;
    --bubble-inset: 16px;
  }
}