/* Cana's typefaces and colours, in one place.
 *
 * The fonts are served from this repo rather than Google Fonts on purpose: a
 * menu board hanging in a dining room must not depend on the shop's wifi being
 * able to reach a third party. If it can't, the board just renders — no
 * fallback flash, no wrong typeface.
 */

/* Each file is a single static weight, so each face must declare exactly that
 * weight. Declaring 400 700 here claimed this one file covered the whole
 * range, and a range match beats the exact 600 and 700 faces below — every
 * bold heading on every surface was silently being set in the regular. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/playfair-display-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('fonts/playfair-display-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('fonts/playfair-display-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/playfair-display-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: block;
  src: url('fonts/playfair-display-latin-800-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Parisienne';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/parisienne-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url('fonts/cormorant-garamond-latin-300-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: block;
  src: url('fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url('fonts/cormorant-garamond-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url('fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');
}

:root {
  /* Matched to the dimensional sign being fabricated — the piece everything
   * else has to sit beside. Measured off the photograph rather than judged:
   * the letters come back rgb(72,72,72) at saturation 0.00, a true neutral
   * charcoal with no green in it, and the accent at hue 29, saturation 0.86,
   * a vivid orange rather than the coffee bag's muted copper. The pink cast on
   * the sign face is the warehouse lighting, not the sign.
   *
   * The orange is pulled back from the raw sample so prices stay legible on a
   * light ground; the ornament tone stays closer to the sign itself.
   */
  --paper:      #efe6d5;   /* the bag's label stock — aged, faintly pink cream */
  --panel:      #f7f1e3;
  --panel-edge: #ddd1b8;

  --ink:        #2f2f28;
  --ink-soft:   #6b6757;

  --green:      #33402c;   /* the bag's dark panel: deep olive, not charcoal */
  --green-mid:  #4a583f;
  --olive:      #6f7550;   /* the branch down the side of the label */

  /* Sampled from the previous site's closing panel (#404825): a deep,
   * yellow-leaning olive. The sign supplies everything else on the page, so
   * this green appears exactly once — on that one panel — the way it did
   * before. */
  --closing:      #404825;
  --closing-arch: #47502a;
  --closing-line: #5c653c;

  --brass:      #a9784a;   /* rules, ornaments, eyebrows — the bag's copper */
  /* The same copper lifted for dark grounds. The label copper is mixed for
   * cream stock and falls to about 2.3:1 on the bag's green panel, which is
   * unreadable at eyebrow sizes; this clears 4.5:1 there. */
  --brass-on-dark: #d7ab7a;
  --brass-lit:  #96683c;   /* prices — deeper, to hold contrast on cream */
  --rule:       #ddd2bc;

  --mark-ink:    var(--green);
  --mark-accent: var(--brass);

  --serif-display: 'Playfair Display', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --serif-text: 'Cormorant Garamond', 'Hoefler Text', Georgia, 'Times New Roman', serif;
  --script: 'Parisienne', 'Snell Roundhand', 'Apple Chancery', cursive;
}

/* The sign's own scheme — white face, charcoal letters, orange mark.
 * ?theme=sign. The bag is the default because it is what a customer holds;
 * the sign is what they see from the sidewalk. */
:root[data-theme="sign"] {
  --paper: #fbf8f2; --panel: #ffffff; --panel-edge: #e7e0d4;
  --ink: #2b2b2a; --ink-soft: #6e6c67;
  --green: #26262a; --green-mid: #43433f; --olive: #4a4a46;
  --brass: #d9802f; --brass-lit: #bc661d; --rule: #e6ded1;
}

/* The previous website's greens and golds. ?theme=olive */
:root[data-theme="olive"] {
  --paper: #f6f1e4; --panel: #fbf8ef; --panel-edge: #e2d8c0;
  --ink: #24291f; --ink-soft: #6a6c5e;
  --green: #1d3223; --green-mid: #3c4d32; --olive: #6b7a4f;
  --brass: #9a7431; --brass-lit: #8a6a2c; --rule: #ded3ba;
}