/* ============================================================================
   HK Gala 2026 — "善緣薈筵" shared theme
   Light, serene temple aesthetic matched to the printed poster:
   warm sandalwood paper, deep sepia ink, aged gold, a single cinnabar seal.
   Used by both the mobile guest invitation and the desktop admin console.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Serif+TC:wght@300;400;500;600;700;900&display=swap');

:root{
  /* paper / ground */
  --paper:#F3EAD8;            /* warm sandalwood cream */
  --paper-2:#EADFC8;          /* slightly deeper cream */
  --paper-3:#E2D4B8;          /* card edge / wash */
  --card:#FBF6EC;             /* raised surface */
  --card-2:#F6EEDD;

  /* ink */
  --ink:#3B2A18;             /* deep sepia — primary text */
  --ink-2:#5C4630;           /* secondary */
  --ink-soft:#8A7355;        /* muted */
  --ink-faint:#A8916F;

  /* metals & seal */
  --gold:#B58A3C;            /* aged temple gold */
  --gold-deep:#94702C;
  --gold-pale:#D8BE86;
  --cinnabar:#9E2B23;        /* seal red — used sparingly */
  --cinnabar-deep:#7E211B;
  --jade:#6E8C7B;            /* rare cool counter-note */
  --jade-pale:#A9C2B2;

  /* lines */
  --line:#D7C6A6;
  --line-soft:#E3D6BB;
  --line-strong:#C2AC83;

  /* status */
  --ok:#5E7E5A;              /* confirmed / paid (sage) */
  --ok-bg:#E7EDDD;
  --hold:#B07C2E;            /* cash-pending (amber) */
  --hold-bg:#F3E6CB;
  --pend:#8A7355;            /* pending (muted) */
  --pend-bg:#EAE0CB;
  --no:#9E5A4E;              /* declined / cancelled */
  --no-bg:#F0Dfd6;

  --font-display:"Cormorant Garamond", Georgia, serif;
  --font-sans:"Inter", system-ui, -apple-system, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, monospace;
  --font-tc:"Noto Serif TC", serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px;
  --shadow-sm:0 2px 8px rgba(93,66,33,.08);
  --shadow:0 12px 34px rgba(93,66,33,.14);
  --shadow-lg:0 24px 60px rgba(80,54,22,.20);
}

*{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none}
::selection{background:rgba(181,138,60,.28);color:var(--ink)}

/* warm paper ground with the poster's top-right sunlight bloom */
.paper-bg{
  background:
    radial-gradient(120% 90% at 92% 4%, rgba(255,250,236,.95), transparent 46%),
    radial-gradient(80% 70% at 88% 30%, rgba(216,190,134,.30), transparent 55%),
    linear-gradient(150deg, var(--paper) 0%, var(--paper-2) 60%, var(--paper-3) 100%);
}

/* bilingual visibility — body[data-lang] toggles */
body[data-lang="en"] .lz{display:none}
body[data-lang="zh"] .le{display:none}

/* ---- the cinnabar seal (placeholder for the temple's Buddha logo) ---- */
.seal{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(155deg,var(--cinnabar),var(--cinnabar-deep));
  color:#F3E7CE;font-family:var(--font-tc);font-weight:700;
  border-radius:5px;
  box-shadow:inset 0 0 0 1.5px rgba(243,231,206,.35), 0 4px 12px rgba(126,33,27,.28);
  user-select:none;letter-spacing:.04em;
}

/* ---- gold hairline rule ---- */
.goldrule{height:1px;background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent);border:none}

/* ---- lotus divider (simple geometric — petals as rotated leaves) ---- */
.lotus{display:flex;align-items:center;justify-content:center;gap:.85rem;color:var(--gold)}
.lotus::before,.lotus::after{content:"";height:1px;flex:1;max-width:120px;background:linear-gradient(90deg,transparent,var(--gold-pale))}
.lotus::after{background:linear-gradient(90deg,var(--gold-pale),transparent)}
.lotus .glyph{font-size:1rem;line-height:1;opacity:.9}

/* status pills (shared) */
.pill{display:inline-flex;align-items:center;gap:.4em;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.04em;padding:3px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.pill .d{width:6px;height:6px;border-radius:50%;flex:none}
.pill.ok{background:var(--ok-bg);color:#3f5a3b;border-color:#c4d3b4}.pill.ok .d{background:var(--ok)}
.pill.hold{background:var(--hold-bg);color:#7c5618;border-color:#e0c891}.pill.hold .d{background:var(--hold)}
.pill.pend{background:var(--pend-bg);color:#6b573a;border-color:#d6c4a0}.pill.pend .d{background:var(--pend)}
.pill.no{background:var(--no-bg);color:#7c4338;border-color:#dcc0b6}.pill.no .d{background:var(--no)}

/* focus ring */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}