/* @quizlane/ui — design tokens + component styles. Generated by scripts/build-css.mjs. */

/* QuizLane design tokens — the single source of truth for color, type, space, radius.
   Every component styles itself from these var(--ql-*) custom properties; layouts the
   design agent builds should reach for the same tokens. */
:root {
  /* Brand — confident indigo, used for primary actions and accents */
  --ql-color-brand: #4f46e5;
  --ql-color-brand-strong: #4338ca;
  --ql-color-brand-soft: #eef2ff;
  --ql-color-brand-fg: #ffffff;

  /* Accent — amber for streaks / XP / rewards */
  --ql-color-accent: #f59e0b;
  --ql-color-accent-soft: #fef3c7;
  --ql-color-accent-fg: #7c2d12;

  /* Semantic answer states */
  --ql-color-correct: #16a34a;
  --ql-color-correct-soft: #dcfce7;
  --ql-color-wrong: #dc2626;
  --ql-color-wrong-soft: #fee2e2;

  /* Neutrals / surfaces */
  --ql-color-surface: #ffffff;
  --ql-color-surface-muted: #f8fafc;
  --ql-color-border: #e2e8f0;
  --ql-color-text: #0f172a;
  --ql-color-text-muted: #64748b;
  --ql-color-text-onbrand: #ffffff;

  /* Typography */
  --ql-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ql-font-size-xs: 0.75rem;
  --ql-font-size-sm: 0.875rem;
  --ql-font-size-md: 1rem;
  --ql-font-size-lg: 1.25rem;
  --ql-font-size-xl: 1.5rem;
  --ql-font-size-2xl: 2rem;
  --ql-font-size-3xl: 2.75rem;
  --ql-font-weight-normal: 400;
  --ql-font-weight-medium: 500;
  --ql-font-weight-semibold: 600;
  --ql-font-weight-bold: 700;

  /* Spacing scale */
  --ql-space-1: 4px;
  --ql-space-2: 8px;
  --ql-space-3: 12px;
  --ql-space-4: 16px;
  --ql-space-5: 24px;
  --ql-space-6: 32px;
  --ql-space-7: 48px;

  /* Radius */
  --ql-radius-sm: 8px;
  --ql-radius-md: 12px;
  --ql-radius-lg: 16px;
  --ql-radius-full: 999px;

  /* Elevation */
  --ql-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ql-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --ql-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
}

/* QuizLane component styles. Class vocabulary is stable (ql-<block>__<element>--<modifier>);
   the design agent composes layouts with these classes + the var(--ql-*) tokens. */

.ql-root {
  font-family: var(--ql-font-sans);
  color: var(--ql-color-text);
  line-height: 1.5;
}
*[class^="ql-"],
*[class*=" ql-"] {
  box-sizing: border-box;
}

/* ---- Button ---- */
.ql-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ql-space-2);
  font-family: var(--ql-font-sans);
  font-weight: var(--ql-font-weight-semibold);
  border: 1px solid transparent;
  border-radius: var(--ql-radius-full);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  text-decoration: none;
  white-space: nowrap;
}
.ql-btn:active { transform: translateY(1px); }
.ql-btn--sm { font-size: var(--ql-font-size-sm); padding: 6px 14px; }
.ql-btn--md { font-size: var(--ql-font-size-md); padding: 10px 20px; }
.ql-btn--lg { font-size: var(--ql-font-size-lg); padding: 14px 28px; }
.ql-btn--primary { background: var(--ql-color-brand); color: var(--ql-color-brand-fg); }
.ql-btn--primary:hover { background: var(--ql-color-brand-strong); }
.ql-btn--secondary { background: var(--ql-color-brand-soft); color: var(--ql-color-brand-strong); }
.ql-btn--secondary:hover { background: #e0e7ff; }
.ql-btn--ghost { background: transparent; color: var(--ql-color-text); border-color: var(--ql-color-border); }
.ql-btn--ghost:hover { background: var(--ql-color-surface-muted); }
.ql-btn--block { display: flex; width: 100%; }
.ql-btn[disabled], .ql-btn--disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- Badge ---- */
.ql-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-space-1);
  font-size: var(--ql-font-size-xs);
  font-weight: var(--ql-font-weight-semibold);
  padding: 3px 10px;
  border-radius: var(--ql-radius-full);
  line-height: 1.4;
}
.ql-badge--brand { background: var(--ql-color-brand-soft); color: var(--ql-color-brand-strong); }
.ql-badge--accent { background: var(--ql-color-accent-soft); color: var(--ql-color-accent-fg); }
.ql-badge--correct { background: var(--ql-color-correct-soft); color: var(--ql-color-correct); }
.ql-badge--wrong { background: var(--ql-color-wrong-soft); color: var(--ql-color-wrong); }
.ql-badge--neutral { background: var(--ql-color-surface-muted); color: var(--ql-color-text-muted); }

