/* ─────────────────────────────────────────────────────────────────────
   Ollie & Hana VIP Lounge — shared design tokens

   Colours read live from ollieandhana.com.my, not invented:
   olive #4D5649 is the site's primary (every button label), peach #FAE8DF
   is its button fill, body copy is #636366, headings #333, type is Poppins,
   buttons are fully rounded pills.
   ───────────────────────────────────────────────────────────────────── */

:root {
  /* Brand */
  --olive:        #4D5649;
  --olive-deep:   #3C4339;
  --olive-tint:   #EEF0EC;
  --peach:        #FAE8DF;
  --peach-deep:   #F3D8CB;
  --peach-pale:   #FDF5F1;

  /* Surface + ink. Body ink hits 5.6:1 on white; muted hits 4.8:1.
     Anything lighter fails WCAG AA at 14px, which is most of this screen. */
  /* The ground is warm, not clinical. Ollie & Hana is peach and olive on
     cream; a stark white page threw that away and read as a form. */
  --surface:      #FFFFFF;
  --surface-2:    #FBF6F1;
  --surface-3:    #F3EDE6;
  --ground:       #F7F0E9;
  --ink:          #333333;
  --ink-body:     #636366;
  --ink-muted:    #6E6E73;
  --line:         #EDE4DE;
  --line-strong:  #DFD3CA;

  /* State */
  --ok:           #3F6B44;
  --ok-bg:        #EAF2E9;
  --warn:         #8A5A12;
  --warn-bg:      #FDF1DC;
  --danger:       #A33A2C;
  --danger-bg:    #FBECE9;
  --focus:        #4D5649;

  /* Type — fixed rem scale, not fluid. Phone DPI is consistent and a
     clamped size that shrinks inside a sheet reads worse, not better. */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --t-xs:   0.75rem;   /* 12px */
  --t-sm:   0.8125rem; /* 13px */
  --t-base: 0.9375rem; /* 15px */
  --t-md:   1rem;      /* 16px */
  --t-lg:   1.125rem;  /* 18px */
  --t-xl:   1.375rem;  /* 22px */
  --t-2xl:  1.75rem;   /* 28px */
  --t-3xl:  2.5rem;    /* 40px */
  --t-4xl:  3.25rem;   /* 52px */

  /* Space */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;

  /* Radius — pills, matching the site's 35–50px buttons */
  --r-pill: 999px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;

  --shadow-sm: 0 1px 2px rgba(77, 86, 73, 0.06);
  --shadow-md: 0 4px 16px rgba(77, 86, 73, 0.10);
  --shadow-lg: 0 -6px 28px rgba(77, 86, 73, 0.14);

  /* Product register: 150–250ms. The user is mid-task, not watching a show. */
  --t-fast: 140ms cubic-bezier(0.22, 1, 0.36, 1);
  --t-base-dur: 200ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Semantic z-scale — never arbitrary 9999 */
  --z-sticky: 10;
  --z-bar: 20;
  --z-backdrop: 40;
  --z-sheet: 50;
  --z-toast: 60;
}

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

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.5;
  color: var(--ink-body);
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; font-size: inherit; }

/* Visible focus everywhere. Staff use a tablet, customers use a phone;
   both benefit and keyboard users depend on it. */
:focus-visible {
  outline: 2.5px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.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;
}

/* ── Buttons ──────────────────────────────────────────────────────────
   One vocabulary. Every state defined, including disabled and loading —
   shipping half of them is how a UI starts feeling subtly broken. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: 48px;               /* thumb target, not a guideline */
  padding: 0 var(--s-6);
  border: 1.5px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--t-base);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), transform var(--t-fast);
}
.btn:active { transform: scale(0.985); }

.btn-primary { background: var(--olive); color: #fff; }
.btn-primary:hover { background: var(--olive-deep); }

.btn-secondary { background: var(--peach); color: var(--olive); }
.btn-secondary:hover { background: var(--peach-deep); }

.btn-ghost { background: transparent; color: var(--olive); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--olive-tint); }

.btn:disabled,
.btn[aria-disabled='true'] {
  background: var(--surface-3);
  color: var(--ink-muted);
  border-color: transparent;
  cursor: not-allowed;
  transform: none;
}
.btn[data-loading='true'] { pointer-events: none; color: transparent; position: relative; }
.btn[data-loading='true']::after {
  content: ''; position: absolute;
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: spin 0.7s linear infinite;
}
.btn-secondary[data-loading='true']::after,
.btn-ghost[data-loading='true']::after {
  border-color: rgba(77, 86, 73, 0.3); border-top-color: var(--olive);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Badges ─────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
.badge-try { background: var(--peach); color: var(--olive); }
.badge-out { background: var(--surface-3); color: var(--ink-muted); }
.badge-ok  { background: var(--ok-bg); color: var(--ok); }

/* ── Skeletons — never a spinner in the middle of content ───────────── */
.skeleton {
  background: linear-gradient(90deg, var(--surface-3) 25%, #EFEAE5 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .skeleton { animation: none; background: var(--surface-3); }
}