/* ==========================================================================
   styles.css — GLOBAL BASE (load first, on every page)
   Tokens, reset, body margin, shared button. Component/page CSS builds on this.
   ========================================================================== */
:root{
  --dq-ink:#000;--dq-paper:#f6f4f0;--dq-violet:#4c1aa6;--dq-coral:#ff8660;--dq-teal:#4fc4c9;
  --dq-sky:#a3dcdc;--dq-sun:#e8e384;--dq-lilac:#8068c4;--dq-yellow:#f3e67a;
  --dq-head:"Poppins",Arial,sans-serif;--dq-body:"Source Sans 3",Arial,sans-serif;
  --dq-container:1100px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--dq-paper);color:var(--dq-ink);font:400 17px/1.6 var(--dq-body);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--dq-violet);outline-offset:3px}

/* shared button: .dq-btn + one modifier (--teal | --invert | --violet) */
.dq-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;font:600 13.5px/1 var(--dq-head);color:var(--dq-ink);background:var(--dq-paper);border:2px solid var(--dq-ink);border-radius:4px;box-shadow:3px 3px 0 var(--dq-ink);white-space:nowrap;cursor:pointer;transition:transform .15s}
.dq-btn:hover{transform:translate(-1px,-1px)}
.dq-btn i{font-style:normal}
.dq-btn--teal{background:var(--dq-teal)}
.dq-btn--invert{background:#000;color:#fff;border-color:#fff;box-shadow:3px 3px 0 #fff}
.dq-btn--violet{background:var(--dq-violet);color:#fff;border-color:#fff;box-shadow:3px 3px 0 #fff}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}