/**
 * Aurelia. Every colour, type, space and shape decision in this template, and nowhere else.
 * Custom properties only: no selectors, no rules.
 *
 * Butter paper, a deep cardinal red, and one hot pink. Ornamental where Hartfield is plain
 * and Como is quiet: ruled borders with filigree in the corners, cut and scalloped card
 * edges, hibiscus drawn in line. Old school in the sense a printed invitation is, with the
 * red doing the work a second colour does on a letterpress job.
 *
 * The red is both a surface and the ink. That is the whole idea of the palette, and it is
 * why there is no separate near-black: a heading on the paper and a panel behind cream type
 * are the same value, read from either side.
 */

:root {
  /* Colour, by role. Every pair below was measured before a line of CSS was written. */
  --surface: #FCF5D7;        /* butter paper, the page */
  --surface-alt: #FFFFFF;    /* the white cards cut into it */
  --surface-card: var(--surface-alt);  /* what this template calls it */
  --surface-deep: #7E1420;   /* cardinal, the red panels */

  --ink: #6B0E16;            /* 11.29 on paper, 12.36 on white */
  --ink-soft: #7E1420;       /* 9.55 and 10.46. The same red the panels are */
  --ink-faint: #8C3A42;      /* 6.85 and 7.50 */
  --ink-invert: #FCF5D7;     /* 9.55 on cardinal */
  --ink-invert-soft: #F3E7C2;/* 8.48 */

  /* The pink is a fill and a rule, never a text colour. On the paper it reads 2.04:1, so
     anything set in it would fail before it was drawn. It carries the red at 4.67, which is
     what makes the pill legible, and that is the only way round it works. */
  --accent: #EC8FCE;
  --accent-ink: #4E090F;     /* 6.85 on the pink, 14.00 on the paper */
  /* And a hairline round every pink control. The fill reads 2.04 against the paper, which
     is under the 3:1 a control's own boundary needs, so on a cream page the pill would have
     no measurable edge. The rule gives it one at 11.29, and it reads as letterpress rather
     than as a fix. */
  --accent-edge: #6B0E16;
  --line: #E8B7D8;           /* the ruled borders and hairlines, decorative */
  --line-deep: #A3555F;      /* a rule on the cardinal panels */

  /* The one thing on the page that is wrong, on the reply form and nowhere else. A hotter
     cardinal than the ink, so a message reads as a correction rather than as more body copy.
     5.31 on the card and its fields, 5.81 on white. */
  --bad: #C42134;

  /* Type. Cormorant Infant for everything set large, in small capitals more often than not,
     which is where the printed-invitation feel actually comes from. It is the cut of
     Cormorant with the single-storey a and the rounder terminals, warmer than the Garamond
     cut and closer to an engraved hand. DM Sans underneath it, quiet and near-neutral, so
     the ornament never has to compete with the paragraph.

     Three real weights rather than one instance, so headings can be set light and large:
     at these sizes 300 is what keeps the hairlines hairlines. */
  --font-display: 'Cormorant Infant', Garamond, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --weight-display: 400;
  --weight-display-light: 300;
  --weight-display-strong: 600;
  --weight-body: 400;
  --weight-soft: 500;
  --weight-strong: 600;

  --t-display: clamp(3rem, 11vw, 9rem);   /* the names, which run the width of the page */
  --t-h2: clamp(2.4rem, 5.6vw, 4.4rem);
  --t-h3: clamp(1.5rem, 2.6vw, 2.1rem);
  --t-lede: clamp(1rem, 1.15vw, 1.08rem);
  --t-body: 0.98rem;
  --t-small: 0.92rem;
  --t-meta: 0.82rem;
  --track-display: 0.01em;
  --track-caps: 0.04em;       /* the small capitals, which need air rather than tightening */
  --track-meta: 0.06em;
  --leading: 1.62;

  /* Space */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --section-y: clamp(80px, 9vw, 140px);
  --gutter: clamp(20px, 4vw, 56px);
  /* Declared once and used by both the bar and the cover's height arithmetic, so the two
     cannot drift and leave the first screen a few pixels tall or a few pixels short. */
  --nav-h: 84px;

  /* Shape. Nothing here is a plain rounded rectangle. Cards are cut at the corners or
     scalloped along an edge, which is a printed ticket rather than an interface, and it is
     the single strongest thing the reference does. */
  --r-button: 999px;
  --r-cut: 22px;              /* the concave bite taken out of a card corner */
  --border-inner: 3px;        /* the weight of the invitation border */
  --r-input: 6px;
  --scallop: 14px;            /* how deep one bump bites into a scalloped edge */
  --rule: 1px;

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

  /* Measure */
  --measure: 46ch;
  --content-width: 1240px;
}