/* ============================================================
   Soberya Web — Pop Kẹo design system
   Tokens & primitives shared with the iOS app.
   Light is default; dark applies via [data-theme="dark"].
   ============================================================ */

/* ---------- Fonts (Google Fonts, SIL OFL 1.1) ---------- */
/* <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@500;600;700;800;900&family=Paytone+One&display=swap" rel="stylesheet"> */

:root{
  /* surfaces */
  --sb-desk:#EFE6D7;          /* outside the page frame / body bg */
  --sb-page:#FFF2E3;          /* page background */
  --sb-surface:#FFF9F0;       /* cards, header, panels */
  --sb-surface-2:#FFFFFF;     /* floating chips over photos */
  --sb-hairline:#E8D9C6;      /* non-structural dividers */

  /* ink & text */
  --sb-ink:#33254A;           /* all structural borders + headings */
  --sb-text:#6E6858;          /* body copy */
  --sb-text-dim:#8B7A93;      /* secondary / inactive nav */
  --sb-text-faint:#B9A6C4;    /* eyebrow labels, meta */

  /* brand */
  --sb-primary:#FF6257;
  --sb-primary-ink:#D63B30;   /* primary as text/link */
  --sb-primary-ink-hover:#A82A21;
  --sb-accent:#FFB930;
  --sb-success:#2FBF8F;
  --sb-purple:#7C5CFF;
  --sb-pink:#FF8FB1;

  /* tinted panels */
  --sb-warm:#FFF1D6;   --sb-warm-border:#E0A93E; --sb-warm-ink:#7A5A16; --sb-warm-text:#8C6222;
  --sb-mint:#DFF6EE;   --sb-mint-ink:#1E7A5B;
  --sb-lilac:#EFE0FF;  --sb-lilac-ink:#5C4A75;
  --sb-sand:#FFD59A;   /* mascot playground ground */

  /* footer is dark in BOTH themes */
  --sb-footer:#2B2040; --sb-footer-line:#4A3A63; --sb-footer-text:#FFF2E3; --sb-footer-dim:#7A6693;
  --sb-footer-toggle:#1F1730;

  /* structure */
  --sb-bw:3px;                /* structural border width: 3 / 2.5 / 2 by scale */
  --sb-r-sm:11px; --sb-r-md:14px; --sb-r-lg:20px; --sb-r-xl:24px; --sb-r-2xl:28px;
  --sb-shadow-sm:0 3px 0 var(--sb-ink);
  --sb-shadow-md:0 4px 0 var(--sb-ink);
  --sb-shadow-lg:0 6px 0 var(--sb-ink);
  --sb-shadow-xl:0 8px 0 var(--sb-ink);

  /* layout */
  --sb-max:1180px;
  --sb-gutter:50px;
  --sb-section-y:76px;

  /* type */
  --sb-font-display:'Paytone One',Nunito,sans-serif;
  --sb-font-body:Nunito,-apple-system,'Segoe UI',sans-serif;
}

[data-theme="dark"]{
  --sb-desk:#140B22;
  --sb-page:#1A1128;
  --sb-surface:#241A33;
  --sb-surface-2:#2A1E3D;
  --sb-hairline:#3A2A50;

  --sb-ink:#140B22;            /* borders stay near-black in dark */
  --sb-text:#B9A8C8;
  --sb-text-dim:#B9A8C8;
  --sb-text-faint:#8C7BA3;

  --sb-primary:#FF7468;
  --sb-primary-ink:#FF9086;
  --sb-primary-ink-hover:#FFB3AC;
  --sb-accent:#FFC24A;
  --sb-success:#3BD8A4;
  --sb-purple:#9D7CFF;

  --sb-warm:#2A1E3D; --sb-warm-border:#FFC24A; --sb-warm-ink:#FFC24A; --sb-warm-text:#E8C98A;
  --sb-mint:#1E3A31;  --sb-mint-ink:#3BD8A4;
  --sb-lilac:#2A1E3D; --sb-lilac-ink:#C7B4E8;
  --sb-sand:#3A2A50;

  --sb-footer:#241A33; --sb-footer-line:#4A3A63; --sb-footer-text:#FFEEDD; --sb-footer-dim:#7A6693;
  --sb-footer-toggle:#1A1128;
}

