/* =============================================================
   SUPA Spin to Win — brand tokens + shared UI
   Derived from the SUPA Design System (colors_and_type.css)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anybody:wdth,wght@75..125,200..900&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  /* Primary brand */
  --supa-yellow:      #FEE033;
  --supa-yellow-80:   #FEE666;
  --supa-yellow-60:   #FEEB8E;
  --supa-yellow-40:   #FFF1B5;
  --supa-yellow-20:   #FFF8DC;

  /* Neutrals */
  --supa-black:       #313131;
  --supa-black-80:    #5A5A5A;
  --supa-black-60:    #838383;
  --supa-black-40:    #ACACAC;
  --supa-black-20:    #D5D5D5;
  --supa-white:       #F8F8F8;
  --supa-white-pure:  #FFFFFF;

  /* Accents (category palette) */
  --supa-bakery:      #FFE880;
  --supa-wellness:    #92A8FF;
  --supa-home-ess:    #DBA7F8;
  --supa-snacks:      #BCA6F0;
  --supa-produce:     #D3FFCA;
  --supa-grab-go:     #91F7BC;
  --supa-beverages:   #FF8DB2;
  --supa-baking:      #FDB8D9;
  --supa-frozen:      #FFCDAE;
  --supa-alcohol:     #FFC478;
  --supa-cleaning:    #A4EFF9;
  --supa-pantry:      #78ABFF;
  --supa-dairy:       #76C8FF;

  /* Functional */
  --supa-green:       #05A875;
  --supa-red:         #F24052;
  --supa-orange:      #FF960E;
  --supa-blue:        #4A24F5;

  --font-display: 'Anybody', 'Arial Black', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, -apple-system, sans-serif;

  --r-sm: 12px;
  --r-md: 14px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-elev: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-pop:  0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-yellow: 0 6px 20px rgba(254, 224, 51, 0.45);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-snap: 80ms;
  --dur-fast: 160ms;
  --dur-base: 240ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--supa-black);
  background: var(--supa-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- type ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.h1 { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.05; }
.h2 { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.05; }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.05; }
.body-sm { font-size: 13px; line-height: 1.35; color: var(--supa-black-80); }
.caption {
  font-size: 12px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--supa-black-60);
}
.fineprint { font-size: 11px; line-height: 1.4; color: var(--supa-black-60); }

/* ---------- buttons ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  border: 0;
  cursor: pointer;
  padding: 14px 22px;
  border-radius: var(--r-md);
  font-size: 15px;
  transition: transform var(--dur-snap) ease-out, background var(--dur-snap) ease-out, opacity var(--dur-snap) ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary { background: var(--supa-black); color: var(--supa-yellow); }
.btn-primary:hover { background: #1a1a1a; }
.btn-yellow { background: var(--supa-yellow); color: var(--supa-black); }
.btn-yellow:hover { background: #f6d520; }
.btn-ghost { background: transparent; color: var(--supa-black); border: 1.5px solid var(--supa-black); }
.btn-ghost:hover { background: rgba(49, 49, 49, 0.06); }
.btn-pill { border-radius: var(--r-pill); }
.btn-lg { padding: 18px 28px; font-size: 17px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn:focus-visible { outline: 2px solid var(--supa-black); outline-offset: 2px; }

/* ---------- inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12px; font-weight: 500; color: var(--supa-black-80); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 16px; /* 16px+ prevents iOS zoom-on-focus */
  padding: 12px 14px;
  border: 1.5px solid var(--supa-black-20);
  border-radius: var(--r-sm);
  background: var(--supa-white-pure);
  color: var(--supa-black);
  transition: border-color var(--dur-fast) ease-out, box-shadow var(--dur-fast) ease-out;
  outline: none;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--supa-black);
  box-shadow: 0 0 0 3px var(--supa-yellow);
}

/* ---------- tiles & cards ---------- */
.tile {
  border-radius: var(--r-xl);
  padding: 24px;
}
.tile-yellow { background: var(--supa-yellow); color: var(--supa-black); }
.card {
  background: var(--supa-white-pure);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 500;
}
.chip-on { background: var(--supa-black); color: var(--supa-yellow); }
.chip-off { background: var(--supa-white-pure); color: var(--supa-black); border: 1px solid var(--supa-black-20); }

/* ---------- modal ---------- */
.modal-scrim {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(49, 49, 49, 0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
.modal-scrim.open { opacity: 1; pointer-events: auto; }
.modal {
  width: 100%; max-width: 380px;
  border-radius: var(--r-2xl);
  padding: 32px 24px;
  text-align: center;
  transform: translateY(16px) scale(0.97);
  transition: transform var(--dur-base) var(--ease-out);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
}
.modal-scrim.open .modal { transform: translateY(0) scale(1); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(80px);
  background: var(--supa-black); color: var(--supa-white);
  padding: 12px 20px; border-radius: var(--r-pill);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-pop);
  transition: transform var(--dur-base) var(--ease-out);
  z-index: 90;
  max-width: calc(100vw - 40px);
  text-align: center;
}
.toast.show { transform: translateX(-50%) translateY(0); }