/*
 * Design tokens: fonts, colors, sizes and motion shared by every page.
 * Contrast ratios (WCAG 2.x) are checked by tests/test_design.py.
 */

/* Self-hosted fonts (SIL OFL 1.1, licenses next to the files).
   Latin subset only, which covers German umlauts and ß. */
@font-face {
  font-family: "Playball";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/playball-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/work-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/work-sans-latin-500-normal.woff2") format("woff2");
}

:root {
  /* Palette taken from the save the date. */
  --color-mint: #b8d8c8;            /* header band */
  --color-mint-light: #d4e8dd;      /* highlights on the band */
  --color-mint-deep: #8fbba5;       /* shading on the band, scallop shadow */
  --color-peach: #f3d6c4;           /* warm accent of the page glow and bunting */
  --color-page: #fbf7f2;            /* warm white page */
  --color-card: #ffffff;            /* white photo-frame panels */
  --color-text: #2f4840;            /* dark gray-green: 9.3:1 on page, 6.5:1 on mint */
  --color-text-muted: #566b63;      /* secondary text: 5.4:1 on page, 4.8:1 on its glows */
  --color-accent: #3b6b68;          /* dusty blue-green: 5.6:1 on page */
  --color-accent-strong: #2a5a57;   /* hover/pressed accent */
  --color-on-accent: #ffffff;       /* button text: 6.0:1 on accent */
  --color-on-mint-display: #ffffff; /* large script display text on mint only */
  --color-frame-line: #a9c7b7;      /* thin inner line of framed panels */
  --color-hairline: #e3ddd4;        /* outer edge of panels on warm white */
  --color-alert: #8a3b2e;           /* error text: 7.0:1 on card */
  --color-alert-surface: #fbeee9;

  /* Typography. */
  --font-script: "Playball", "Brush Script MT", cursive;
  --font-body: "Work Sans", "Avenir Next", "Segoe UI", sans-serif;
  --font-size-base: 1.0625rem;      /* 17px for comfortable reading */
  --font-size-small: 0.9375rem;
  --font-size-lead: 1.1875rem;
  --font-size-names: clamp(2.75rem, 11vw, 5rem);
  --font-size-date: clamp(2rem, 7.5vw, 3.25rem);
  --font-size-page-title: clamp(2.5rem, 9vw, 3.5rem);
  --line-height-body: 1.6;

  /* Spacing and shape. */
  --tap-target: 44px;
  --space-xs: 0.375rem;
  --space-s: 0.75rem;
  --space-m: 1.25rem;
  --space-l: 2rem;
  --space-xl: 3.5rem;
  --gutter: 1rem;                   /* side padding on phones */
  --content-width: 64rem;
  --frame-width: 0.625rem;          /* white border of framed panels */
  --radius-pill: 999px;
  --scallop-size: 1.5rem;
  --shadow-panel: 0 0 0 1px var(--color-hairline), 0 1.25rem 2.5rem -1.75rem rgb(47 72 64 / 45%);

  /* Motion: one gentle rise-in on load, staggered. */
  --reveal-duration: 700ms;
  --reveal-step: 110ms;
  --reveal-distance: 0.75rem;
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
}