/**
 * Damson. Every colour, type, space and shape decision in this template, and nowhere else.
 * Custom properties only: no selectors, no rules.
 *
 * Almost-white paper and one deep plum. Where Velour is wine in a dark room, this is the
 * same fruit on a bright page: the plum is the ink of every heading, the fill of every
 * control and the colour of the hearts down the middle of the day, and nothing else is
 * saturated at all. A hand-drawn line icon opens each section above its label, and a red
 * handwriting appears exactly once per section, which is the only informal thing on it.
 *
 * It is also the longest template in the library. Fourteen sections, because the brief this
 * one is for is the one with a rehearsal dinner, three hotels, a shuttle timetable, a dress
 * code and a gift note: the logistics-heavy wedding the composed system could not express.
 *
 * Bodoni Moda sets everything large, and its high contrast is why the page can be this plain
 * and still look dressed. Figtree carries the reading text, Caveat writes the red line.
 */

:root {
  /* Colour, by role. Every pair below was measured with packages/gate/color.js before a
     line of CSS was written, against 4.5 for text and 3 for a control's own boundary. */
  --surface: #FBF8F7;        /* almost white, faintly warm, the page */
  --surface-alt: #F4EEEC;    /* the panels set into it */
  --surface-card: #FFFFFF;   /* the face of a print, and the card over a photograph */
  --surface-deep: #5B2333;   /* damson, the buttons and the bar */

  --ink: #2A2326;            /* 14.54 on the page, 13.38 on the panel */
  --ink-soft: #5A5257;       /* 7.15 and 6.58 */
  --ink-faint: #6E666B;      /* 5.26 on the page, 5.56 on white, 4.84 on the panel. The floor */
  --ink-invert: #FBF8F7;     /* 11.47 on damson */

  --accent: #5B2333;
  --accent-ink: #FBF8F7;     /* 11.47, and the same figure is the button's edge on the page */
  /* The plum is a text colour as well as a fill, which is what lets every heading be set in
     it: 11.47 on the page and 10.55 on the panel. */
  --accent-ink-on-paper: #5B2333;

  /* The handwriting, and the only other saturated colour. Lighter than the plum on purpose,
     because it is a note in the margin rather than a heading, and still 5.98 on the page. */
  --hand: #B02E45;

  /* The four colours the couple asks guests to wear, which are the only values on the page
     that are not part of the palette. They are decoration and are marked as such: a swatch
     names a colour nobody has to read, and each carries a hairline so it has an edge on a
     white page whatever the couple changes it to. */
  --swatch-1: #4E1E2C;
  --swatch-2: #8C2F4A;
  --swatch-3: #CFE3D4;
  --swatch-4: #D6E4F0;

  --line: #EADFDC;           /* hairlines. Decorative, never carrying text */
  --line-deep: #7E4A58;      /* a hairline on the damson */

  /* The one thing on the page that is wrong, on the reply form and nowhere else. The damson
     carried up towards the hand, so it belongs to the palette rather than to a browser.
     6.86 on the page, 7.25 on the fields. */
  --bad: #A32540;
  --scrim: rgb(26 20 22 / .44);      /* over a photograph, under pale type */
  --scrim-deep: rgb(26 20 22 / .66);
  /* The card that sits over a photograph in the outro, which has to be pale enough for plum
     type to read on it and open enough to see the picture through. */
  --glass: rgb(251 248 247 / .88);

  /* Type */
  --font-display: 'Bodoni Moda', Georgia, serif;   /* every heading, and the names */
  --font-body: 'Figtree', system-ui, sans-serif;   /* everything read in a paragraph */
  --font-hand: 'Caveat', 'Segoe Script', cursive;  /* one red line per section */
  --weight-display: 400;
  --weight-display-strong: 500;
  --weight-body: 400;
  --weight-soft: 500;
  --weight-strong: 600;

  --t-display: clamp(2.8rem, 11vw, 9.5rem);  /* the names across the foot of the cover */
  --t-h2: clamp(1.9rem, 4.4vw, 3.2rem);      /* the serif heading every section opens with */
  --t-h3: clamp(1.35rem, 2.4vw, 1.8rem);
  --t-time: clamp(1.9rem, 3.6vw, 2.6rem);    /* the hours down the day */
  --t-hand: clamp(1.05rem, 1.6vw, 1.25rem);
  --t-lede: clamp(1.02rem, 1.3vw, 1.15rem);
  --t-body: 1rem;
  --t-small: 0.94rem;
  --t-meta: 0.84rem;
  --track-display: -0.005em;
  --track-label: 0.02em;
  --leading: 1.72;
  --leading-display: 1.1;

  /* Space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 80px;
  --section-y: clamp(72px, 8vw, 128px);
  --gutter: clamp(20px, 4vw, 52px);
  --nav-h: 72px;

  /* Shape */
  --r-button: 6px;
  --r-card: 10px;
  --r-image: 4px;
  --r-input: 6px;
  --rule: 1px;
  --tilt: 2.5deg;             /* how far a print sits off square */
  /* A heart, as a mask rather than an element, so the spine of the day can put one at every
     hour without another node in the page for each. It is the same heart the icon set draws,
     filled rather than stroked: a mask reads alpha alone, so the colour comes from whatever
     the element is painted. */
  --heart-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676a.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5' fill='%23000'/%3E%3C/svg%3E");
  --shadow-print: 0 2px 6px rgb(42 35 38 / .07), 0 18px 40px rgb(42 35 38 / .13);
  --shadow-soft: 0 1px 2px rgb(42 35 38 / .04), 0 12px 30px rgb(42 35 38 / .07);

  /* Motion */
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-glide: cubic-bezier(.33, 1, .68, 1);
  --dur-reveal: .9s;
  --dur-slow: 1.4s;
  --stagger: 80ms;
  --photo-zoom: 1.1;

  /* Measure */
  --measure: 56ch;
  --content-width: 1180px;
  --image-ratio: 4 / 5;
}