/* Design tokens: the one place to change the accent colour, drink colours and fonts.
   Every page loads this before styles.css, and so does the password page.
   Swapping fonts: change the @import URL and --sans / --mono / --display together. */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600&family=Geist+Mono:wght@400&family=Geist:wght@400;600&display=swap");

:root {
  /* Accent: Thai tea orange. One colour, used sparingly: link underlines, buttons, focus rings, hover states.
     Accent text uses #A04A00: 5.7:1 on #fdf8f1, 5.2:1 on --card. */
  --brand: #F2913A;             /* fills only: buttons, underlines, the logo straw */
  --on-brand: #1d1206;          /* text on a --brand fill (7.8:1) */
  --brand-text-light: #A04A00;  /* the accent as text (keep 4.5:1 or better on paper and card) */

  /* Drink colours: the drinks in the cup illustrations only, never UI accents or text. */
  --thai: #E8892B;              /* Thai tea */
  --sugar: #7A3E14;             /* brown sugar syrup */
  --pearl: #3B2516;             /* tapioca pearls */
  --cream: #F6EADB;             /* milk, coconut cream, foam */
  --ube: #8B5CC7;
  --mango: #F5B83D;
  --pink: #F06A93;
  --matcha: #6FA84B;
  --berry: #E0475E;
  --pea: #3E6FD8;               /* butterfly-pea flower, before the citrus */
  --pea-turned: #9B5DE5;        /* butterfly-pea flower, after the citrus */

  /* Bands: full-width colour blocks that give each page its fun. Each pairs a fill with a text colour (checked contrast). */
  --band-tea: #F2913A;      --on-tea: #1d1206;      /* 7.8:1 */
  --band-ube: #6A3FB8;      --on-ube: #ffffff;      /* 7.0:1 */
  --band-mango: #FFC94A;    --on-mango: #1d1206;    /* 12.0:1 */
  --band-pink: #F06A93;     --on-pink: #1d1206;     /* 6.3:1 */
  --band-pea: #2F5FCC;      --on-pea: #ffffff;      /* 5.8:1 */

  /* Type */
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;  /* headings and the wordmark only */

  /* One light theme: cream paper, dark brown ink */
  color-scheme: light;
  --paper: #fdf8f1;
  --ink: #1d1712;
  --muted: #6e6257;
  --line: #ebe1d3;
  --card: #f5ede1;
  --accent: var(--brand-text-light);
  --link: var(--brand-text-light);
  --error: #c62a2f;
}