/* MijnRSVP.nl · tokens. Every colour, font, size and duration in style.css comes from here.
 * Brand: ink and paper as in the service itself (app/src/lib/mail/html.ts), Fraunces as in
 * the logo. The four venue palettes are fictional venues; each passes 4.5:1 for body text
 * against its own background (measured 26 September 2026). */

@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("../fonts/fraunces-560.woff2") format("woff2"); font-weight: 560; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrumentsans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../fonts/instrumentsans-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* brand */
  --color-paper: oklch(95.5% 0.005 95.1);      /* #f1f0ec */
  --color-paper-2: oklch(98.2% 0.004 91.4);    /* #faf9f6, cards on paper */
  --color-ink: oklch(28.8% 0.005 106.7);       /* #2b2b28 */
  --color-muted: oklch(49.2% 0.010 128.7);     /* #5f625c, 5.4:1 on paper */
  --color-rule: oklch(86% 0.006 100);
  --color-on-ink: oklch(98.2% 0.004 91.4);
  --color-focus: oklch(55% 0.16 250);
  --color-field: oklch(99.5% 0.002 91.4);    /* input fields inside a white card */
  --color-device: oklch(22% 0.005 106.7);     /* the edge of the phone in step 02 */
  --color-chat: oklch(93% 0.012 95);          /* chat background */
  --color-bubble-out: oklch(91% 0.035 125);   /* own message, a soft green, not WhatsApp's */
  --color-yes: oklch(52.7% 0.137 150.1);        /* a chosen "yes", the same green as the invitee page in the service */
  --color-on-venue: oklch(98.2% 0.004 91.4);  /* text on the dark venue colours */

  /* fictional venues: background, text, and the venue's own button colour */
  --venue-rose-bg: oklch(90.1% 0.031 37.8);    /* #f2d8d0 */
  --venue-rose-text: var(--color-ink);
  --venue-rose-accent: oklch(45.9% 0.113 31.1);/* #8c3b2e */
  --venue-ochre-bg: oklch(76.1% 0.123 78.0);   /* #dca74e */
  --venue-ochre-text: var(--color-ink);
  --venue-ochre-accent: oklch(28.8% 0.005 106.7);
  --venue-olive-bg: oklch(48.9% 0.054 114.9);  /* #5f6440 */
  --venue-olive-text: var(--color-on-venue);
  --venue-olive-accent: oklch(48.9% 0.054 114.9);
  --venue-clay-bg: oklch(50.5% 0.115 39.6);    /* #9a4a2e */
  --venue-clay-text: var(--color-on-venue);
  --venue-clay-accent: oklch(50.5% 0.115 39.6);
  --venue-slate-bg: oklch(43.8% 0.040 240.8);  /* #3e5566, 7.4:1 with on-venue */
  --venue-slate-text: var(--color-on-venue);
  --venue-slate-accent: oklch(43.8% 0.040 240.8);
  --venue-sage-bg: oklch(90.7% 0.024 122.7);   /* #dde3d2, 10.8:1 with ink */
  --venue-sage-text: var(--color-ink);
  --venue-sage-accent: oklch(28.8% 0.005 106.7);

  /* The service's own state and count colours (Tailwind, as in app/web/src/components/
     occasion-state.ts and CountList.vue), so the replicas match the app. */
  --app-amber-50: oklch(98.7% 0.021 95.3);  /* #fffbeb */
  --app-amber-100: oklch(96.2% 0.058 95.6);  /* #fef3c7 */
  --app-amber-300: oklch(87.9% 0.153 91.6);  /* #fcd34d */
  --app-amber-900: oklch(41.4% 0.105 45.9);  /* #78350f */
  --app-blue-300: oklch(80.9% 0.096 251.8);  /* #93c5fd */
  --app-blue-400: oklch(71.4% 0.143 254.6);  /* #60a5fa */
  --app-blue-950: oklch(28.2% 0.087 267.9);  /* #172554 */
  --app-neutral-400: oklch(71.5% 0.000 89.9);  /* #a3a3a3 */
  --app-neutral-500: oklch(55.6% 0.000 89.9);  /* #737373 */
  --app-neutral-600: oklch(43.9% 0.000 89.9);  /* #525252 */
  --app-neutral-700: oklch(37.1% 0.000 89.9);  /* #404040 */
  --app-orange-800: oklch(47.0% 0.143 37.3);  /* #9a3412 */
  --app-white: oklch(100.0% 0.000 89.9);  /* #ffffff */

  /* type */
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Instrument Sans", -apple-system, system-ui, "Segoe UI", sans-serif;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  --text-2xl: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --text-display: clamp(2.5rem, 1.4rem + 4.6vw, 5rem);
  --leading-tight: 1.08;
  --leading-body: 1.6;

  /* space, 4 pt */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(4rem, 3rem + 4vw, 7rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 38rem;
  --page: 72rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --text-xs: 0.8125rem;
  --text-2xs: 0.6875rem;
  --rule: 1px;

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.8, 0.3);
  --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
  --dur-fast: 150ms;
  --dur-mid: 320ms;
}