/* Qualia v2 design tokens. Every v2 screen (create, deck view, cart and checkout, order
   status, gallery) styles itself from these variables only, so the look changes in one place.
   Mobile first: sizes assume a 390 px wide phone; at 1024 px and up (desktop) the type scale
   and the page frame grow, and each screen lays itself out in columns. */

/* Web fonts, self-hosted (OFL; licences in fonts/): Fraunces (display) and Inter (UI), latin and
   latin-ext subsets, variable weight. Relative URLs resolve under the build-versioned /v2/_b/<build>/
   prefix, so they are served immutable. Each page preloads fonts/fraunces-latin.woff2 (the
   headline face). The "Fallback" faces are local Georgia and Arial resized to the web fonts'
   metrics, so text barely moves when the web font swaps in (layout shift). */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/fraunces-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(fonts/fraunces-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Georgia");
  size-adjust: 117.3%;
  ascent-override: 83.4%;
  descent-override: 21.7%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial");
  size-adjust: 107.5%;
  ascent-override: 90.1%;
  descent-override: 22.4%;
  line-gap-override: 0%;
}

:root {
  /* Color: warm paper, deep ink, one hot accent. Cards stay pure white, like print. */
  --paper: #f5efe4;
  --paper-2: #ece3d2;
  --paper-3: #e2d6c0;
  --ink: #1d1b18;
  --ink-2: #5a544a;
  --ink-3: #736c60;            /* 4.5:1 on --paper and on white (WCAG AA small text); was #8b8375 */
  --line: rgba(29, 27, 24, 0.12);
  --card: #ffffff;
  --accent: #d4451b;           /* white text on it is 4.5:1 (WCAG AA); was #e4572e (3.7:1) */
  --accent-press: #b93b16;
  --accent-ink: #ffffff;
  --gold: #e8b04b;
  --good: #2f8f5b;
  --scrim: rgba(20, 16, 10, 0.55);

  /* Type: a soft display serif for moments, a clean grotesk for everything you tap. */
  --font-display: "Fraunces", "Fraunces Fallback", "Iowan Old Style", Georgia, serif;
  --font-ui: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-s: 0.875rem;
  --text-m: 1rem;
  --text-l: 1.1875rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.25rem;
  --text-3xl: 2.875rem;
  --leading-tight: 1.05;
  --leading: 1.45;

  /* Space: a 4 px grid. */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;

  /* Shape */
  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-pill: 999px;
  --card-ratio: 816 / 1110;    /* MPC poker size with bleed: what we print */
  --card-radius: 6.5%;

  /* Depth */
  --shadow-1: 0 1px 2px rgba(40, 30, 10, 0.08), 0 2px 8px rgba(40, 30, 10, 0.08);
  --shadow-card: 0 1px 2px rgba(40, 30, 10, 0.1), 0 10px 28px rgba(40, 30, 10, 0.22);
  --shadow-lift: 0 2px 4px rgba(40, 30, 10, 0.12), 0 22px 48px rgba(40, 30, 10, 0.3);

  /* Motion: quick to respond, springy to land. */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 140ms;
  --dur-2: 280ms;
  --dur-3: 620ms;
  --dur-fly: 520ms;            /* a card flying into the viewer (MOTION.fly in lib/ui.js) */
  --dur-deal: 520ms;           /* a card dealt from the deck to its place */
  --dur-flourish: 600ms;       /* a drawn deck springing into place */

  /* Z-order: one scale (card-presentation-guide.md, section 6). Feedback sits above what
     caused it: a toast from inside the viewer shows above the viewer's blur. */
  --z-dock: 30;
  --z-scrim: 40;
  --z-sheet: 50;
  --z-viewer: 70;
  --z-sheet-over: 80;
  --z-toast: 1000;

  /* Touch */
  --tap: 48px;                 /* smallest thing a thumb should hit */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Desktop: a larger type scale, and a wider page frame (see .screen in components.css). */
@media (min-width: 1024px) {
  :root {
    --text-m: 1.0625rem;
    --text-l: 1.3125rem;
    --text-xl: 2rem;
    --text-2xl: 3rem;
    --text-3xl: 4.25rem;
    --page: 1180px;
    --gutter: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
  }
}