/* Qloovi signature v1 (2026-10-18). Copy into a product and load it BEFORE the product's own CSS.
   The product then sets only its own palette (--q-paper, --q-ink, --q-accent, ...) and display font.
   Rules and reasoning: C:\wamp64\www\QClaude\DESIGN-GUIDE.md. Nunito woff2: copy from adventofplay/app/assets/fonts/. */

@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/nunito.woff2') format('woff2'); /* adjust path per product */
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  /* ---- Product sets these (defaults shown) ---- */
  --q-paper: #fffaf2;          /* page background: warm off-white, never pure #fff */
  --q-card: #ffffff;           /* cards and sheets */
  --q-ink: #2b2b33;            /* body text: dark, slightly tinted, never pure black */
  --q-muted: #66606e;          /* secondary text, must reach 4.5:1 on --q-paper */
  --q-line: #e8e1d6;           /* hairlines and 1-2px borders */
  --q-accent: #1f6b4f;         /* primary actions; text on it must reach 4.5:1 */
  --q-on-accent: #ffffff;
  --q-soft: #f3ece0;           /* tinted boxes, icon tokens */
  --q-focus: var(--q-ink);     /* any colour with >= 3:1 against --q-paper (accent usually works) */
  --q-shadow-tint: 43 35 30;   /* RGB of the product ink, used to tint shadows */
  --q-display: 'Nunito', system-ui, sans-serif; /* product's own display font goes here */
  --q-button-radius: var(--q-radius-pill); /* play products: pill. Tool products: var(--q-radius-md) */

  /* ---- Shared signature (do not change per product) ---- */
  --q-font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --q-radius-xs: 6px;
  --q-radius-sm: 10px;
  --q-radius-md: 14px;
  --q-radius-card: 18px;
  --q-radius-lg: 28px;
  --q-radius-pill: 999px;
  --q-shadow-card: 0 1px 2px rgb(var(--q-shadow-tint) / .06), 0 10px 28px -14px rgb(var(--q-shadow-tint) / .30);
  --q-shadow-lift: 0 6px 16px -8px rgb(var(--q-shadow-tint) / .40);
  --q-focus-width: 3px;
  --q-focus-offset: 2px;
  --q-tap: 44px;
  --q-ease: cubic-bezier(.2, .8, .2, 1);
  --q-fast: 120ms;
  --q-base: 200ms;
  --q-celebrate: 400ms;
  --q-pro-bg: #f2b632;
  --q-pro-ink: #3a2a00;
  --q-icon: 1.25em;            /* Lucide icons beside text */
}

body { font-family: var(--q-font-ui); color: var(--q-ink); background: var(--q-paper); line-height: 1.55; }

/* Focus ring: identical behaviour everywhere */
:focus-visible { outline: var(--q-focus-width) solid var(--q-focus); outline-offset: var(--q-focus-offset); }

/* Buttons: feel is shared, shape and colour are the product's */
.q-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: var(--q-tap); padding: .65em 1.2em;
  font: 800 1rem/1.2 var(--q-font-ui); letter-spacing: 0;
  border-radius: var(--q-button-radius); border: 2px solid var(--q-line);
  background: var(--q-card); color: var(--q-ink); text-decoration: none; cursor: pointer;
  transition: transform var(--q-fast) var(--q-ease), box-shadow var(--q-fast) var(--q-ease), background-color var(--q-fast);
}
.q-btn:hover { transform: translateY(-1px); box-shadow: var(--q-shadow-lift); }
.q-btn:active { transform: translateY(1px); box-shadow: none; }
.q-btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.q-btn--primary { background: var(--q-accent); border-color: var(--q-accent); color: var(--q-on-accent); min-height: 48px; }
.q-btn svg { width: var(--q-icon); height: var(--q-icon); flex: none; }

/* Card */
.q-card { background: var(--q-card); border: 1px solid var(--q-line); border-radius: var(--q-radius-card); box-shadow: var(--q-shadow-card); }

/* Eyebrow above headlines */
.q-eyebrow { font: 900 .78rem/1.2 var(--q-font-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--q-accent); margin: 0 0 .7rem; }

/* Two-beat headline: the payoff in the accent colour (italic if the display font is a serif) */
.q-payoff { color: var(--q-accent); }

/* Icon token: replaces an emoji badge (Lucide icon in a soft circle) */
.q-token { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--q-soft); color: var(--q-accent); flex: none; }
.q-token svg { width: 1.35rem; height: 1.35rem; }

/* Pro tag */
.q-pro { display: inline-flex; align-items: center; gap: .3em; font: 900 .7rem/1 var(--q-font-ui); letter-spacing: .05em; text-transform: uppercase; background: var(--q-pro-bg); color: var(--q-pro-ink); border-radius: var(--q-radius-pill); padding: .3em .7em; }

/* Made by Qloovi */
.q-madeby { display: inline-flex; align-items: center; gap: .45em; font: 700 .85rem/1.3 var(--q-font-ui); color: var(--q-muted); text-decoration: none; }
.q-madeby svg { height: .8em; width: auto; }
.q-madeby:hover { color: var(--q-ink); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .q-btn:hover, .q-btn:active { transform: none; }
}