/**
 * Ravello. Every colour, type, space and shape decision in this template, and nowhere else.
 * Custom properties only: no selectors, no rules.
 *
 * Cream paper, black ink and one deep green, for a wedding somewhere hot with a view. The
 * page is photograph-led and unhurried: a screen of picture to open with, then long quiet
 * runs of paper between the pictures, and one section near the end where the paper turns
 * green and the page goes dark for a moment.
 *
 * The green is the only saturated thing here. It carries the bar, the buttons, the gifts
 * panel and nothing else, which is what keeps a page of photographs from turning into a
 * page of decoration. The gilt is decoration only and never carries text: it measures 4.12
 * on the panel, and a colour that fails on one of the two papers cannot be a text colour on
 * either.
 *
 * Gambetta sets the names, every heading, and the invitation in italic. Geist sets
 * everything a guest has to read quickly: labels, times, the reply form. Both are variable
 * and both are already in the repository, which is why this template costs two files and
 * not six.
 */

: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: #F7F4ED;        /* cream paper, the page */
  --surface-alt: #EFEADF;    /* the panels and cards set into it */
  --surface-card: #FFFFFF;   /* the face of a print */
  --surface-deep: #2A3328;   /* the green, for the bar, the buttons and the gifts panel */

  --ink: #1B1A17;            /* 15.84 on paper, 14.51 on the panel */
  --ink-soft: #4C4941;       /* 8.18 and 7.49 */
  --ink-faint: #6C675C;      /* 5.12 on paper, 4.69 on the panel. The floor, and it moves down only */
  --ink-invert: #F2EFE6;     /* 11.40 on the green */
  --ink-invert-soft: #C9C6B8; /* 7.65 on the green */

  --accent: #2A3328;
  --accent-ink: #F2EFE6;     /* 11.40 */
  --accent-hover: #3A4737;

  --line: #DFD8C9;           /* hairlines on paper. Decorative, never carrying text */
  --line-deep: #4A5546;      /* a hairline on the green */
  --gilt: #8A6B3D;           /* ornament only: 4.50 on paper and 4.12 on the panel, so never text */

  /* The one thing on the page that is wrong, on the reply form and nowhere else. A terracotta,
     which is the one red this cream and green will take.
     6.89 on the card, 7.57 on the fields. */
  --bad: #9B2C1F;

  /* Over a photograph, under cream type. The cover measured 5.20 at the lighter of these
     two, sampled from the photograph rather than computed from a background colour. */
  --scrim: rgb(20 24 15 / .30);
  --scrim-deep: rgb(20 24 15 / .62);
  --glass: rgb(247 244 237 / .93);   /* the badge on the cover, which carries ink rather than cream */

  /* Type */
  --font-display: 'Gambetta', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Geist', system-ui, -apple-system, sans-serif;
  --weight-display: 400;
  --weight-display-soft: 300;
  --weight-body: 400;
  --weight-soft: 450;
  --weight-strong: 600;

  --t-display: clamp(2.7rem, 8.4vw, 6.4rem);   /* the two names, over the photograph */
  --t-h2: clamp(1.9rem, 4vw, 3.1rem);          /* every section heading, in the serif */
  --t-h3: clamp(1.2rem, 2vw, 1.5rem);
  --t-hour: clamp(2rem, 5vw, 3.2rem);          /* the times down the side of the day */
  --t-ghost: clamp(5.5rem, 21vw, 16rem);       /* the word behind the gifts panel */
  --t-lede: clamp(1.02rem, 1.4vw, 1.18rem);
  --t-quote: clamp(1.3rem, 2.6vw, 1.9rem);     /* the invitation, and the line that closes the page */
  --t-body: 1rem;
  --t-small: 0.93rem;
  --t-meta: 0.8rem;
  --track-display: -0.015em;
  --track-meta: 0.14em;        /* the labels, which are letterspaced but never capitalised */
  --track-hour: -0.02em;
  --leading: 1.7;
  --leading-display: 1.04;

  /* Space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 36px; --space-7: 56px; --space-8: 88px;
  --section-y: clamp(76px, 9vw, 140px);
  --gutter: clamp(20px, 4.5vw, 52px);
  --nav-h: 58px;
  --nav-top: clamp(12px, 1.6vw, 22px);

  /* Shape. Pills for anything a guest presses, and almost nothing else is rounded: a
     photograph on this page is a photograph, not a card with a picture in it. */
  --r-button: 999px;
  --r-card: 4px;
  --r-image: 3px;
  --r-input: 3px;
  --rule: 1px;
  --tilt: 2.4deg;             /* how far a print in the gallery sits off square */
  --shadow-print: 0 1px 2px rgb(27 26 23 / .05), 0 18px 40px rgb(27 26 23 / .10);
  --shadow-card: 0 1px 2px rgb(27 26 23 / .04), 0 24px 60px rgb(27 26 23 / .12);
  --shadow-bar: 0 2px 10px rgb(27 26 23 / .16);

  /* Motion */
  --ease-settle: cubic-bezier(.22, 1, .36, 1);
  --ease-glide: cubic-bezier(.33, 1, .68, 1);
  --dur-reveal: .95s;
  --dur-slow: 1.4s;
  --stagger: 90ms;

  /* Measure */
  --measure: 60ch;
  --content-width: 1180px;
  --image-ratio: 3 / 2;
}