/* Brand tokens and fonts, shared by the client's pages (served from here)
   and the builder, which loads this same file from /static/brand.css.
   Tokens only: no element styles, so either side can load it safely.

   Colours come from the logo (see CLAUDE.md). Contrast, measured on
   --surface unless noted:
     --ink 12.2:1, --ink-soft 5.9:1 (5.4:1 on --ground),
     white on --accent 6.9:1, --accent as text 6.9:1,
     --gold-deep on --gold-tint 5.1:1, --field against white 3.8:1.
   White on --pink is only 3.1:1, so pink is decoration, never behind text.
   The logo's average gold (#CBA839) is 2.3:1 on white: the mark only. */

@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Text */
  --ink: #3a3434;          /* the charcoal of "page" in the wordmark */
  --ink-soft: #6b6363;

  /* Surfaces and lines */
  --ground: #f7f5f2;
  --surface: #ffffff;
  --line: #e6e1dd;
  --field: #8a8080;

  /* The sticker: purple to pink */
  --accent: #813d97;
  --accent-strong: #6a2f7d;
  --accent-tint: #f7eef9;
  --pink: #f05f94;
  --sticker: linear-gradient(135deg, #813d97, #f05f94);

  /* Gold: the deep end works as text, the rest is for the mark */
  --gold-deep: #896000;
  --gold-tint: #fff4c8;
  --gold: #cba839;

  /* States */
  --danger: #b42318;
  --ok: #1d6b3a;

  /* Type */
  /* The device's own interface font, as healthfile uses: San Francisco on
     Apple devices, Segoe UI on Windows, Roboto on Android. Nothing to
     download. Only the signature has a face of its own. */
  --font-display: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-signature: "Caveat", "Segoe Script", "Bradley Hand", cursive;

  /* Shape */
  --radius: 12px;
  --radius-small: 8px;
  --shadow: 0 1px 2px rgb(58 52 52 / 0.06), 0 8px 24px rgb(58 52 52 / 0.08);
  --tap: 44px;             /* minimum touch target on the client's page */
}