/* QPang Online · Brand foundation */
:root {
  /* Brand: use ink text on bright orange */
  --qp-orange: #FF921B;
  --qp-orange-hover: #F47A20;
  --qp-orange-active: #E97014;
  --qp-sky: #168DD1;
  --qp-sky-strong: #0878B8; /* white labels: 4.78:1 */
  --qp-yellow: #FFD345;

  /* Cartoon character accents: use sparingly */
  --qp-purple: #7756C7;
  --qp-pink: #E45D72;
  --qp-teal: #12A9A5;

  /* Surfaces and type */
  --qp-ink: #17243C;
  --qp-ink-soft: #45546C;
  --qp-muted: #68788E;
  --qp-paper: #FFFFFF;
  --qp-page: #F3F8FC;
  --qp-surface: #EAF2F8;
  --qp-border: #DCE6EE;
  --qp-night: #101D32;
  --qp-night-surface: #1B304C;

  /* Semantic */
  --qp-success: #087B70;
  --qp-warning: #946000;
  --qp-danger: #B93549;
  --qp-info: #0878B8;
  --qp-disabled-bg: #E2E9EF;
  --qp-disabled-text: #68788E;
  --qp-focus: #0878B8;

  --qp-radius-sm: 10px;
  --qp-radius-md: 16px;
  --qp-radius-lg: 24px;
  --qp-shadow-card: 0 12px 32px rgba(20, 42, 68, 0.07);
  --qp-shadow-pop: 0 14px 34px rgba(255, 146, 27, 0.21);
}

/* Suggested app primitives */
.qp-btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:44px; border:2px solid transparent; border-radius:12px;
  padding:.72rem 1.25rem; font-weight:800; cursor:pointer;
  transition:background .16s, transform .16s, box-shadow .16s; }
.qp-btn:focus-visible, .qp-link:focus-visible { outline:3px solid var(--qp-focus); outline-offset:3px; }
.qp-btn:active { transform:translateY(1px) scale(.99); }
.qp-btn--primary { background:var(--qp-orange); color:var(--qp-ink); box-shadow:var(--qp-shadow-pop); }
.qp-btn--primary:hover { background:var(--qp-orange-hover); }
.qp-btn--primary:active { background:var(--qp-orange-active); }
.qp-btn--secondary { background:var(--qp-sky-strong); color:#FFF; }
.qp-btn--secondary:hover { background:#06689F; }
.qp-btn--ghost { background:#FFF; color:var(--qp-ink); border-color:var(--qp-border); }
.qp-btn--ghost:hover { background:var(--qp-surface); }
.qp-btn:disabled { background:var(--qp-disabled-bg); color:var(--qp-disabled-text);
  box-shadow:none; cursor:not-allowed; }
.qp-card { background:var(--qp-paper); border:1px solid var(--qp-border);
  border-radius:var(--qp-radius-lg); box-shadow:var(--qp-shadow-card); }
.qp-card:hover { border-color:#B7D5E8; box-shadow:0 16px 40px rgba(20,42,68,.1); }
.qp-input { background:#FFF; border:1.5px solid #A9BCCB; border-radius:12px;
  padding:12px 14px; color:var(--qp-ink); min-height:44px; }
.qp-input:focus-visible { outline:3px solid rgba(8,120,184,.24); border-color:var(--qp-focus); }
.qp-nav-link { color:var(--qp-ink-soft); font-weight:700; text-decoration:none; }
.qp-nav-link:hover, .qp-nav-link[aria-current='page'] { color:var(--qp-ink); }
.qp-nav-link[aria-current='page'] { border-bottom:3px solid var(--qp-orange); }
@media (prefers-reduced-motion:reduce) { .qp-btn { transition:none; } }