/* Sydney Marriage Celebrant — shared tokens */
@font-face { font-family: "Italiana"; src: url("/assets/fonts/italiana-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 300; src: url("/assets/fonts/manrope-latin-300-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 400; src: url("/assets/fonts/manrope-latin-400-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 500; src: url("/assets/fonts/manrope-latin-500-normal.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 600; src: url("/assets/fonts/manrope-latin-600-normal.woff2") format("woff2"); font-display: swap; }

:root {
  --ink: #17282B;        /* text */
  --harbour: #1F4A4C;    /* deep harbour green */
  --harbour-2: #2C6163;
  --sand: #B89A6C;       /* sandstone */
  --sand-light: #E6DAC6;
  --paper: #F2F3EF;      /* cool off-white */
  --mist: #DCE3E0;
  --jacaranda: #8E7CC3;  /* November in Sydney: used sparingly */
  --white: #FFFFFF;
  --danger: #A23B3B;
  --ok: #2F6B4F;

  --display: "Italiana", "Didot", "Bodoni 72", serif;
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: 2.2rem;
  --step-4: 3.2rem;
  --step-5: clamp(2.8rem, 6.4vw, 5.6rem);

  --measure: 64ch;
  --radius: 4px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--sans); font-weight: 400; font-size: var(--step-0); line-height: 1.6; color: var(--ink); background: var(--paper); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--jacaranda); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; letter-spacing: .01em; }
p { margin: 0 0 1em; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: 500 var(--step-0)/1 var(--sans); padding: .95em 1.6em; border-radius: 999px; border: 1px solid var(--harbour); background: var(--harbour); color: var(--paper); text-decoration: none; cursor: pointer; transition: background .2s, color .2s; }
.btn:hover { background: var(--ink); border-color: var(--ink); }
.btn--ghost { background: transparent; color: var(--harbour); }
.btn--ghost:hover { background: var(--harbour); color: var(--paper); }
.btn--small { padding: .6em 1.1em; font-size: var(--step--1); }
.btn[disabled] { opacity: .5; cursor: progress; }

label { display: block; font-weight: 500; font-size: var(--step--1); margin-bottom: .35em; }
input, select, textarea { width: 100%; font: inherit; color: var(--ink); padding: .75em .9em; border: 1px solid #B9C4C0; border-radius: var(--radius); background: var(--white); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--jacaranda); outline-offset: 0; border-color: var(--jacaranda); }
textarea { min-height: 7em; resize: vertical; }
.hint { font-size: var(--step--1); color: #52625F; margin-top: .3em; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }