/* Design tokens. Alchemy Drinks brand: hot pink banner, dark ink buttons, gold accent, Cascadia type.
   The pink, gold and logo can be changed per organisation (organisations.brand); see shell.js applyBrand. */
@font-face { font-family: "Cascadia Code"; font-weight: 400; font-style: normal; font-display: swap; src: url("cascadia-code-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Cascadia Code"; font-weight: 700; font-style: normal; font-display: swap; src: url("cascadia-code-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;

  --brand: #FF0066;
  --brand-ink: #FFFFFF;
  --brand-text: color-mix(in srgb, var(--brand) 82%, black);   /* brand colour for text on white, darkened to stay readable */
  --accent: #A8895B;

  /* The banner colour follows the side being looked at (shell.js setSection): pink by default, gold for brand owners, teal for customers.
     Both section colours were chosen so white text on them is easy to read (contrast above 4.5 to 1). */
  --section: var(--brand);
  --section-ink: var(--brand-ink);
  --tone-brand: #8C6D3F;
  --tone-customer: #0F6B73;

  --ink: #2E2E2E;
  --ink-body: #363535;
  --ink-2: #4A4A4A;
  --ink-3: #6A6A6A;
  --paper: #F6F6F6;
  --surface: #FFFFFF;
  --line: #E3E3E3;
  --line-strong: #BDBDBD;

  --overdue: #B3261E;  --overdue-bg: #FCEAE8;
  --soon: #8A5300;     --soon-bg: #FFF1D6;
  --ok: #1D6B45;       --ok-bg: #E3F3EA;
  --quiet: #536073;    --quiet-bg: #EDEDED;
  --info: #1F4F9C;     --info-bg: #E6EEFA;


  --font-ui: "Cascadia Code", "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  --radius: 4px;
  --radius-lg: 6px;
  --side-w: 256px;
}

body[data-section="brand"] { --section: var(--tone-brand); --section-ink: #FFFFFF; }
body[data-section="customer"] { --section: var(--tone-customer); --section-ink: #FFFFFF; }