/* Darkroom 8 house tokens.
   Source of truth: darkroom8-print-price-calculator/tailwind.config.js + index.css.
   Colours, type and motion live here; styles.css only applies them. */
:root {
  --paper: #f4f2ee;
  --card: #fdfcfa;
  --field: #fbf9f6;
  --panel: #f4f1ec;
  --ink: #14110f;
  --red: #de2910;
  --green: #1a8a4a;
  --amber: #b7791f;
  --gray-50: #f4f1ec;
  --gray-100: #ece8e1;
  --gray-200: #e7e3dc;
  --gray-300: #d6d0c6;
  --gray-400: #a8a096;
  --gray-500: #6e675e;
  --gray-600: #574f47;
  --gray-700: #403a33;
  --moulding-black: #1b1816;
  --moulding-white: #f1ede6;

  /* IKEA mats are white (owner, 2026-10-02). White on a white page disappears, so a mat
     is drawn the way you see one in real life: a 45° bevel round the window (top and left
     faces in shadow), the moulding's shadow on the mat, and the frame hung on a wall. */
  --mat: #fefefd;
  --wall: #ece7df;
  --mat-window: inset 0 2px 0 #d3ccc0, inset 2px 0 0 #ddd7cd, inset 0 -2px 0 #f6f4f0, inset -2px 0 0 #e9e5de,
    inset 0 5px 4px -3px rgba(20, 17, 15, 0.35), inset 4px 0 4px -3px rgba(20, 17, 15, 0.2);
  --mat-window-sm: inset 0 1px 0 #d3ccc0, inset 1px 0 0 #ddd7cd, inset 0 -1px 0 #f3f1ec, inset -1px 0 0 #e6e2db,
    inset 0 2px 2px -1px rgba(20, 17, 15, 0.3);
  --frame-inner: inset 0 2px 5px rgba(20, 17, 15, 0.18), inset 0 0 0 1px rgba(20, 17, 15, 0.06);
  --frame-drop: 0 1px 2px rgba(20, 17, 15, 0.14), 0 4px 10px rgba(20, 17, 15, 0.1);

  --font-sans: "Poppins", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* calculator easing: the spring is used for everything that moves into place */
  --spring: cubic-bezier(0.34, 1.1, 0.45, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}