/* ═══════════════════════════════════════════════════
   BASE.CSS
   Custom properties, reset, typography, utilities
   World: Noa's printed invitation — warm card stock, brown-black ink,
   grey italic asides, gold only as hairlines.
═══════════════════════════════════════════════════ */

/* ── Custom Properties ── */
:root {
  /* Colors: warm card stock and brown ink, no pure white anywhere */
  --color-paper:      #FAF6EF;  /* the card stock every page is printed on */
  --color-card:       #FDF9F2;  /* invitations and photo prints, a shade lighter than paper */
  --color-panel:      #EFE6DA;  /* beige panels: chooser, coming soon, what awaits */
  --color-ink:        #211B16;
  --color-ink-soft:   #3D352E;
  --color-muted:      #6E6459;  /* italic asides, labels: 5.5:1 on paper */
  --color-line:       #E3D9CB;
  --color-gold:       #C8A97A;  /* hairlines only, never text */
  --color-umber:      #7A5E45;  /* the warm accent: audience lines, strokes, small controls (5.4:1 on paper) */
  --color-sand-line:  #D6C6B1;  /* rules and frames on beige */
  --color-band:       #2B231D;  /* espresso, for the booking band */
  --color-band-text:  #FAF6EF;
  --color-band-muted: #B8AEA2;  /* 7.4:1 on band */
  --color-band-line:  rgba(250, 246, 239, 0.22);
  --color-error:      #9B2C2C;  /* form errors: 6.9:1 on paper */
  --color-veil:       rgba(24, 19, 15, 0.55);

  /* Faint paper grain, the vintage of a printed invitation */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .32 0 0 0 0 .26 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Typography */
  --font-display: 'Frank Ruhl Libre', 'Times New Roman', serif;
  --font-body:    'Assistant', system-ui, -apple-system, sans-serif;

  --text-xs:    13px;
  --text-sm:    15px;
  --text-base:  18px;
  --text-input: 16px;  /* form fields: keeps iOS from zooming on focus */
  --text-md:    22px;
  --text-lg:    clamp(27px, 4.4vw, 34px);
  --text-xl:    clamp(46px, 8vw, 64px);
  --text-hero:  clamp(56px, 14vw, 96px);

  /* Spacing */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   72px;
  --space-9:   104px;

  /* Layout: one invitation-width column */
  --column:  580px;
  --wide:    960px;
  --gutter:  clamp(20px, 6vw, 40px);

  /* Motion */
  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out);
  --transition-base: 260ms var(--ease-out);

  /* Focus ring */
  --focus-ring: 0 0 0 2px var(--color-paper), 0 0 0 4px var(--color-ink);
}

/* ── Reset ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--color-line) var(--color-paper);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background-color: var(--color-paper);
  background-image: var(--paper-grain);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.85;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background-color: var(--color-gold);
  color: var(--color-ink);
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

button {
  font: inherit;
  cursor: pointer;
}

ul,
ol {
  list-style: none;
}

fieldset {
  border: 0;
  min-width: 0;
}

/* The hidden attribute always wins over display rules above */
[hidden] {
  display: none !important;
}

/* ── Focus Styles (accessibility) ── */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Screen-reader only ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Layout ── */
.column {
  max-width: calc(var(--column) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.column--wide {
  max-width: calc(var(--wide) + 2 * var(--gutter));
}

/* ── Typography ── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.25;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

.aside {
  font-style: italic;
  color: var(--color-muted);
}

/* ── Gold hairline rule (from the invitation) ── */
.rule {
  width: 44px;
  height: 1px;
  margin: var(--space-8) auto;
  background-color: var(--color-gold);
  border: 0;
}

.column > .rule:first-child {
  margin-top: 0;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  :root {
    --text-base: 17px;
    --space-9:   80px;
    --space-8:   56px;
  }
}