/* headings & cream text in dark mode use this instead of --sb-ink */
:root{ --sb-heading:#33254A; }
[data-theme="dark"]{ --sb-heading:#FFEEDD; }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--sb-page);
  color:var(--sb-text);
  font-family:var(--sb-font-body);
  font-weight:700;
  font-size:17px;
  line-height:1.7;
  text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--sb-primary-ink);font-weight:800;text-decoration:none}
a:hover{color:var(--sb-primary-ink-hover);text-decoration:underline}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--sb-purple);outline-offset:3px;border-radius:6px}

/* ---------- type scale ---------- */
.sb-h1,.sb-h2,.sb-h3{font-family:var(--sb-font-display);color:var(--sb-heading);margin:0;font-weight:400}
.sb-h1{font-size:62px;line-height:1.04;text-wrap:balance}
.sb-h2{font-size:40px;line-height:1.15}
.sb-h3{font-size:24px;line-height:1.25}
.sb-card-title{font-family:var(--sb-font-display);font-size:21px;line-height:1.25;color:var(--sb-heading)}
.sb-lead{font-size:17.5px;line-height:1.7;color:var(--sb-text);max-width:520px}
.sb-small{font-size:14.5px;line-height:1.65}
.sb-eyebrow{font-weight:900;font-size:12px;letter-spacing:2px;color:var(--sb-text-faint);text-transform:uppercase}
.sb-caption{font-weight:900;font-size:11.5px;color:var(--sb-text-dim)}

/* ---------- layout ---------- */
.sb-page{max-width:var(--sb-max);margin:0 auto;background:var(--sb-page)}
.sb-section{padding:var(--sb-section-y) var(--sb-gutter)}
.sb-row{display:flex;gap:22px}
.sb-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sb-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}

/* ---------- surface / card ---------- */
.sb-card{
  background:var(--sb-surface);
  border:var(--sb-bw) solid var(--sb-ink);
  box-shadow:var(--sb-shadow-lg);
  border-radius:var(--sb-r-xl);
  padding:26px;
}
.sb-card--sm{border-width:2.5px;box-shadow:var(--sb-shadow-md);border-radius:var(--sb-r-lg);padding:18px 20px}
.sb-panel-warm{background:var(--sb-warm);border:2.5px dashed var(--sb-warm-border);border-radius:18px;padding:14px 18px;color:var(--sb-warm-text)}
.sb-panel-mint{background:var(--sb-mint);border:2px solid var(--sb-success);border-radius:var(--sb-r-sm);padding:5px 11px;color:var(--sb-mint-ink);font-weight:900;font-size:12px}

/* ---------- buttons ---------- */
.sb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:40px;padding:0 20px;
  border:2.5px solid var(--sb-ink);
  border-radius:var(--sb-r-md);
  box-shadow:var(--sb-shadow-md);
  font-family:var(--sb-font-body);font-weight:900;font-size:13.5px;
  background:var(--sb-surface-2);color:var(--sb-heading);
  cursor:pointer;transition:transform .06s,box-shadow .06s;
  text-decoration:none;
}
.sb-btn:hover{text-decoration:none}
.sb-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sb-ink)}
.sb-btn--primary{background:var(--sb-primary);color:#FFFFFF}
[data-theme="dark"] .sb-btn--primary{color:#241A33}
.sb-btn--lg{height:52px;padding:0 26px;font-size:16px;border-radius:16px;box-shadow:var(--sb-shadow-lg)}
.sb-btn--ghost{background:transparent;box-shadow:none;border-color:transparent;color:var(--sb-text-dim)}

/* ---------- header ---------- */
.sb-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--sb-gutter);
  background:var(--sb-surface);
  border-bottom:2.5px solid var(--sb-ink);
}
[data-theme="dark"] .sb-header{border-bottom-color:var(--sb-hairline)}
.sb-logo{display:flex;align-items:center;gap:11px}
/* The mark is the app's default icon — Bia Bọt on the purple tile, the same
   artwork the App Store listing shows (designs/handoff-icon-final, beer.base).
   Kept inside the system's rounded ink frame so it sits with the buttons and
   cards rather than floating as a foreign sticker. */
.sb-logo__mark{
  width:40px;height:40px;border-radius:13px;flex:none;
  background:var(--sb-purple) url("../img/app-icon.svg") center/cover no-repeat;
  border:2.5px solid var(--sb-ink);box-shadow:var(--sb-shadow-sm);
}
.sb-logo__word{font-family:var(--sb-font-display);font-size:22px;color:var(--sb-heading)}
.sb-nav{display:flex;align-items:center;gap:10px}
/* :not(.sb-btn) everywhere below — `.sb-nav a` (0,1,1) outranks `.sb-btn`
   (0,1,0), so without it these paddings and borders repaint the header CTA. */
