/* Merriwood design tokens. The one source for colour, type, corners and depth.
   The site, the demo app and the phone app all use these values (brand/tokens.json has the same set). */
:root {
  /* Brand colour */
  --mw-cobalt: #1440d6;
  --mw-cobalt-deep: #0f33ad;   /* hover and pressed */
  --mw-cobalt-tint: #e6ecff;   /* the lighter shade: highlights, selected rows, soft blocks */
  --mw-yellow: #ffd400;
  --mw-yellow-deep: #f2c500;
  --mw-yellow-tint: #fff4c2;   /* the lighter shade: offers, notes, gentle attention */
  --mw-ink: #0a0a0a;
  --mw-ink-2: #44464f;         /* body text */
  --mw-ink-3: #7d808a;         /* quiet text */
  --mw-paper: #f7f6f3;         /* page background */
  --mw-stone: #ecebe6;         /* neutral blocks */
  --mw-white: #ffffff;
  --mw-line: #dddcd6;
  --mw-on-dark: #c6c8d2;       /* body text on ink */
  --mw-on-cobalt: #dfe5ff;     /* body text on cobalt */

  /* Status, for the app only, as small dots and labels. Never decoration. */
  --mw-ok: #128a52;
  --mw-alert: #c2362b;

  /* Type */
  --mw-display: "Inter Tight", "DM Sans", system-ui, sans-serif;
  --mw-sans: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mw-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;   /* product data only: rota text, codes */
  --mw-t-d1: clamp(44px, 7vw, 88px);
  --mw-t-d2: clamp(32px, 4.4vw, 52px);
  --mw-t-h3: clamp(22px, 2.2vw, 28px);
  --mw-t-lead: clamp(17px, 1.6vw, 20px);
  --mw-t-body: 16.5px;
  --mw-t-small: 14.5px;

  /* Corners */
  --mw-r-btn: 8px;
  --mw-r-chip: 6px;
  --mw-r-card: 16px;
  --mw-r-panel: 12px;

  /* Depth */
  --mw-edge: 0 0 0 1px rgba(10, 12, 30, 0.07);
  --mw-lift: 0 0 0 1px rgba(10, 12, 30, 0.06), 0 24px 50px -30px rgba(10, 12, 40, 0.32);
  --mw-float: 0 0 0 1px rgba(10, 12, 30, 0.06), 0 18px 36px -20px rgba(10, 12, 40, 0.3);

  --mw-ease: cubic-bezier(0.22, 1, 0.36, 1);
}