/* ---- Tag ---- */
.ql-tag {
  display: inline-flex;
  align-items: center;
  font-size: var(--ql-font-size-sm);
  color: var(--ql-color-text-muted);
  background: var(--ql-color-surface-muted);
  border: 1px solid var(--ql-color-border);
  border-radius: var(--ql-radius-sm);
  padding: 4px 10px;
}

/* ---- Card ---- */
.ql-card {
  background: var(--ql-color-surface);
  border: 1px solid var(--ql-color-border);
  border-radius: var(--ql-radius-lg);
  padding: var(--ql-space-5);
}
.ql-card--flat { box-shadow: none; }
.ql-card--raised { box-shadow: var(--ql-shadow-md); }
.ql-card--interactive { cursor: pointer; transition: box-shadow 0.15s ease, transform 0.1s ease; }
.ql-card--interactive:hover { box-shadow: var(--ql-shadow-lg); transform: translateY(-2px); }

/* ---- ProgressBar ---- */
.ql-progress { width: 100%; }
.ql-progress__track {
  width: 100%;
  height: 10px;
  background: var(--ql-color-surface-muted);
  border-radius: var(--ql-radius-full);
  overflow: hidden;
}
.ql-progress__fill {
  height: 100%;
  background: var(--ql-color-brand);
  border-radius: var(--ql-radius-full);
  transition: width 0.3s ease;
}
.ql-progress--accent .ql-progress__fill { background: var(--ql-color-accent); }
.ql-progress--correct .ql-progress__fill { background: var(--ql-color-correct); }
.ql-progress__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--ql-font-size-sm);
  color: var(--ql-color-text-muted);
  margin-bottom: var(--ql-space-2);
}
.ql-progress__value { font-weight: var(--ql-font-weight-semibold); color: var(--ql-color-text); }

/* ---- CategoryCard ---- */
.ql-categorycard {
  display: flex;
  flex-direction: column;
  gap: var(--ql-space-3);
  background: var(--ql-color-surface);
  border: 1px solid var(--ql-color-border);
  border-radius: var(--ql-radius-lg);
  padding: var(--ql-space-5);
  box-shadow: var(--ql-shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
}
.ql-categorycard--interactive { cursor: pointer; }
.ql-categorycard--interactive:hover {
  box-shadow: var(--ql-shadow-md);
  transform: translateY(-2px);
  border-color: var(--ql-color-brand);
}
.ql-categorycard__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border-radius: var(--ql-radius-md);
  background: var(--ql-color-brand-soft);
}
.ql-categorycard__title { font-size: var(--ql-font-size-lg); font-weight: var(--ql-font-weight-bold); margin: 0; }
.ql-categorycard__subtitle { font-size: var(--ql-font-size-sm); color: var(--ql-color-text-muted); margin: 0; }
.ql-categorycard__footer { display: flex; align-items: center; gap: var(--ql-space-2); margin-top: var(--ql-space-1); }

/* ---- FeatureCard ---- */
.ql-featurecard {
  display: flex;
  flex-direction: column;
  gap: var(--ql-space-3);
  padding: var(--ql-space-5);
  background: var(--ql-color-surface);
  border-radius: var(--ql-radius-lg);
  border: 1px solid var(--ql-color-border);
}
.ql-featurecard__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: var(--ql-radius-md);
  background: var(--ql-color-accent-soft);
}
.ql-featurecard__title { font-size: var(--ql-font-size-lg); font-weight: var(--ql-font-weight-semibold); margin: 0; }
.ql-featurecard__body { font-size: var(--ql-font-size-md); color: var(--ql-color-text-muted); margin: 0; }

/* ---- StatCard ---- */
.ql-statcard {
  display: flex;
  flex-direction: column;
  gap: var(--ql-space-1);
  padding: var(--ql-space-5);
  background: var(--ql-color-surface);
  border: 1px solid var(--ql-color-border);
  border-radius: var(--ql-radius-lg);
}
.ql-statcard__label { font-size: var(--ql-font-size-sm); color: var(--ql-color-text-muted); }
.ql-statcard__value { font-size: var(--ql-font-size-2xl); font-weight: var(--ql-font-weight-bold); }
.ql-statcard__delta { font-size: var(--ql-font-size-sm); font-weight: var(--ql-font-weight-semibold); }
.ql-statcard__delta--up { color: var(--ql-color-correct); }
.ql-statcard__delta--down { color: var(--ql-color-wrong); }

/* ---- StreakCounter ---- */
.ql-streak {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-space-2);
  padding: 8px 16px;
  background: var(--ql-color-accent-soft);
  border-radius: var(--ql-radius-full);
}
.ql-streak__flame { font-size: 20px; }
.ql-streak__count { font-size: var(--ql-font-size-lg); font-weight: var(--ql-font-weight-bold); color: var(--ql-color-accent-fg); }
.ql-streak__label { font-size: var(--ql-font-size-sm); color: var(--ql-color-accent-fg); }

/* ---- XPBadge ---- */
.ql-xp {
  display: inline-flex;
  align-items: center;
  gap: var(--ql-space-2);
  padding: 6px 14px;
  border-radius: var(--ql-radius-full);
  background: var(--ql-color-brand);
  color: var(--ql-color-text-onbrand);
}
.ql-xp__star { font-size: 16px; }
.ql-xp__value { font-weight: var(--ql-font-weight-bold); }
.ql-xp__label { font-size: var(--ql-font-size-sm); opacity: 0.85; }

