/* hurge design tokens - the only file where colour, type and measurement are defined.
   Per client you change --brand (and --brand-ink if the brand is light). Nothing else. */

:root {
  /* colour. The page is cream, the brand does the headings and the state,
     and red appears only where something is added or submitted. */
  --cream:     #f8f7e9;   /* the page */
  --paper:     #fffef7;   /* navigation bar, pill interiors */
  --brand:     #be123d;   /* Peking City */
  --brand-ink: #ffffff;   /* text on brand; use #16160f for light brands */
  --action:    #cd102e;   /* add and submit, nothing else */
  --ink:       #16160f;   /* titles, dish names, values */
  --prose:     #2c2c22;   /* running body text, a touch softer than ink */
  --muted:     #6e6d59;   /* descriptions, secondary values - 4.87:1 on cream */
  --hair:      rgba(22, 22, 15, .15);
  --dots:      rgba(22, 22, 15, .26);

  /* type. A serif display face over a geometric sans. Load only these weights. */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* space */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px;   /* a complete scale; not every step is in use */
  --gutter: 20px;
  --first-gap: 20px;      /* page tag to the first big heading, shared by all three pages */
  /* A 36ch measure is the right reading width on a wide screen and the wrong one on a
     phone: at 390px it leaves roughly 78px of empty gutter and reads as a bug. Full
     width on mobile, a real measure once the column has room to get too wide. */
  --measure: 100%;
  --measure-lead: 100%;

  /* shape. Pills for choices, a soft rectangle for wrapping rail items,
     and a 1.5px border on the brand block. No shadows anywhere on this site. */
  --r-pill: 999px;
  --r-soft: 14px;
  --border: 1.5px;

  /* layout */
  --hero-h: 340px;        /* mobile full-bleed photo height. Desktop instead puts the
                             photo in the column at 3:2 - see base.css @media. */
  --nav-h: 58px;
  --cartbar-h: 66px;      /* reserved under the page while the cart bar is showing */
  /* Dutch category names are long. "Hoofdgerechten" measures 84.3px at 11px Montserrat
     600, so a 104px rail (84px of text) missed it by a third of a pixel and broke the
     word. 112px leaves ~8px of headroom, which also covers "Kindergerechten". */
  --rail-w: 112px;
  --max-w: 720px;         /* reading column on desktop */

  /* sticky stack: the mode toggle on an ordering site pins to the top, so the rail
     and the section headings offset against it instead of hiding underneath */
  --header-h: 0px;
  --modebar-h: 0px;
  --scroll-offset: calc(var(--header-h) + var(--modebar-h) + var(--s3));
}

body[data-ordering="on"] { --modebar-h: 62px; }

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 64px;
    --rail-h: 54px;
    --max-w: 760px;
    --measure: 62ch;
    --measure-lead: 30ch;
    --scroll-offset: calc(var(--header-h) + var(--modebar-h) + var(--rail-h) + var(--s3));
  }
}