/* UI palette, typefaces and type scale (docs/design-guidelines.md). */
:root {
  /* Theme: every colour of the card lives here (docs/design-guidelines.md); change these and the envelope,
     the film, the invitation and every page follow. "Hoa vẽ tay", the couple's chosen style: cream stock,
     a reddish brown for what is read, olive for the couple's hand (names, titles, the guest), marigold gold
     for what is filled (the main button, tiles), olive-gold rules, wine-red wax; an olive envelope on a
     misty blue-grey. The *-rgb triples feed rgba() for tints and shadows. */
  --paper: #fbf3d4;
  --paper-rgb: 251, 243, 212;
  --ink: #5a2418;
  --ink-soft: #7d5040;
  --brand: #76690e;
  --brand-rgb: 118, 105, 14;
  --brand-soft: #6b3424;
  --brand-soft-rgb: 107, 52, 36;
  --accent: #e2b53e;
  --accent-rgb: 226, 181, 62;
  --accent-deep: #c79a26;
  --accent-soft: #f6e7b4;
  --accent-soft-rgb: 246, 231, 180;
  --on-accent: #5a2418;
  --on-brand: #fbf3d4;
  --rule: #b8a64c;
  --rule-rgb: 184, 166, 76;
  --amp: #8a7c12;
  --hairline: rgba(118, 105, 14, 0.2);
  /* The flowers of the card's artwork (ui/art/painted-flowers.js). */
  --flower-coral: #f0895c;
  --flower-salmon: #f5a77f;
  --flower-pink: #e6729c;
  --flower-red: #d2453a;
  --flower-amaranth: #b8285e;
  --flower-wine: #7f1d2b;
  --flower-ink: #8c2a33;
  --flower-gold: #d9ab2e;
  --flower-lemon: #f2d23c;
  --flower-leaf: #8f9a3c;
  /* Wax seals (the envelope's, the pins' discs, the 3D plates): wine-red wax, the mark in peach. */
  --seal: #8c1d2b;
  --seal-light: #b8455a;
  --seal-mark: #f7d9b0;
  /* The envelope: the stage it lies on (dawn mist to warm sand; the top is also index.html theme-color), its
     olive paper. */
  --backdrop-top: #c9d3d6;
  --backdrop-mid: #d8d8cc;
  --backdrop-bottom: #e7d9b9;
  --flap: #86923c;
  --flap-deep: #74802f;
  --envelope: #7a8634;
  --on-envelope: #fff6d8;
  --shadow-rgb: 52, 36, 20;
  --scrim: rgba(30, 22, 14, 0.45);
  --glass: rgba(var(--paper-rgb), 0.88);
  --shadow: 0 10px 30px rgba(var(--shadow-rgb), 0.18);
  --radius: 14px;
  --radius-small: 9px;
  /* Two voices, as on the couple's chosen card: Dancing Script is the couple's hand (their names, the guest,
     weekdays, the thanks), EB Garamond sets every other word, read or tapped (spaced capitals for short labels). */
  --font-script: 'Dancing Script', 'EB Garamond', Georgia, serif;
  --font-serif: 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-ui: 'EB Garamond', Georgia, 'Times New Roman', serif;
  /* One scale (rem); EB Garamond's x-height is small, so notes and body sit a little larger than a sans would. */
  --fs-caps: 0.75rem;
  --fs-note: 0.9375rem;
  --fs-body: 1.0625rem;
  --fs-lead: 1.25rem;
  --fs-title: 1.75rem;
  --fs-date: 2.25rem;
  --fs-names: clamp(2.75rem, 12.5vw, 3.25rem);
  --caps-track: 0.16em;
  --text-base: 17px;
  --tap: 44px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  /* Two linked wedding rings, the couple's mark (the plate on the station's flower arch): a mask. */
  --icon-rings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9'%3E%3Ccircle cx='9' cy='14.2' r='5.6'/%3E%3Ccircle cx='15' cy='14.2' r='5.6'/%3E%3Cpath d='M9 4.1l1.7 2-1.7 2.1-1.7-2.1z' fill='black' stroke='none'/%3E%3C/svg%3E");
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.3 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}