/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   Layout is fluid: most sizes use `vw` based on the 1440px Figma frame
   (1vw = 14.4px at 1440px). Mobile overrides live in each section file.
   ========================================================================== */

:root {
  /* Brand palette — the only 4 colours used on the site */
  --color-black: #0c0c0c;
  --color-pink: #fc75b6;
  --color-cream: #f0eedf;
  --color-red: #e43d38;

  /* Typefaces (files in assets/fonts, declared in fonts.css) */
  --font-display: "DIN Condensed", "Arial Narrow", sans-serif;
  --font-serif: "PP Editorial New", Georgia, serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --font-script: "Biro Script Plus", cursive;

  /* Shared component values */
  --radius: 13px; /* buttons, cards, form fields */
  --radius-fluid: 0.9028vw; /* 13px at 1440, scales with the layout */
  --radius-media: 24px; /* photos and media cards */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  /* Stacking */
  --z-header: 50;
  --z-consent: 60;
  --z-menu: 100;
  --z-lightbox: 200;
}