/* Soft Boutique. Canonical colors for all routes and PWA assets. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/CormorantGaramond-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0000-002F, U+003A-10FFFF;
}
/* The shipped Cormorant subset has no lnum feature. Numerals use Manrope. */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Manrope-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0030-0039;
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/SourceSerif4-400-600-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/SourceSerif4-400-600-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Manrope-400-700-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/Manrope-400-700-latin-ext.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/Manrope-400-700-latin-ext.woff2') format('woff2');
}

:root {
  --bq-background: #fbf5ea;
  --bq-surface: #fffdf8;
  --bq-raised: #fffdf8;
  --bq-soft: #e5eddf;
  --bq-hero: #e5eddf;
  --bq-text: #2d372f;
  --bq-muted: #5f6961;
  --bq-primary: #526f5d;
  --bq-primary-hover: #3f5948;
  --bq-on-primary: #fffdf8;
  --bq-cta: #eba98f;
  --bq-cta-hover: #df967b;
  --bq-on-cta: #2d372f;
  --bq-border: #778279;
  --bq-focus: #3f5948;
  --bq-focus-gap: #fffdf8;
  --bq-selection: #dce8d7;
  --bq-highlight: #dce8d7;
  --bq-link: #3f5948;
  --bq-success: #185f3e;
  --bq-success-surface: #dcefe3;
  --bq-warning: #684a0b;
  --bq-warning-surface: #f6e5b1;
  --bq-error: #8f3043;
  --bq-error-surface: #f7e3e8;
  --bq-disabled-text: #68716a;
  --bq-disabled-surface: #ece9e1;
  --bq-read-background: #fffdf8;
  --bq-read-text: #27322a;
  --bq-scrim: #17221c;
  --bq-accent-gold: #765813;
  --bq-accent-gold-surface: #f6e5b1;
  --bq-font-heading: 'Cormorant Garamond', Georgia, serif;
  --bq-font-reading: 'Source Serif 4', Georgia, serif;
  --bq-font-ui: 'Manrope', 'Segoe UI', Arial, sans-serif;
  --bq-text-min: 13px;
  --bq-text-secondary: 13px;
  --bq-text-card-title: 17px;
  --bq-text-card-description: 14px;
  --bq-stat-size: 28px;
  --bq-radius-card: 24px;
  --bq-radius-control: 14px;
  --bq-shadow: 0 6px 18px color-mix(in srgb, var(--bq-scrim) 9%, transparent);
  --bq-shadow-raised: 0 10px 24px color-mix(in srgb, var(--bq-scrim) 14%, transparent);
  --bq-overlay: color-mix(in srgb, var(--bq-scrim) 55%, transparent);
  --bq-pulse: color-mix(in srgb, var(--bq-primary) 28%, transparent);
}

:root[data-bq-theme='night'] {
  --bq-background: #17221c;
  --bq-surface: #223129;
  --bq-raised: #29382f;
  --bq-soft: #32483b;
  --bq-hero: #32483b;
  --bq-text: #faf4e9;
  --bq-muted: #c3ccc5;
  --bq-primary: #b9d3bf;
  --bq-primary-hover: #d1e2d4;
  --bq-on-primary: #1d2d23;
  --bq-cta: #e8aa92;
  --bq-cta-hover: #efb8a2;
  --bq-on-cta: #1d2d23;
  --bq-border: #91a196;
  --bq-focus: #d1e2d4;
  --bq-focus-gap: #17221c;
  --bq-selection: #3b5747;
  --bq-highlight: #3b5747;
  --bq-link: #d1e2d4;
  --bq-success: #aee5be;
  --bq-success-surface: #234332;
  --bq-warning: #f2d680;
  --bq-warning-surface: #51431f;
  --bq-error: #ffc0ca;
  --bq-error-surface: #512734;
  --bq-disabled-text: #b8c0ba;
  --bq-disabled-surface: #303a34;
  --bq-read-background: #17221c;
  --bq-read-text: #faf4e9;
  --bq-scrim: #09100c;
  --bq-accent-gold: #f0d27a;
  --bq-accent-gold-surface: #51431f;
}

html[data-bq-studio] { background: var(--bq-background); }
html[data-bq-studio] body { background: var(--bq-background); color: var(--bq-text); }
html[data-bq-studio][data-bq-theme='night'] { color-scheme: dark; }
html[data-bq-studio][data-bq-theme='day'] { color-scheme: light; }
.bq-studio {
  color: var(--bq-text);
  font-family: var(--bq-font-ui);
  font-size: 1rem;
  line-height: 1.55;
  font-synthesis: none;
}
.bq-studio :where(button, input, select, textarea) { font-family: var(--bq-font-ui); }
.bq-studio :where(h1, h2, h3) { font-family: var(--bq-font-heading); font-weight: 600; color: var(--bq-text); }
.bq-studio :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--bq-focus);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--bq-focus-gap);
}
.bq-studio ::selection { background: var(--bq-selection); color: var(--bq-text); }
/* Shared numeric typography: never inherit display/reading serif for statistics. */
html body :is(.pf-stat strong, .mm-summary strong, .map-progress-ring span,
  .chbadge, .chscore, .featured-frac, .progress-meta strong, .qscore, .qbadge,
  .ob-score, .iq-mare, .num, .cat-scor, .doua .v, .pas .nr, .trait-pct,
  .map-streak, .home-streak, .fam-streak, .map-progress-text strong, .score-num) {
  font-family: var(--bq-font-ui) !important;
  font-variant-numeric: lining-nums tabular-nums;
}
html body :is(.pf-stat strong, .mm-summary strong, .method .num, .doua .v) { font-size: var(--bq-stat-size); line-height: 1.3; }
html body small { font-size: var(--bq-text-secondary); }
html body { font-variant-numeric: lining-nums tabular-nums; }
.bq-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--bq-border);
  border-radius: var(--bq-radius-control);
  background: var(--bq-surface);
  color: var(--bq-text);
  font: 600 .875rem/1.25 var(--bq-font-ui);
  cursor: pointer;
}
.bq-theme-toggle:hover { background: var(--bq-soft); }
.bq-state { width: min(100%, 720px); margin: 0 auto; padding: 32px 16px; }
.bq-studio .sk { max-width: 1200px; }
.bq-studio .sk :where(.sk-bar, .sk-hero, .sk-line, .sk-block, .sk-row3 i, .sk-grid i) { background: var(--bq-soft); }
@media (prefers-reduced-motion: reduce) {
  .bq-studio *, .bq-studio *::before, .bq-studio *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}