/* Shared tokens: font, background gradient, card shape. */

/* Optimistic, the Meta brand face. Two weights: Regular for body text and the
   maker credit, SemiBold for card names. WOFF2 is a third the size of the TTF;
   the Medium TTF stays as a last resort for anything that cannot read WOFF2. */
@font-face {
  font-family: "Optimistic";
  src: url("../fonts/Optimistic_Regular.woff2") format("woff2"),
       url("../fonts/Optimistic_Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Optimistic";
  src: url("../fonts/Optimistic_SemiBold.woff2") format("woff2"),
       url("../fonts/Optimistic_Medium.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --font: "Optimistic", -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Background gradient (from the supplied reference). */
  --bg-start: #f5f8fc;
  --bg-mid: #e6edf6;
  --bg-end: #cbd7ea;

  --text: #1c1e21;
  --text-muted: #65676b;
  --accent: #1877f2;

  /* Card shape: width / height of the image area. */
  --card-ratio: 7 / 9;
  --card-radius: 24px; /* default; the Corner radius slider in the editor overrides this */
  --card-placeholder: #000;

  /* QR codes and their button (colour taken from the supplied swatch). */
  --qr-blue: #5043ff;
  --qr-icon-size: 40px; /* the QR icon size slider in the editor overrides this */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg-start);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

/* Fixed gradient layer so it never scrolls or stretches with content. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-mid) 48%, var(--bg-end) 100%);
}