/* Design tokens for the RSVP site. Values are taken from the approved design. */
:root {
  /* Colour */
  --green-900: #163a28;                    /* invitation ground (dark areas) */
  --green-700: #1f4d33;                    /* borders, selected buttons, links on cream, checkbox */
  --red-600: #a8322d;                      /* section labels, send button, errors, plus-one rule */
  --gold-400: #e3c56d;                     /* accents on green only: eyebrow, rule, italic time, countdown labels */
  --cream-100: #f6f0e4;                    /* page ground; text on green */
  --white: #ffffff;                        /* RSVP panel, unselected buttons, inputs on phone */
  --ink-900: #1b1a17;                      /* body text on cream */
  --ink-500: #5c574d;                      /* secondary text on cream */
  --track: #e8e1d3;                        /* empty progress segments */
  --placeholder: #8a847a;                  /* input placeholder */
  --hairline-on-green: rgba(246, 240, 228, 0.35);
  --cream-on-green-muted: rgba(246, 240, 228, 0.75);

  /* Type */
  --font-serif: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-body: 18px;                       /* desktop body; phone uses 17px */
  --leading-body: 1.6;
  --text-label: 13px;                      /* mono, uppercase, letter-spacing 0.14em; 12px on phone */
  --tracking-label: 0.14em;
  --text-title-desktop: clamp(40px, 4.6vw, 72px);
  --text-title-phone: 42px;
  --leading-title: 0.98;
  --tracking-title: -0.02em;
  --text-date-desktop: 28px;
  --text-date-phone: 24px;
  --text-step-heading-desktop: 34px;
  --text-step-heading-phone: 36px;
  --text-key: 26px;                        /* mono, letter-spacing 0.12em */
  --text-input: 20px;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  --pad-half-desktop: 40px 48px;           /* padding of each desktop half */
  --pad-page-phone: 20px;
  --panel-max: 520px;                      /* RSVP panel max width on desktop */

  /* Shape */
  --radius: 0;                             /* every corner is square */
  --border-strong: 2px solid var(--green-700);
  --border-hair: 1px solid var(--green-700);

  /* Controls */
  --control-min: 44px;
  --button-primary-h: 56px;
  --answer-row-h-desktop: 64px;
  --answer-row-h-phone: 76px;
}