/* Influencer Proof design tokens. Colours are the demo café's (made up); a real café's come from its sign, cups and menu.
   Fonts: Archivo (variable width) for money and headings, condensed so big numbers fit a phone like a price board;
   Atkinson Hyperlegible Next for body (built for fast, clear reading); Atkinson Hyperlegible Mono only for codes (0/O, 1/I stay distinct).
   Light mode only: showcase demos are light (house rule). */
:root {
  /* brand */
  --green-900: #143A2B;
  --green-700: #1F5640;   /* main colour: buttons, links, focus */
  --green-600: #286B50;
  --green-100: #E3EEE8;
  --green-50:  #F2F7F4;
  --marigold:  #E9A23B;   /* sales brought in, the customer ticket */
  --marigold-100: #FBEBD2;
  --ink:       #17191A;
  --ink-2:     #4A5052;   /* secondary text, 8.3:1 on white */
  --ink-3:     #6B7275;   /* tertiary, 4.8:1 on white */
  --paper:     #FFFFFF;
  --paper-2:   #F6F6F4;   /* wells, inputs, the app background */
  --rule:      #E2E3E0;
  --rule-2:    #CDD0CC;
  --cost:      #B9BDB8;   /* food given away (bar) */
  --error:     #A3361F;
  --error-50:  #FBEEEA;

  /* semantic */
  --bg: var(--paper-2);
  --surface: var(--paper);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--green-700);
  --accent-hover: var(--green-900);
  --focus: var(--green-600);

  /* type */
  --font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-code: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace;
  --wdth-display: 82;     /* semi-condensed */
  --fs-xs: 0.875rem;  /* 14 */
  --fs-sm: 0.9375rem; /* 15 */
  --fs-base: 1.0625rem; /* 17 */
  --fs-md: 1.25rem;   /* 20 */
  --fs-lg: 1.5rem;    /* 24 */
  --fs-xl: 2rem;      /* 32 */
  --fs-2xl: 2.625rem; /* 42 */
  --fs-3xl: 3.5rem;   /* 56 */
  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-body: 1.5;

  /* space (4px base) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gutter: 16px;
  --max: 720px;

  /* radii: small scale, hierarchy by size */
  --r-1: 4px;   /* inputs, chips */
  --r-2: 8px;   /* buttons, panels */
  --r-3: 14px;  /* the customer ticket only */
  --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(20, 30, 25, 0.08);
  --tap: 48px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
}
@media (min-width: 900px) { :root { --gutter: 32px; } }