/* ==========================================================================
   VIPcare — AEP Broker RSVP  ·  Shared stylesheet (high-fidelity static mock)
   Tokens pulled from the live getvipcare.com Webflow theme
   (css/vipcare-copy.webflow.shared.*.css). See DESIGN-NOTES.md.
   Mobile-first. No build step — open any .html by double-click.
   ========================================================================== */

/* ---- 1. DESIGN TOKENS ---------------------------------------------------- */
:root {
  /* Brand palette (exact hex from VIPcare primitives) */
  --vip-white:            #ffffff;

  --vip-blue:             #2271e7; /* royal-blue — PRIMARY action */
  --vip-blue-dark:        #1b5ab8; /* hover / links on white (5.2:1) */
  --vip-blue-darkest:     #0a2145; /* dark CTA band background */
  --vip-blue-light:       #649bee;
  --vip-blue-lighter:     #d2e2fa;
  --vip-blue-lightest:    #e8f0fc; /* tint fills, selected states */

  --vip-cerulean:         #007dad; /* teal accent */
  --vip-cerulean-dark:    #00648a;
  --vip-cerulean-lighter: #cce5ee;
  --vip-turquoise:        #3cd3ad; /* bright success accent */

  --vip-orange:           #f49023; /* carrot — warm accent, sparingly */
  --vip-orange-lightest:  #fdf3e9;

  /* Neutrals (05030a = brand near-black, used for text + dark sections) */
  --vip-ink:              #05030a;
  --vip-ink-2:            #1e1c22;
  --vip-neutral-dark:     #504e53; /* secondary text (7.9:1 on white) */
  --vip-neutral:          #828184;
  --vip-neutral-light:    #b4b3b5;
  --vip-neutral-lighter:  #d9d9da; /* hairline borders */
  --vip-neutral-lightest: #f2f2f2; /* page background */

  /* Semantic */
  --vip-success:          #007dad; /* confirmed-yes uses brand cerulean */
  --vip-success-tint:     #cce5ee;
  --vip-danger:           #b42318; /* error headline */
  --vip-danger-tint:      #fef3f2;

  /* Typography */
  --font-heading: "Quicksand", ui-rounded, system-ui, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Type scale (mobile-first, rem @ 16px base) */
  --fs-display: 1.75rem;  /* 28px */
  --fs-h2:      1.375rem; /* 22px */
  --fs-h3:      1.125rem; /* 18px */
  --fs-body:    1rem;     /* 16px */
  --fs-sm:      0.875rem; /* 14px */
  --fs-xs:      0.8125rem;/* 13px */

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.55;

  /* Spacing scale (8px grid) */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;

  /* Radius (brand: cards 16px, buttons 6px → nudged to 8px for mobile warmth) */
  --radius-card:   16px;
  --radius-button: 8px;
  --radius-pill:   999px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(5,3,10,.06), 0 8px 24px rgba(5,3,10,.06);
  --shadow-app:  0 10px 40px rgba(5,3,10,.10);

  /* Touch target minimum */
  --tap: 48px;
}

/* ---- 2. RESET / BASE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--vip-ink);
  background: var(--vip-neutral-lightest);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--font-heading); line-height: var(--lh-tight); margin: 0; }
p { margin: 0; }
a { color: var(--vip-blue-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { display: block; }
button { font: inherit; cursor: pointer; }

/* Visible focus for keyboard users (accessibility) */
:focus-visible {
  outline: 3px solid var(--vip-blue-light);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- 3. APP SHELL (mobile column, framed on larger screens) -------------- */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 448px;
  margin: 0 auto;
  background: var(--vip-white);
}
@media (min-width: 560px) {
  body { padding: var(--sp-8) var(--sp-4); }
  .app {
    min-height: auto;
    border-radius: 20px;
    box-shadow: var(--shadow-app);
    overflow: hidden;
  }
}

/* ---- 4. HEADER ----------------------------------------------------------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--vip-neutral-lighter);
}
.site-header__logo { height: 26px; width: auto; }

/* ---- 5. PAGE BODY -------------------------------------------------------- */
.page {
  flex: 1;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--vip-cerulean-dark);
}
.greeting { display: flex; flex-direction: column; gap: var(--sp-2); }
.greeting h1 { font-size: var(--fs-display); font-weight: 700; }
.greeting p { color: var(--vip-neutral-dark); }

