/*
 * Mend & Grow design system: the paper-layer tokens Drinks Check uses.
 * Values are copied exactly from the system's tokens.json; the fonts and the
 * paper grain are the system's own files. Re-sync from the system rather than
 * changing a value here (see README.md beside this file).
 */

@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/playfair-display-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Playfair Display";
  src: url("./fonts/playfair-display-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Quattrocento Sans";
  src: url("./fonts/quattrocento-sans-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Quattrocento Sans";
  src: url("./fonts/quattrocento-sans-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Caveat";
  src: url("./fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Grounds and surfaces */
  --cream: #fff0d1;
  --paper: #fffbf2;
  --desk: #e9d6b4;
  --grain: url("./paper.png");

  /* Action and state */
  --pink: #fec0ce;
  --pink-deep: #fd5e86;
  --amber: #ffc34d;
  --done-text: #2f5530;
  --done-fill: #dfead2;
  --danger: #b42318;

  /* Text */
  --ink: #2a2422;
  --title: #1e1a1a;
  --text: #3b3a3a;
  --muted-text: #6d6862;
  --green: #254c43;

  /* Brown tints for hairlines, washes and control edges */
  --line: rgba(60, 40, 20, 0.12);
  --brown-wash: rgba(60, 40, 20, 0.07);
  --brown-edge: rgba(60, 40, 20, 0.2);

  /* Type */
  --serif: "Playfair Display", Georgia, serif;
  --sans: "Quattrocento Sans", Arial, sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;

  /* Space */
  --gutter: 16px;
  --card-pad: 16px;
  --card-gap: 14px;
  --row-gap: 10px;
  --column: 440px;

  /* Shape */
  --radius: 10px;
  --radius-paper: 12px;
  --radius-choice: 14px;
  --radius-pill: 999px;
  --shadow-paper: 0 1px 1px rgba(60, 40, 20, 0.05), 0 6px 18px -8px rgba(60, 40, 20, 0.22);
  --shadow-lift: 0 2px 2px rgba(60, 40, 20, 0.06), 0 14px 30px -10px rgba(60, 40, 20, 0.32);
  --shadow-md: 0px 8px 16px -4px rgba(0, 0, 0, 0.05);

  /* Motion: one easing everywhere */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}