/* ============================================================
   Design tokens — single source of truth for the app's OWN chrome
   (buttons, panels, cards, marketing pages, account/pricing UI).

   Does NOT touch the WhatsApp-mockup-fidelity tokens (--wa-*, --sysfont
   in base.css) or keyboard.css's hardcoded iOS system colors — those
   render the actual product being created and must stay pixel-accurate
   to real WhatsApp/iOS, independent of how the app around them looks.

   Builds on the palette already designed (but never wired up) in the
   dormant app.css --as-* tokens: a light, cool, shadow-based "premium
   SaaS" look, replacing base.css's older thick-border/cream palette.
   ============================================================ */
:root{
  /* ---- color ---- */
  --t-bg:#eef0f4;
  --t-surface:#f6f7f9;
  --t-card:#ffffff;
  --t-ink:#15171c;
  --t-sub:#4b4f58;
  --t-muted:#8a8f99;
  --t-line:#e7e9ee;
  --t-accent:#1f9d57;
  --t-accent-ink:#ffffff;
  --t-accent-soft:#e6f6ec;
  --t-accent-d:#16803f;
  --t-danger:#e0364f;
  --t-danger-soft:#fdecef;
  --t-warn:#b8860b;
  --t-gradient:linear-gradient(135deg,#1f9d57,#17b88a);

  /* ---- typography ---- */
  --t-font-display:"Space Grotesk",system-ui,sans-serif;
  --t-font-body:"Inter",system-ui,sans-serif;
  --t-fs-xs:12px; --t-fs-sm:13px; --t-fs-base:15px; --t-fs-md:17px;
  --t-fs-lg:20px; --t-fs-xl:26px; --t-fs-2xl:34px; --t-fs-3xl:44px;
  --t-fw-regular:400; --t-fw-medium:500; --t-fw-semibold:600; --t-fw-bold:700;
  --t-lh-tight:1.15; --t-lh-normal:1.5;

  /* ---- spacing scale (4px base) ---- */
  --t-sp-1:4px; --t-sp-2:8px; --t-sp-3:12px; --t-sp-4:16px;
  --t-sp-5:20px; --t-sp-6:24px; --t-sp-8:32px; --t-sp-10:40px;
  --t-sp-12:48px; --t-sp-16:64px; --t-sp-20:80px;

  /* ---- radius ---- */
  --t-radius-sm:8px; --t-radius-md:12px; --t-radius-lg:18px; --t-radius-xl:24px;
  --t-radius-pill:999px; --t-radius-full:50%;

  /* ---- shadow (elevation scale) ---- */
  --t-shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --t-shadow-md:0 1px 3px rgba(16,24,40,.06),0 6px 16px rgba(16,24,40,.06);
  --t-shadow-lg:0 4px 10px rgba(16,24,40,.06),0 16px 40px rgba(16,24,40,.10);
  --t-shadow-focus:0 0 0 3px rgba(31,157,87,.25);

  /* ---- control sizing ---- */
  --t-h-btn-sm:32px; --t-h-btn-md:40px; --t-h-btn-lg:48px;
  --t-h-input:42px;

  /* ---- motion ---- */
  --t-dur-fast:120ms; --t-dur-base:200ms; --t-dur-slow:400ms;
  --t-ease:cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce){
  :root{ --t-dur-fast:0ms; --t-dur-base:0ms; --t-dur-slow:0ms; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ---- shared primitives, reused by every new page/component ---- */
.t-card{background:var(--t-card);border-radius:var(--t-radius-lg);box-shadow:var(--t-shadow-md);
  border:1px solid var(--t-line)}

.t-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--t-h-btn-md);padding:0 var(--t-sp-5);border:none;border-radius:var(--t-radius-md);
  font-family:var(--t-font-body);font-size:var(--t-fs-sm);font-weight:var(--t-fw-semibold);
  cursor:pointer;transition:transform var(--t-dur-fast) var(--t-ease),
  box-shadow var(--t-dur-fast) var(--t-ease),opacity var(--t-dur-fast) var(--t-ease);
  background:var(--t-card);color:var(--t-ink);box-shadow:var(--t-shadow-sm)}
.t-btn:hover{box-shadow:var(--t-shadow-md)}
.t-btn:active{transform:scale(.97)}
.t-btn:focus-visible{outline:none;box-shadow:var(--t-shadow-focus)}
.t-btn[disabled]{opacity:.5;cursor:not-allowed;pointer-events:none}
.t-btn.t-btn-primary{background:var(--t-gradient);color:var(--t-accent-ink)}
.t-btn.t-btn-secondary{background:var(--t-accent-soft);color:var(--t-accent-d)}
.t-btn.t-btn-ghost{background:transparent;box-shadow:none;color:var(--t-sub)}
.t-btn.t-btn-ghost:hover{background:var(--t-surface)}
.t-btn.t-btn-danger{background:var(--t-danger-soft);color:var(--t-danger)}
.t-btn.t-btn-lg{height:var(--t-h-btn-lg);padding:0 var(--t-sp-6);font-size:var(--t-fs-base)}
.t-btn.t-btn-sm{height:var(--t-h-btn-sm);padding:0 var(--t-sp-3);font-size:var(--t-fs-xs)}
.t-btn.t-btn-block{width:100%}

.t-input{width:100%;height:var(--t-h-input);border:1.5px solid var(--t-line);background:var(--t-card);
  border-radius:var(--t-radius-md);padding:0 var(--t-sp-3);font-family:var(--t-font-body);
  font-size:var(--t-fs-base);color:var(--t-ink);transition:border-color var(--t-dur-fast) var(--t-ease)}
.t-input:focus{outline:none;border-color:var(--t-accent);box-shadow:var(--t-shadow-focus)}

.t-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-fs-xs);font-weight:var(--t-fw-semibold);
  padding:3px var(--t-sp-2);border-radius:var(--t-radius-pill);background:var(--t-accent-soft);color:var(--t-accent-d)}