/* ---- 6. EVENT CARD ------------------------------------------------------- */
.event-card {
  border: 1px solid var(--vip-neutral-lighter);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--vip-white);
}
.event-card__banner {
  background: var(--vip-blue-darkest);
  color: var(--vip-white);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.event-card__banner .eyebrow { color: var(--vip-blue-light); }
.event-card__title { font-size: var(--fs-h2); font-weight: 700; color: var(--vip-white); }
.event-card__meta { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.meta-row { display: flex; align-items: flex-start; gap: var(--sp-3); }
.meta-row svg { flex: none; width: 20px; height: 20px; color: var(--vip-blue); margin-top: 2px; }
.meta-row__label { font-size: var(--fs-xs); color: var(--vip-neutral); text-transform: uppercase; letter-spacing: .04em; }
.meta-row__value { font-weight: 600; color: var(--vip-ink); }

/* ---- 7. RSVP TOGGLE (segmented Yes / No) --------------------------------- */
.rsvp { display: flex; flex-direction: column; gap: var(--sp-3); }
.rsvp__label { font-weight: 600; }
.rsvp__toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
.rsvp__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 60px;
  padding: var(--sp-3);
  border: 2px solid var(--vip-neutral-lighter);
  border-radius: var(--radius-card);
  background: var(--vip-white);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-h3);
  color: var(--vip-neutral-dark);
  transition: border-color .15s, background .15s, color .15s;
}
.rsvp__option svg { width: 22px; height: 22px; }
.rsvp__option:hover { border-color: var(--vip-blue-light); }
.rsvp__option[aria-pressed="true"] {
  border-color: var(--vip-blue);
  background: var(--vip-blue-lightest);
  color: var(--vip-blue-dark);
}
.rsvp__option--no[aria-pressed="true"] {
  border-color: var(--vip-neutral-dark);
  background: var(--vip-neutral-lightest);
  color: var(--vip-ink);
}
/* Color-independent selection cue (WCAG 1.4.1): selected option shows a
   check badge, not hue alone. Rendered as a ✓ in a filled corner circle. */
.rsvp__option[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: -9px; right: -9px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--vip-blue) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 13l4 4L19 7"/></svg>') center / 15px no-repeat;
  box-shadow: 0 0 0 2px var(--vip-white);
}
.rsvp__option--no[aria-pressed="true"]::after { background-color: var(--vip-neutral-dark); }

/* ---- 8. FIELD (masked email) --------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--vip-neutral-dark); }
.field__control {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--vip-neutral-lighter);
  border-radius: var(--radius-button);
  background: var(--vip-white);
  padding: 0 var(--sp-3);
  min-height: var(--tap);
}
.field__control:focus-within { border-color: var(--vip-blue); box-shadow: 0 0 0 3px var(--vip-blue-lightest); }
/* Static masked-value display — the stored address is shown as TEXT, never as an
   editable input value (the • bullets aren't valid email chars, and an untouched
   masked input must not POST). "Edit" reveals an empty .field__input for a full
   retype; untouched = no email change. See MOCKUP-SPEC.md §6, DESIGN.md §5.2. */
.field__value {
  flex: 1;
  color: var(--vip-ink);
  padding: var(--sp-3) 0;
  min-width: 0;
  font: inherit;
}
.field__input {
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  color: var(--vip-ink);
  padding: var(--sp-3) 0;
  min-width: 0;
}
.field__input:focus { outline: none; }
.field__edit {
  border: 0; background: transparent; color: var(--vip-blue-dark);
  font-size: var(--fs-sm); font-weight: 600; padding: var(--sp-2);
}

/* ---- 9. BUTTONS ---------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-button);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-body);
  transition: background .2s, border-color .2s, color .2s;
}
.btn--block { width: 100%; }
.btn--lg { min-height: 56px; font-size: var(--fs-h3); }
.btn--primary { background: var(--vip-blue); border-color: var(--vip-blue); color: var(--vip-white); }
.btn--primary:hover { background: var(--vip-blue-dark); border-color: var(--vip-blue-dark); text-decoration: none; }
.btn--secondary { background: var(--vip-white); border-color: var(--vip-neutral-lighter); color: var(--vip-ink); }
.btn--secondary:hover { border-color: var(--vip-blue); color: var(--vip-blue-dark); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--vip-blue-dark); }
.btn svg { width: 20px; height: 20px; }

/* Pending / submitting state for the confirm button (spec §4). Prevents
   double-taps; shows a calm inline spinner, no "spinner theater". */