/* ---- QuizCard ---- */
.ql-quiz {
  display: flex;
  flex-direction: column;
  gap: var(--ql-space-4);
  background: var(--ql-color-surface);
  border: 1px solid var(--ql-color-border);
  border-radius: var(--ql-radius-lg);
  padding: var(--ql-space-6);
  box-shadow: var(--ql-shadow-md);
  max-width: 560px;
}
.ql-quiz__header { display: flex; align-items: center; justify-content: space-between; gap: var(--ql-space-3); }
.ql-quiz__progress { font-size: var(--ql-font-size-sm); color: var(--ql-color-text-muted); }
.ql-quiz__question { font-size: var(--ql-font-size-xl); font-weight: var(--ql-font-weight-semibold); margin: 0; }
.ql-quiz__options { display: flex; flex-direction: column; gap: var(--ql-space-3); }

/* ---- AnswerOption ---- */
.ql-answer {
  display: flex;
  align-items: center;
  gap: var(--ql-space-3);
  width: 100%;
  text-align: left;
  background: var(--ql-color-surface);
  border: 1.5px solid var(--ql-color-border);
  border-radius: var(--ql-radius-md);
  padding: 14px 16px;
  font-size: var(--ql-font-size-md);
  font-family: var(--ql-font-sans);
  color: var(--ql-color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ql-answer:hover { border-color: var(--ql-color-brand); }
.ql-answer__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--ql-radius-full);
  background: var(--ql-color-surface-muted);
  font-size: var(--ql-font-size-sm);
  font-weight: var(--ql-font-weight-bold);
}
.ql-answer__text { flex: 1; }
.ql-answer__mark { font-size: 18px; }
.ql-answer--selected { border-color: var(--ql-color-brand); background: var(--ql-color-brand-soft); }
.ql-answer--correct { border-color: var(--ql-color-correct); background: var(--ql-color-correct-soft); }
.ql-answer--correct .ql-answer__key { background: var(--ql-color-correct); color: #fff; }
.ql-answer--wrong { border-color: var(--ql-color-wrong); background: var(--ql-color-wrong-soft); }
.ql-answer--wrong .ql-answer__key { background: var(--ql-color-wrong); color: #fff; }
.ql-answer--disabled { cursor: default; }

/* ---- ExplanationCard ---- */
.ql-explanation {
  display: flex;
  flex-direction: column;
  gap: var(--ql-space-2);
  border-left: 4px solid var(--ql-color-brand);
  background: var(--ql-color-brand-soft);
  border-radius: var(--ql-radius-md);
  padding: var(--ql-space-4) var(--ql-space-5);
}
.ql-explanation__head { display: flex; align-items: center; gap: var(--ql-space-2); font-weight: var(--ql-font-weight-bold); color: var(--ql-color-brand-strong); }
.ql-explanation__title { font-size: var(--ql-font-size-md); }
.ql-explanation__body { font-size: var(--ql-font-size-md); color: var(--ql-color-text); margin: 0; }

/* ---- Testimonial ---- */
.ql-testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--ql-space-4);
  background: var(--ql-color-surface);
  border: 1px solid var(--ql-color-border);
  border-radius: var(--ql-radius-lg);
  padding: var(--ql-space-5);
  box-shadow: var(--ql-shadow-sm);
}
.ql-testimonial__stars { color: var(--ql-color-accent); font-size: var(--ql-font-size-lg); letter-spacing: 2px; }
.ql-testimonial__quote { font-size: var(--ql-font-size-lg); margin: 0; color: var(--ql-color-text); }
.ql-testimonial__author { display: flex; align-items: center; gap: var(--ql-space-3); }
.ql-testimonial__avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--ql-radius-full);
  background: var(--ql-color-brand);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--ql-font-weight-bold);
}
.ql-testimonial__name { font-weight: var(--ql-font-weight-semibold); }
.ql-testimonial__meta { font-size: var(--ql-font-size-sm); color: var(--ql-color-text-muted); }

/* ---- Hero ---- */
.ql-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ql-space-5);
  padding: var(--ql-space-7) var(--ql-space-5);
  background: linear-gradient(180deg, var(--ql-color-brand-soft), var(--ql-color-surface));
  border-radius: var(--ql-radius-lg);
}
.ql-hero__eyebrow { color: var(--ql-color-brand-strong); font-weight: var(--ql-font-weight-semibold); }
.ql-hero__title { font-size: var(--ql-font-size-3xl); font-weight: var(--ql-font-weight-bold); margin: 0; max-width: 18ch; line-height: 1.1; }
.ql-hero__subtitle { font-size: var(--ql-font-size-lg); color: var(--ql-color-text-muted); margin: 0; max-width: 52ch; }
.ql-hero__actions { display: flex; gap: var(--ql-space-3); flex-wrap: wrap; justify-content: center; }