.t-h1{font-family:var(--t-font-display);font-size:var(--t-fs-3xl);font-weight:var(--t-fw-bold);line-height:var(--t-lh-tight);letter-spacing:-.01em}
.t-h2{font-family:var(--t-font-display);font-size:var(--t-fs-2xl);font-weight:var(--t-fw-bold);line-height:var(--t-lh-tight)}
.t-h3{font-family:var(--t-font-display);font-size:var(--t-fs-lg);font-weight:var(--t-fw-bold)}
.t-sub{color:var(--t-sub);font-size:var(--t-fs-base);line-height:var(--t-lh-normal)}
.t-muted{color:var(--t-muted)}

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

/* focus-visible ring for any interactive element inside a .t-* surface */
.t-card a:focus-visible,.t-card button:focus-visible,.t-card input:focus-visible{
  outline:none;box-shadow:var(--t-shadow-focus)}

/* Consistent keyboard-focus ring for the editor's pre-token controls (.btn,
   .seg, .vbtn, .type-btn, .bar-btn, gallery/avatar/swatch pickers) — these
   previously fell back to the browser's default outline, which is
   inconsistent with the rest of the UI and gets visually clipped on controls
   that sit inside an overflow:hidden container (e.g. .gslot-x). */
.btn:focus-visible,.seg button:focus-visible,.vbtn:focus-visible,.type-btn:focus-visible,
.bar-btn:focus-visible,.gslot:focus-visible,.gslot-x:focus-visible,.av:focus-visible,
.swatches button:focus-visible,.vgen-btn:focus-visible,#mobileTabs button:focus-visible,
#mobileStickyBar button:focus-visible,.plan-req:focus-visible,.edb:focus-visible,
.chip:focus-visible{
  outline:none;box-shadow:var(--t-shadow-focus)}

/* ---- upgrade modal (used from index.html + upgrade-modal.js) ---- */
.upgrade-modal{position:fixed;inset:0;z-index:20000;background:rgba(15,17,21,.55);
  display:none;align-items:center;justify-content:center;padding:var(--t-sp-4);
  animation:tFadeIn var(--t-dur-base) var(--t-ease)}
.upgrade-modal.on{display:flex}
.upgrade-modal-box{position:relative;max-width:520px;width:100%;padding:var(--t-sp-6);
  box-shadow:var(--t-shadow-lg);animation:tPopIn var(--t-dur-base) var(--t-ease)}
@keyframes tFadeIn{from{opacity:0}to{opacity:1}}
@keyframes tPopIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:640px){.upgrade-modal-box{flex-direction:column}#upgradeModalPlans{flex-direction:column}}