/* ============================================================
   Brewly — Hand-Drawn design system
   Tokens, wobble, hard offset shadows, fonts, paper texture.
   Drives both modes via [data-theme] on the phone screen wrapper.
   ============================================================ */

/* ---- color tokens -------------------------------------------------- */
[data-theme="light"] {
  --paper:#fdfbf7; --surface:#ffffff; --ink:#2d2d2d;
  --ink-muted:rgba(45,45,45,.55); --muted:#e5e0d8;
  --accent:var(--accent-override,#ff4d4d); --on-accent:#ffffff;
  --secondary:#2d5da1; --on-secondary:#ffffff;
  --postit:#fff9c4; --postit-ink:#2d2d2d;
  --tape:rgba(45,45,45,.10);
  --dot:#e5e0d8; --shadow-ink:#2d2d2d;
  --soft-rgb:45 45 45;
  --sh-soft:3px 3px 0 0 rgb(45 45 45 / .12);
  --sh-hard:4px 4px 0 0 #2d2d2d;
  --sh-hard-lg:8px 8px 0 0 #2d2d2d;
}
[data-theme="dark"] {
  --paper:#1b1a17; --surface:#232120; --ink:#ece7dc;
  --ink-muted:rgba(236,231,220,.55); --muted:#34322c;
  --accent:var(--accent-override,#ff5c5c); --on-accent:#1b1a17;
  --secondary:#6ea8e6; --on-secondary:#14130f;
  --postit:#f5e98e; --postit-ink:#2d2d2d;
  --tape:rgba(236,231,220,.10);
  --dot:#2a2824; --shadow-ink:#ece7dc;
  --soft-rgb:236 231 220;
  --sh-soft:3px 3px 0 0 rgb(236 231 220 / .12);
  --sh-hard:4px 4px 0 0 #ece7dc;
  --sh-hard-lg:8px 8px 0 0 #ece7dc;
}

/* ---- shape tokens (the "wobble") ---------------------------------- */
:root {
  --wob-sm:18px 8px 20px 6px / 6px 20px 8px 18px;
  --wob-md:30px 12px 28px 10px / 10px 28px 12px 30px;
  --wob-lg:42px 18px 38px 16px / 16px 38px 18px 42px;
  --wob-pill:255px 15px 225px 15px / 15px 225px 15px 255px;
  --wob-blob:47% 53% 70% 30% / 45% 42% 58% 55%;
  --tilt:1; /* wobble/rotation intensity multiplier (driven by Tweaks) */
}

/* ---- shadows (per-theme values live in the [data-theme] blocks above so they
   resolve correctly even when data-theme is on a descendant wrapper) ------- */

/* ---- fonts --------------------------------------------------------- */
.font-head { font-family:'Kalam', cursive; }
.font-body { font-family:'Patrick Hand', cursive; }

/* ============================================================
   Screen scaffold
   ============================================================ */
.brewly-screen {
  font-family:'Patrick Hand', cursive;
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(var(--dot) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
  letter-spacing:.2px;
}
.brewly-screen *::selection { background:var(--accent); color:var(--on-accent); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  border-radius:var(--wob-pill);
  border:3px solid var(--ink);
  background:var(--surface);
  color:var(--ink);
  font-family:'Patrick Hand', cursive;
  font-size:21px; letter-spacing:.4px;
  min-height:54px; padding:8px 22px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:var(--sh-hard);
  cursor:pointer;
  white-space:nowrap;
  transition:transform .1s ease, box-shadow .1s ease, background .1s ease, color .1s ease;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.btn:hover:not(:disabled) {
  background:var(--accent); color:var(--on-accent);
  box-shadow:2px 2px 0 0 var(--shadow-ink);
  transform:translate(2px,2px) rotate(calc(var(--tilt) * -1deg));
}
.btn:active:not(:disabled) {
  box-shadow:none; transform:translate(4px,4px);
}
.btn:disabled {
  background:var(--muted); color:var(--ink-muted);
  border-color:var(--ink-muted);
  box-shadow:3px 3px 0 0 rgb(var(--soft-rgb) / .18);
  cursor:not-allowed;
}
.btn--accent { background:var(--accent); color:var(--on-accent); }
.btn--accent:hover:not(:disabled) { background:var(--accent); filter:brightness(1.06); color:var(--on-accent); }
.btn--secondary { background:var(--muted); }
.btn--secondary:hover:not(:disabled) { background:var(--secondary); color:var(--on-secondary); }
.btn--block { width:100%; }
.btn--ghost {
  background:transparent; border:2px dashed var(--ink-muted);
  box-shadow:none; color:var(--ink); min-height:48px; font-size:19px;
}
.btn--ghost:hover:not(:disabled) { background:transparent; color:var(--ink); transform:none; box-shadow:none; border-color:var(--ink); }

/* text link */
.tlink {
  font-family:'Patrick Hand', cursive; color:var(--secondary);
  cursor:pointer; position:relative; text-decoration:none; white-space:nowrap;
}
.tlink::after {
  content:""; position:absolute; left:0; right:0; bottom:-3px; height:6px;
  background:no-repeat center/100% 6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 6'%3E%3Cpath d='M1 3c8-4 16 4 24 0s16-4 24 0 10 1 10 1' fill='none' stroke='%232d5da1' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  opacity:0; transform:scaleX(.6); transition:opacity .12s, transform .12s;
}
.tlink:hover::after { opacity:.9; transform:scaleX(1); }

/* ============================================================
   Inputs
   ============================================================ */
.field {
  border-radius:var(--wob-sm);
  border:2px solid var(--ink);
  background:var(--surface);
  color:var(--ink);
  font-family:'Patrick Hand', cursive; font-size:21px;
  padding:13px 16px; width:100%; box-sizing:border-box;
  outline:none; min-height:52px;
  transition:border-color .12s, box-shadow .12s;
}
.field::placeholder { color:var(--ink-muted); }
.field:focus {
  border-color:var(--secondary);
  box-shadow:0 0 0 4px rgb(110 168 230 / .28);
}
[data-theme="light"] .field:focus { box-shadow:0 0 0 4px rgb(45 93 161 / .22); }
.field--err { border-color:var(--accent); }
.field--err:focus { box-shadow:0 0 0 4px rgb(255 77 77 / .25); }

.label {
  font-family:'Patrick Hand', cursive; font-size:18px;
  color:var(--ink); display:block; margin:0 0 7px 4px;
}
.help { font-family:'Patrick Hand', cursive; font-size:16px; color:var(--ink-muted); }
.err  { font-family:'Patrick Hand', cursive; font-size:16px; color:var(--accent); }

/* select with wobble */
.field--select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5l5 6 5-6' fill='none' stroke='%232d2d2d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
  padding-right:36px; cursor:pointer;
}
[data-theme="dark"] .field--select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 5l5 6 5-6' fill='none' stroke='%23ece7dc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ============================================================
   Cards / surfaces
   ============================================================ */
.card {
  background:var(--surface); border:2px solid var(--ink);
  border-radius:var(--wob-md); box-shadow:var(--sh-soft);
}
.postit {
  background:var(--postit); color:var(--postit-ink);
  border:2px solid var(--ink); border-radius:var(--wob-md);
  box-shadow:var(--sh-soft);
}

/* ============================================================
   OTP boxes
   ============================================================ */
.otp {
  width:46px; height:58px; text-align:center;
  border-radius:var(--wob-sm); border:2px solid var(--ink);
  background:var(--surface); color:var(--ink);
  font-family:'Kalam', cursive; font-weight:700; font-size:28px;
  outline:none; box-shadow:var(--sh-soft);
  transition:border-color .12s, box-shadow .12s, transform .1s;
}
.otp:focus { border-color:var(--secondary); box-shadow:0 0 0 4px rgb(45 93 161 / .22); }
[data-theme="dark"] .otp:focus { box-shadow:0 0 0 4px rgb(110 168 230 / .28); }
.otp--filled { border-color:var(--ink); }
.otp--err { border-color:var(--accent); }

/* ============================================================
   Progress (6 wobbly circles + dashed connector)
   ============================================================ */
.prog-dot {
  width:26px; height:26px; flex:0 0 auto;
  border-radius:60% 40% 55% 45% / 50% 60% 40% 50%;
  border:2.5px solid var(--ink); background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-family:'Kalam',cursive; font-weight:700; font-size:13px; color:var(--ink-muted);
  position:relative; z-index:1;
  transition:transform .15s, background .15s, color .15s;
}
.prog-dot--done { background:var(--accent); border-color:var(--ink); color:var(--on-accent); }
.prog-dot--cur  { border-width:3px; transform:scale(1.28) rotate(-4deg); color:var(--ink); background:var(--surface); }
.prog-dot--todo { opacity:.55; }
.prog-line {
  flex:1 1 auto; height:0; border-top:2.5px dashed var(--ink-muted);
  margin:0 -2px; align-self:center; opacity:.8;
}

/* ============================================================
   Topic / sticky chips
   ============================================================ */
.topic {
  background:var(--postit); color:var(--postit-ink);
  border:2px solid var(--ink); border-radius:var(--wob-md);
  box-shadow:var(--sh-soft);
  padding:14px 12px; cursor:pointer; position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:'Patrick Hand',cursive; font-size:18px;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
.topic:hover { box-shadow:var(--sh-hard); }
.topic--on {
  background:var(--accent); color:var(--on-accent); border-color:var(--ink);
  box-shadow:var(--sh-hard);
}
.topic__emoji { font-size:26px; line-height:1; }

/* country-code dropdown rows */
.country-row:hover { background: var(--muted) !important; }

/* ============================================================
   Animations
   ============================================================ */
@keyframes shake {
  0%,100%{transform:translateX(0)} 15%{transform:translateX(-7px)}
  30%{transform:translateX(6px)} 45%{transform:translateX(-5px)}
  60%{transform:translateX(4px)} 75%{transform:translateX(-2px)}
}
.shake { animation:shake .42s ease; }

@keyframes jiggle {
  0%{transform:rotate(0)} 25%{transform:rotate(-5deg) scale(1.06)}
  50%{transform:rotate(4deg)} 75%{transform:rotate(-2deg)} 100%{transform:rotate(0)}
}
.jiggle { animation:jiggle .35s ease; }

@keyframes floaty {
  0%,100%{transform:translateY(0) rotate(var(--fr,0deg))}
  50%{transform:translateY(-7px) rotate(var(--fr,0deg))}
}
.floaty { animation:floaty 3s ease-in-out infinite; }

@keyframes spin { to { transform:rotate(360deg); } }
.spin { animation:spin .8s linear infinite; transform-origin:center; }

@keyframes pageIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.page-in { animation:pageIn .22s ease both; }

@keyframes drawCheck { from { stroke-dashoffset:120; } to { stroke-dashoffset:0; } }
/* visible by default (covers reduced-motion, print, non-running contexts); animate from hidden only when motion is allowed */
.draw-check { stroke-dasharray:120; stroke-dashoffset:0; }
.check-ping, .check-ring { transform-box:fill-box; transform-origin:center; }
.check-ping { opacity:0; }
@media (prefers-reduced-motion: no-preference) {
  .draw-check { animation:drawCheck .6s cubic-bezier(.65,0,.35,1) forwards; }
  .check-ping { animation:checkPing .8s .3s ease-out both; }
  .check-ring { animation:ringIn .45s cubic-bezier(.2,1,.3,1) both; }
}
@keyframes checkPing { 0%{transform:scale(.4);opacity:.5} 100%{transform:scale(1.75);opacity:0} }
@keyframes ringIn { from{transform:rotate(-26deg) scale(.7);opacity:0} to{transform:rotate(0) scale(1);opacity:.55} }
@keyframes popIn {
  0%{transform:scale(.4) rotate(-12deg); opacity:0}
  70%{transform:scale(1.12) rotate(3deg)}
  100%{transform:scale(1) rotate(-3deg); opacity:1}
}
.pop-in { animation:popIn .5s cubic-bezier(.2,1.3,.4,1) both; }

@media (prefers-reduced-motion: reduce) {
  .shake,.jiggle,.floaty,.spin,.page-in,.pop-in { animation:none !important; }
  .btn,.topic,.otp { transition:none !important; }
}

/* utility */
.scroll-area { overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.scroll-area::-webkit-scrollbar { width:0; height:0; }