/* line-height is pinned: at the inherited 1.7 the padded chip stands taller
   than the 40px CTA and the sticky header grows ~5px on every page. */
.sb-nav a:not(.sb-btn){
  position:relative;
  padding:8px 14px;border-radius:var(--sb-r-sm);
  border:2.5px solid transparent;
  font-weight:800;font-size:14.5px;line-height:1.15;color:var(--sb-text-dim);
  transition:color .16s ease,background-color .16s ease,border-color .16s ease,
             box-shadow .16s ease,transform .16s ease;
}
.sb-nav a:not(.sb-btn):hover{
  color:var(--sb-heading);background:var(--sb-warm);
  text-decoration:none;transform:translateY(-1px);
}
.sb-nav a:not(.sb-btn):active{transform:translateY(1px)}
.sb-nav a:not(.sb-btn)[aria-current="page"],
.sb-nav a:not(.sb-btn).is-active{
  font-weight:900;color:var(--sb-heading);
  background:var(--sb-warm);
  border-color:var(--sb-ink);
  box-shadow:var(--sb-shadow-sm);
  transform:none;
}
/* The dot is the "clearly selected" cue that survives being read at a glance:
   it grows in from nothing, so moving between pages is visible, not inferred. */
.sb-nav a:not(.sb-btn)[aria-current="page"]::after,
.sb-nav a:not(.sb-btn).is-active::after{
  content:"";position:absolute;left:50%;bottom:-7px;
  width:6px;height:6px;margin-left:-3px;border-radius:50%;
  background:var(--sb-primary);
  animation:sb-nav-dot .26s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes sb-nav-dot{from{transform:scale(0)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .sb-nav a:not(.sb-btn){transition:none}
  .sb-nav a:not(.sb-btn):hover{transform:none}
  .sb-nav a:not(.sb-btn)[aria-current="page"]::after,
  .sb-nav a:not(.sb-btn).is-active::after{animation:none}
}

/* ---------- footer (dark in both themes) ---------- */
.sb-footer{background:var(--sb-footer);color:var(--sb-footer-text);padding:44px var(--sb-gutter) 26px}
.sb-footer a{color:var(--sb-footer-text);font-weight:700;font-size:13.5px}
.sb-footer__bottom{
  display:flex;align-items:center;justify-content:space-between;gap:22px;
  border-top:2px solid var(--sb-footer-line);margin-top:28px;padding-top:20px;
}
.sb-footer__copy{font-weight:800;font-size:12.5px;color:var(--sb-footer-dim)}

/* language picker */
.sb-lang{
  display:flex;align-items:center;gap:8px;height:40px;padding:0 15px;
  border-radius:13px;background:var(--sb-footer);
  border:2.5px solid var(--sb-footer-text);
  font-weight:900;font-size:13px;color:var(--sb-footer-text);cursor:pointer;
}
.sb-lang__menu{
  position:absolute;bottom:calc(100% + 8px);left:0;min-width:190px;z-index:20;
  background:var(--sb-footer);border:2.5px solid var(--sb-footer-text);border-radius:16px;
  padding:6px;box-shadow:0 6px 0 rgba(0,0,0,.35);
}
.sb-lang__item{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 11px;border-radius:11px;font-weight:800;font-size:13px;color:var(--sb-footer-text);cursor:pointer;
}
.sb-lang__item:hover{background:var(--sb-footer-line)}
.sb-lang__item[aria-selected="true"]{background:var(--sb-primary);color:#FFFFFF}

/* theme switch — segmented, lives in the footer */
.sb-theme{
  display:flex;align-items:center;gap:3px;height:40px;padding:0 4px;flex:none;
  border-radius:13px;background:var(--sb-footer-toggle);border:2.5px solid var(--sb-footer-line);
}
.sb-theme__opt{
  display:flex;align-items:center;gap:5px;height:30px;padding:0 12px;
  border:0;border-radius:10px;background:transparent;
  font-family:var(--sb-font-body);font-weight:900;font-size:12.5px;
  color:#9C8AB5;cursor:pointer;
}
.sb-theme__opt[aria-pressed="true"]{background:#FFF2E3;color:#33254A}
[data-theme="dark"] .sb-theme__opt[aria-pressed="true"]{background:#3BD8A4;color:#0F2A21}

/* ---------- heat map (profile / calendar) ---------- */
.sb-heat{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.sb-heat i{aspect-ratio:1;border-radius:8px;background:var(--sb-hairline);display:block}
.sb-heat i[data-l="clean"]{background:var(--sb-success)}
.sb-heat i[data-l="under"]{background:var(--sb-accent)}
.sb-heat i[data-l="over"]{background:#FF8A63}

/* ---------- motion ---------- */
@keyframes sb-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes sb-sw{0%,30%{opacity:1}34%,96%{opacity:0}100%{opacity:1}}
@keyframes sb-say{
  0%{opacity:0;transform:scale(.6)}
  4%{opacity:1;transform:scale(1.1)}
  8%{transform:scale(1)}
  27%{opacity:1;transform:scale(1)}
  32%{opacity:0;transform:scale(.85)}
  100%{opacity:0;transform:scale(.6)}
}
@keyframes sb-run{0%{transform:translateX(0)}100%{transform:translateX(1330px)}}
@keyframes sb-step{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-11px) rotate(-3deg)}}
@keyframes sb-dust{0%{transform:translate(0,0) scale(.4);opacity:.9}100%{transform:translate(-34px,-12px) scale(1.5);opacity:0}}
@keyframes sb-grass{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
/* The rise is a variable because the distance has to match the block the
   bubbles are drifting through. It is the small CTA's height by default; the
   hero overrides it, and got taller when the drawn phone became a real
   screenshot — leaving the bubbles stranded in a band under it. */
@keyframes sb-bubble{
  0%{transform:translate3d(0,0,0) scale(.5);opacity:0}
  12%{opacity:.95}70%{opacity:.8}
  100%{transform:translate3d(var(--bx,14px),var(--sb-rise,-300px),0) scale(1.15);opacity:0}
}
@keyframes sb-twinkle{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes sb-shock{
  0%,58%{transform:scale(0) rotate(-14deg);opacity:0}
  66%{transform:scale(1.25) rotate(6deg);opacity:1}
  74%,88%{transform:scale(1) rotate(0);opacity:1}
  96%,100%{transform:scale(.9);opacity:0}
}

/* mascot playground */
.sb-yard{position:relative;height:252px;margin-top:22px;overflow:hidden}
.sb-yard__ground{position:absolute;left:0;right:0;bottom:0;height:44px;background:var(--sb-sand);border-top:3px solid var(--sb-warm-border)}
.sb-yard__line{position:absolute;left:0;right:0;bottom:44px;height:5px;background:var(--sb-warm-border);border-radius:3px}
.sb-mascot{position:absolute;bottom:38px;width:140px}
.sb-mascot__stack{position:relative;width:140px;height:140px;animation:sb-bob 3.2s ease-in-out infinite}
.sb-mascot__stack img{position:absolute;left:0;top:0;animation:sb-sw var(--cyc,13.5s) linear infinite}
.sb-mascot__say{position:absolute;left:-44px;right:-44px;top:-44px;text-align:center;pointer-events:none}
.sb-mascot__say span{
  display:inline-block;white-space:nowrap;opacity:0;
  background:var(--sb-surface);border:2.5px solid var(--sb-ink);box-shadow:var(--sb-shadow-sm);
  border-radius:var(--sb-r-md);padding:5px 12px;
  font-weight:900;font-size:12px;color:var(--sb-heading);
  transform-origin:50% 100%;animation:sb-say var(--cyc,13.5s) ease-in-out infinite;
}
.sb-mascot__label{position:absolute;left:-30px;right:-30px;top:148px;text-align:center;white-space:nowrap;font-weight:900;font-size:11.5px;color:var(--sb-warm-text)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .sb-mascot__stack img:not(:first-child){display:none}
  .sb-mascot__say:not(:first-of-type){display:none}
  .sb-mascot__say span{opacity:1;animation:none}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--sb-gutter:24px;--sb-section-y:52px}
  .sb-h1{font-size:40px}
  .sb-h2{font-size:30px}
  .sb-grid-3,.sb-grid-2{grid-template-columns:1fr}
  .sb-row{flex-direction:column}
  .sb-nav{display:none}
  .sb-yard{height:200px}
  .sb-footer__bottom{flex-direction:column;align-items:flex-start}
}