/* The single source of colour, type, spacing and radius. No other stylesheet
   or view carries a hex literal. */
:root {
  --bj-charcoal: #050702;
  --bj-cream: #F6F1E6;
  --bj-desk: #e9e7e0;
  --bj-band: #efe8d9;
  --bj-card: #FDF0C9;
  --bj-table-head: #f7f3e8;
  --bj-chip: #f3eee0;
  --bj-border: #e2dbc9;
  --bj-rule: #f3eee0;

  --bj-orange: #F66506;
  --bj-orange-hover: #d65704;
  --bj-orange-active: #b84a03;
  --bj-gold: #FBBF0E;
  --bj-green: #1BA30A;
  --bj-green-bright: #71E510;
  --bj-coffee: #8A2F14;
  --bj-gold-muted: #C79A0B;

  --bj-body: #41413a;
  --bj-muted: #6a6a60;
  --bj-muted-2: #8a8a80;
  --bj-on-charcoal: #F6F1E6;
  --bj-on-charcoal-muted: #cfcabb;

  --bj-status-new: var(--bj-orange);
  --bj-status-confirmed: var(--bj-gold);
  --bj-status-preparing: var(--bj-green);
  --bj-status-done: var(--bj-muted);

  --bj-radius-pill: 999px;
  --bj-radius-card: 20px;
  --bj-radius-modal: 24px;
  --bj-radius-tile: 15px;
  --bj-radius-signature: 18px 18px 64px 18px;

  --bj-shadow-rest: 0 8px 22px rgba(5, 7, 2, .07);
  --bj-shadow-raised: 0 16px 34px rgba(5, 7, 2, .14);
  --bj-shadow-modal: 0 24px 60px rgba(5, 7, 2, .34);
  --bj-shadow-cta: 0 10px 24px rgba(246, 101, 6, .3);

  --bj-font-display: "Fredoka", system-ui, -apple-system, sans-serif;
  --bj-font-body: "Montserrat", system-ui, -apple-system, sans-serif;
  --bj-font-script: "Caveat", cursive;

  --bj-space-1: 6px;
  --bj-space-2: 8px;
  --bj-space-3: 10px;
  --bj-space-4: 12px;
  --bj-space-5: 14px;
  --bj-space-6: 18px;
  --bj-space-7: 22px;
  --bj-space-8: 26px;

  --bj-section-y: clamp(24px, 4vw, 56px);
  --bj-section-x: clamp(20px, 3vw, 44px);

  --bj-transition: .15s ease;
}