/* ==========================================================================
   Chern & Javier — shared theme — "The Journey"
   Design tokens, minimal reset, buttons, shared keyframes, reduced motion.
   Linked FIRST by every page (invitation, admin panel, escape room).
   ========================================================================== */

:root {
  /* ---- Journey palette (new) ---- */
  --cloud:       #F8F9FF;  /* page base, near-white with a cold breath */
  --sky-soft:    #E8EBFA;
  --periwinkle:  #ACAAC8;
  --jet-blue:    #7F7FB8;
  --indigo-deep: #4B4885;
  --night:       #1D1837;  /* darkest ink/accents */
  --blush:       #F3D8CE;
  --rose:        #D2747E;
  --magenta:     #C2185B;  /* hot-pink stairs accent */
  --wine:        #8E2F3C;
  --mint:        #A8D8C8;  /* the suitcase */
  --gold:        #C9A227;  /* porthole rims — kept from before */

  /* ---- Legacy token names (admin + escape room keep working) ----
     Re-pointed to the nearest values of the new journey palette. */
  --cream-50:  #FDFDFF;
  --cream-100: #F1F2FB;
  --cream-200: #DFE2F4;
  --ivory:     #FFFFFF;
  --ink:       #2B2650;   /* main text — deep indigo-leaning */
  --ink-soft:  #5B5680;
  --gold-soft: #E2CA82;
  --hibiscus:  #C2185B;
  --batik-indigo: #4B4885;
  --malaysia-teal: #33756B;
  --spanish-red:   #8E2F3C;
  --spanish-yellow:#C9A227;
  --terracotta:    #D2747E;

  --font-display: Georgia, 'Times New Roman', 'Palatino Linotype', serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;
  --radius: 18px;
  --shadow-soft: 0 10px 40px rgba(29, 24, 55, 0.14);
}

/* --------------------------------------------------------------------------
   Minimal reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background: var(--cream-100);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, picture, svg, video, canvas { max-width: 100%; }
img { display: block; height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }
textarea { resize: vertical; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
}

a { color: inherit; }

/* `hidden` must always win, even over display rules set on the class. */
[hidden] { display: none !important; }

/* Two-tone focus ring: white halo carries dark zones, indigo carries light
   surfaces — ≥ 3:1 against every background on the site. */
:focus-visible {
  outline: 3px solid var(--indigo-deep);
  outline-offset: 2px;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.85);
}

::selection {
  background: var(--periwinkle);
  color: var(--night);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.8em 1.7em;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.btn:not(:disabled):hover { transform: translateY(-2px); }

.btn:not(:disabled):active {
  transform: translateY(1px) scale(0.97);
  transition-duration: 0.06s;
}

.btn:focus-visible {
  outline: 3px solid var(--indigo-deep);
  outline-offset: 3px;
  box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.85);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn-primary {
  background: linear-gradient(150deg, #E0526E 0%, var(--magenta) 55%, #97114A 100%);
  border-color: #97114A;
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(194, 24, 91, 0.35);
}

.btn-primary:not(:disabled):hover {
  box-shadow: 0 10px 26px rgba(194, 24, 91, 0.45);
}

.btn-ghost {
  background: transparent;
  border-color: var(--periwinkle);
  color: var(--ink-soft);
}

.btn-ghost:not(:disabled):hover {
  background: var(--cream-50);
  border-color: var(--indigo-deep);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Shared keyframes
   -------------------------------------------------------------------------- */

@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* Same idle bob via the standalone `translate` property: it composes with
   `transform`, so hover/active/reveal transforms on the element keep working
   while it floats (float-slow would override them). */
@keyframes float-drift {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Reduced motion — disable all non-essential animation globally
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}