.btn[aria-busy="true"], .btn--pending {
  pointer-events: none;
  opacity: .85;
}
.btn[aria-busy="true"]::before, .btn--pending::before {
  content: "";
  width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Toast (spec §4): recoverable-error and success affirmations, ARIA-live */
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 12px;
  font-size: var(--fs-sm); font-weight: 500;
  box-shadow: var(--shadow-card);
}
.toast svg { width: 20px; height: 20px; flex: none; }
.toast--success { background: var(--vip-success-tint); color: var(--vip-cerulean-dark); }
.toast--info    { background: var(--vip-blue-lightest); color: var(--vip-blue-dark); }
.toast--warn    { background: var(--vip-orange-lightest); color: var(--vip-ink); }
.toast--warn svg { color: var(--vip-orange); }

/* Loading skeleton for greeting + hero (data arrives from API, spec §4) */
.skeleton {
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: skeleton 1.4s ease infinite;
  border-radius: 8px; color: transparent;
}
@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Respect reduced-motion: no spin, no shimmer, no hover lift (spec §7) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .state-link:hover { transform: none; }
}

.note { font-size: var(--fs-sm); color: var(--vip-neutral-dark); text-align: center; }
.linkline { text-align: center; font-size: var(--fs-sm); }
.linkline a { font-weight: 600; }

/* ---- 10. STATUS / TERMINAL STATES --------------------------------------- */
.status { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-4); padding-top: var(--sp-4); }
.status__icon {
  width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center;
}
.status__icon svg { width: 38px; height: 38px; }
.status__icon--success { background: var(--vip-success-tint); color: var(--vip-cerulean-dark); }
.status__icon--info    { background: var(--vip-blue-lightest); color: var(--vip-blue-dark); }
.status__icon--muted   { background: var(--vip-neutral-lightest); color: var(--vip-neutral-dark); }
.status__icon--danger  { background: var(--vip-danger-tint); color: var(--vip-danger); }
.status h1 { font-size: var(--fs-display); font-weight: 700; }
.status__sub { color: var(--vip-neutral-dark); max-width: 34ch; }

/* Compact event summary used on confirmation screens */
.summary {
  width: 100%;
  border: 1px solid var(--vip-neutral-lighter);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3);
  text-align: left;
}
.summary__name { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); }
.summary .meta-row svg { width: 18px; height: 18px; }
.summary .meta-row__value { font-weight: 500; }

.stack { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }

/* ---- 11. FOOTER (fine print) -------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--vip-neutral-lighter);
  padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--vip-neutral-dark);
  text-align: center;
}
.site-footer a { color: var(--vip-neutral-dark); text-decoration: underline; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); justify-content: center; }
.site-footer__addr { color: var(--vip-neutral); }

/* ---- 12. INDEX / STYLE-GUIDE PAGE --------------------------------------- */
.guide { max-width: 960px; margin: 0 auto; padding: var(--sp-8) var(--sp-5) var(--sp-16); }
.guide__head { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.guide__head h1 { font-size: 2rem; font-weight: 700; }
.guide__head p { color: var(--vip-neutral-dark); max-width: 60ch; }
.guide section { margin-bottom: var(--sp-12); }
.guide h2 { font-size: var(--fs-h2); font-weight: 700; margin-bottom: var(--sp-4); }
.state-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--sp-4); }
.state-link {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-5); border: 1px solid var(--vip-neutral-lighter);
  border-radius: var(--radius-card); background: var(--vip-white);
  box-shadow: var(--shadow-card); color: var(--vip-ink);
}
.state-link:hover { border-color: var(--vip-blue); text-decoration: none; transform: translateY(-2px); transition: .15s; }
.state-link strong { font-family: var(--font-heading); font-size: var(--fs-h3); }
.state-link span { font-size: var(--fs-sm); color: var(--vip-neutral-dark); }
.state-link code { font-size: var(--fs-xs); color: var(--vip-blue-dark); background: var(--vip-blue-lightest); padding: 2px 6px; border-radius: 4px; width: fit-content; }

.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
.swatch { border: 1px solid var(--vip-neutral-lighter); border-radius: 12px; overflow: hidden; background: var(--vip-white); }
.swatch__chip { height: 72px; }
.swatch__body { padding: var(--sp-3); }
.swatch__name { font-weight: 600; font-size: var(--fs-sm); }
.swatch__hex { font-size: var(--fs-xs); color: var(--vip-neutral-dark); font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.type-row { display: flex; align-items: baseline; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--vip-neutral-lightest); }
.type-row__meta { font-size: var(--fs-xs); color: var(--vip-neutral); font-family: ui-monospace, Menlo, monospace; min-width: 130px; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }