/* ============================================================
   Windlume v2 — design system  ·  direction: "Modern Editorial"
   ------------------------------------------------------------
   Source of truth: design/qwen-tokens.md  (§1 token table, §2 contrast,
   §3 CSS), produced by qwen-max via DashScope compatible-mode
   (request id chatcmpl-e00fe143-61ca-94b5-b66d-064a7d2799d6).
   Direction chosen from design/qwen-directions.md (Direction 2).

   The model-authored blocks are kept in their order and shape.
   Values marked [curation] were changed after measuring: the model
   reported "all contrasts meet 4.5:1", but 13 pairs did not, and it
   emitted --v2-hairline with border syntax while the CSS uses it as
   a box-shadow. See design/CURATION.md for the full diff.
   ============================================================ */

:root {
  color-scheme: light;

  /* surfaces — qwen: #F8F8F8 / #EAEAEA / #FFFFFF / #FAFAFA */
  --v2-bg: #F8F8F8;
  --v2-bg-sunken: #EAEAEA;
  --v2-surface: #FFFFFF;
  --v2-surface-raised: #FAFAFA;

  /* ink */
  --v2-text: #222222;
  --v2-text-muted: #555555;
  --v2-text-subtle: #6A6A6A;      /* [curation] qwen #777777 was 4.25:1 */

  /* lines */
  --v2-border: #DADADA;
  --v2-border-strong: #BBBBBB;
  --v2-rule: #E0E0E0;

  /* accent — deep teal-green, qwen's replacement for its own orange */
  --v2-accent: #004D40;
  --v2-accent-hover: #00695C;
  --v2-accent-ink: #FFFFFF;
  --v2-accent-soft: #B2DFDB;
  --v2-pine: #FFAB40;
  --v2-pine-soft: #FFE0B2;
  --v2-tab-bg: #004D40;
  --v2-tab-ink: #FFFFFF;
  --v2-focus-ring: #007E64;

  /* states */
  --v2-danger: #C62828;           /* [curation] qwen #D32F2F sat at 4.69 */
  --v2-danger-soft: #FBE4E2;      /* [curation] qwen #EF9A9A carried no legible ink */
  --v2-warn: #FFAB40;             /* [curation] qwen named this --v2-pine */
  --v2-warn-soft: #FFE0B2;
  --v2-warn-ink: #3A2600;
  --v2-warn-soft-ink: #3A2600;
  --v2-selection: #B2DFDB;

  /* [curation] qwen wrote "1px solid rgba(...)" — border syntax, used here
     as box-shadow, where it is invalid and silently dropped. Split in two. */
  --v2-hairline: 0 0 0 1px var(--v2-border);
  --v2-hairline-border: 1px solid var(--v2-border);

  /* type — local stacks only, CJK fallbacks last (qwen, verbatim) */
  --v2-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Songti SC";
  --v2-font-body: Georgia, Times, "Times New Roman", serif, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Songti SC";
  --v2-font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Songti SC";

  /* scale — qwen's base values kept as the floor of each clamp */
  --v2-fs-display: clamp(2rem, 1.35rem + 2.1vw, 3.5rem);
  --v2-fs-h1: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --v2-fs-h2: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --v2-fs-h3: 1.125rem;           /* [curation] qwen 1rem was under body size */
  --v2-fs-body: 1.125rem;         /* 18px, qwen */
  --v2-fs-body-lg: 1.25rem;       /* 20px, qwen */
  --v2-fs-body-sm: 1rem;          /* 16px, qwen */
  --v2-fs-label: 0.75rem;         /* [curation] 14px mono uppercase broke labels */
  --v2-lh-display: 1.16;          /* [curation] qwen 1.2 on a 3-line hero */
  --v2-lh-heading: 1.28;
  --v2-lh-body: 1.55;             /* qwen 1.5, opened slightly for serif */
  --v2-ls-display: -0.012em;      /* [curation] qwen +0.05em tracked a 56px sans */
  --v2-ls-heading: -0.005em;
  --v2-ls-label: 0.09em;

  /* spacing — qwen's 4px scale, extended past 36px for section rhythm */
  --v2-sp-1: 4px;
  --v2-sp-2: 8px;
  --v2-sp-3: 12px;
  --v2-sp-4: 16px;
  --v2-sp-5: 20px;
  --v2-sp-6: 24px;
  --v2-sp-7: 28px;
  --v2-sp-8: 32px;
  --v2-sp-9: 36px;
  --v2-sp-10: 48px;               /* [curation] added */
  --v2-sp-11: 64px;               /* [curation] added */

  --v2-radius-sm: 3px;
  --v2-radius-md: 6px;
  --v2-radius-lg: 9px;

  --v2-dur-fast: 100ms;
  --v2-dur-base: 150ms;
  --v2-ease: ease-in-out;
  --v2-max: 1180px;
}

html[data-theme="night"] {
  color-scheme: dark;

  /* [curation] qwen's neutral greys, warmed: a faint brown cast, not blue */
  --v2-bg: #2C2A28;
  --v2-bg-sunken: #3A3836;
  --v2-surface: #201F1D;
  --v2-surface-raised: #1B1A18;
  --v2-text: #E6E3DE;
  --v2-text-muted: #A39E96;
  --v2-text-subtle: #B5B0A8;
  --v2-border: #46433F;
  --v2-border-strong: #5C5854;
  --v2-rule: #38352F;

  /* [curation] qwen's #007E64 was 2.72:1 on its own dark bg */
  --v2-accent: #5FD3B4;
  --v2-accent-hover: #86E3CB;
  --v2-accent-ink: #10312A;
  --v2-accent-soft: #123B33;      /* [curation] qwen #00BCD4 was a fill, not a tint */
  --v2-pine: #FFB74D;
  --v2-pine-soft: #4A3418;
  --v2-tab-bg: #5FD3B4;
  --v2-tab-ink: #10312A;
  --v2-focus-ring: #5FD3B4;

  --v2-danger: #FF8A80;
  --v2-danger-soft: #4A2320;
  --v2-warn: #FFB74D;
  --v2-warn-soft: #4A3418;
  --v2-warn-ink: #1F1200;
  --v2-warn-soft-ink: #FFD9A8;
  --v2-selection: #1E4A3F;

  --v2-hairline: 0 0 0 1px var(--v2-border);
  --v2-hairline-border: 1px solid var(--v2-border);
}

/* ---------- base ---------- */
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  background: var(--v2-bg);
  scroll-behavior: smooth;
}
body {
  background: var(--v2-bg);
  color: var(--v2-text);
  font-family: var(--v2-font-body);
  font-size: var(--v2-fs-body);
  line-height: var(--v2-lh-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* no overflow-x:hidden: horizontal overflow must stay measurable */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--v2-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--v2-accent-hover); }
::selection { background: var(--v2-selection); color: var(--v2-text); }
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--v2-focus-ring);
  outline-offset: 2px;
  border-radius: var(--v2-radius-sm);
}

/* ---------- layout ---------- */
.v2-shell {
  width: 100%;
  max-width: var(--v2-max);
  margin: 0 auto;
  padding: 0 var(--v2-sp-5);
}
@media (min-width: 768px) { .v2-shell { padding: 0 var(--v2-sp-6); } }
@media (min-width: 1200px) { .v2-shell { padding: 0 var(--v2-sp-7); } }
.v2-page { padding: 0 0 var(--v2-sp-8); }

.v2-rule { border: 0; border-top: 1px solid var(--v2-rule); margin: var(--v2-sp-6) 0; }
.v2-rule--tight { margin: var(--v2-sp-4) 0; }

.v2-kicker {
  display: inline-block;
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-label);
  letter-spacing: var(--v2-ls-label);
  text-transform: uppercase;
  color: var(--v2-text-subtle);
  font-weight: 500;
  line-height: 1.4;
}

/* the signature detail: a solid tab flush to the section heading */
.v2-tab {
  display: inline-block;
  background: var(--v2-tab-bg);
  color: var(--v2-tab-ink);
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-label);
  letter-spacing: var(--v2-ls-label);
  text-transform: uppercase;
  font-weight: 600;
  padding: var(--v2-sp-1) var(--v2-sp-2);
  border-radius: var(--v2-radius-sm);
  line-height: 1.4;
}

/* ---------- type ---------- */
.v2-display, h1.v2-display {
  font-family: var(--v2-font-display);
  font-size: var(--v2-fs-display);
  line-height: var(--v2-lh-display);
  letter-spacing: var(--v2-ls-display);
  font-weight: 650;
  margin: 0 0 var(--v2-sp-4);
  color: var(--v2-text);
  text-wrap: balance;
}
.v2-h1, h1 {
  font-family: var(--v2-font-display);
  font-size: var(--v2-fs-h1);
  line-height: var(--v2-lh-heading);
  letter-spacing: var(--v2-ls-heading);
  font-weight: 650;
  margin: 0 0 var(--v2-sp-3);
  color: var(--v2-text);
}
.v2-h2, h2 {
  font-family: var(--v2-font-display);
  font-size: var(--v2-fs-h2);
  line-height: var(--v2-lh-heading);
  letter-spacing: var(--v2-ls-heading);
  font-weight: 650;
  margin: var(--v2-sp-6) 0 var(--v2-sp-3);
  color: var(--v2-text);
}
.v2-h3, h3 {
  font-family: var(--v2-font-display);
  font-size: var(--v2-fs-h3);
  line-height: var(--v2-lh-heading);
  letter-spacing: var(--v2-ls-heading);
  font-weight: 600;
  margin: var(--v2-sp-5) 0 var(--v2-sp-2);
  color: var(--v2-text);
}
.v2-body-lg { font-size: var(--v2-fs-body-lg); line-height: var(--v2-lh-body); }
.v2-body-sm { font-size: var(--v2-fs-body-sm); line-height: 1.6; }
.v2-label {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-label);
  letter-spacing: var(--v2-ls-label);
  text-transform: uppercase;
  color: var(--v2-text-subtle);
  font-weight: 500;
}
.v2-num {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-label);
  font-weight: 600;
  letter-spacing: var(--v2-ls-label);
  color: var(--v2-text-subtle);
  font-variant-numeric: tabular-nums;
}
p { margin: 0 0 var(--v2-sp-4); }
.v2-measure { max-width: 62ch; }

/* ---------- surfaces ---------- */
.v2-panel {
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-md);
  padding: var(--v2-sp-5);
}
.v2-panel--focus {
  border-color: var(--v2-border-strong);
  border-left: 3px solid var(--v2-accent);
  padding-left: calc(var(--v2-sp-5) - 2px);
}
.v2-panel--sunken { background: var(--v2-bg-sunken); }
.v2-panel--raised { background: var(--v2-surface-raised); box-shadow: var(--v2-hairline); }

/* ---------- controls ---------- */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-sp-2);
  font-family: var(--v2-font-display);
  font-size: var(--v2-fs-body-sm);
  font-weight: 600;
  line-height: 1;
  padding: var(--v2-sp-3) var(--v2-sp-4);
  border-radius: var(--v2-radius-md);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--v2-dur-fast) var(--v2-ease),
              color var(--v2-dur-fast) var(--v2-ease),
              border-color var(--v2-dur-fast) var(--v2-ease);
}
.v2-btn--primary { background: var(--v2-accent); color: var(--v2-accent-ink); border-color: var(--v2-accent); }
.v2-btn--primary:hover { background: var(--v2-accent-hover); border-color: var(--v2-accent-hover); color: var(--v2-accent-ink); }
.v2-btn--quiet { background: transparent; color: var(--v2-text); border-color: var(--v2-border-strong); }
.v2-btn--quiet:hover { background: var(--v2-accent-soft); border-color: var(--v2-accent); color: var(--v2-text); }
.v2-btn--ghost { background: transparent; color: var(--v2-accent); border-color: transparent; padding-left: var(--v2-sp-2); padding-right: var(--v2-sp-2); }
.v2-btn--ghost:hover { color: var(--v2-accent-hover); background: var(--v2-accent-soft); }
.v2-btn[disabled], .v2-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.v2-link {
  color: var(--v2-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--v2-dur-fast) var(--v2-ease);
}
.v2-link:hover { color: var(--v2-accent-hover); }
.v2-link--quiet { text-decoration: none; }
.v2-link--quiet:hover { text-decoration: underline; }

/* ---------- 12-column grid ---------- */
.v2-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--v2-sp-4);
}
@media (min-width: 768px) {
  .v2-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--v2-sp-5); }
}
@media (min-width: 1200px) {
  .v2-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--v2-sp-5); }
}
.v2-col-main { grid-column: 1 / -1; }
.v2-col-rail { grid-column: 1 / -1; }
@media (min-width: 1200px) {
  .v2-col-main { grid-column: 2 / 10; }
  .v2-col-rail { grid-column: 10 / 13; }
}
.v2-col-full { grid-column: 1 / -1; }
.v2-rail { display: flex; flex-direction: column; gap: var(--v2-sp-4); }
@media (min-width: 1200px) { .v2-rail { position: sticky; top: var(--v2-sp-6); align-self: start; } }

/* ---------- small pieces ---------- */
.v2-tag {
  display: inline-block;
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-label);
  letter-spacing: var(--v2-ls-label);
  text-transform: uppercase;
  color: var(--v2-text-muted);
  background: var(--v2-bg-sunken);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-sm);
  padding: 2px var(--v2-sp-2);
  line-height: 1.5;
}
.v2-tag--accent { color: var(--v2-accent); background: var(--v2-accent-soft); border-color: transparent; }
.v2-tag--warn { color: var(--v2-warn-ink); background: var(--v2-warn); border-color: transparent; }

.v2-meta {
  font-family: var(--v2-font-mono);
  font-size: var(--v2-fs-label);
  letter-spacing: var(--v2-ls-label);
  text-transform: uppercase;
  color: var(--v2-text-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--v2-sp-3);
  line-height: 1.5;
}
.v2-meta > * + * { border-left: 1px solid var(--v2-border); padding-left: var(--v2-sp-3); }

/* ---------- [curation] added primitives ---------- */
.v2-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  background: var(--v2-accent);
  color: var(--v2-accent-ink);
  padding: var(--v2-sp-2) var(--v2-sp-4);
  border-radius: 0 0 var(--v2-radius-md) 0;
  font-family: var(--v2-font-display);
  font-size: var(--v2-fs-body-sm);
  font-weight: 600;
  text-decoration: none;
}
.v2-skip:focus { left: 0; color: var(--v2-accent-ink); }

/* hairline list: a table of contents of rows, no boxes */
.v2-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--v2-rule); }
.v2-rows > li { border-bottom: 1px solid var(--v2-rule); }
.v2-rows a,
.v2-rows .v2-row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--v2-sp-3);
  padding: var(--v2-sp-3) 0;
  text-decoration: none;
  color: var(--v2-text);
  transition: color var(--v2-dur-fast) var(--v2-ease),
              background-color var(--v2-dur-fast) var(--v2-ease);
}
.v2-rows a:hover { color: var(--v2-accent); background: var(--v2-accent-soft); }
.v2-rows a:hover .v2-num { color: var(--v2-accent); }
.v2-rows .v2-row__text { min-width: 0; }
.v2-rows .v2-row__title {
  font-family: var(--v2-font-display);
  font-size: var(--v2-fs-body-sm);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: var(--v2-ls-heading);
}
.v2-rows .v2-row__desc {
  display: block;
  font-size: 0.9375rem;
  color: var(--v2-text-muted);
  line-height: 1.5;
  margin-top: 2px;
}
.v2-rows .v2-row__meta { justify-self: end; }

/* ---------- [curation] theme switcher skin ----------
   lib/theme-switch.js injects its own <style> at runtime, so these
   overrides carry !important to win regardless of injection order. */
#wlThemeFab {
  position: fixed !important;
  right: var(--v2-sp-4) !important;
  bottom: var(--v2-sp-4) !important;
  z-index: 9998 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--v2-sp-2) !important;
  padding: var(--v2-sp-2) var(--v2-sp-3) !important;
  background: var(--v2-surface) !important;
  color: var(--v2-text-muted) !important;
  border: 1px solid var(--v2-border-strong) !important;
  border-radius: var(--v2-radius-md) !important;
  font-family: var(--v2-font-mono) !important;
  font-size: var(--v2-fs-label) !important;
  letter-spacing: var(--v2-ls-label) !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background-color var(--v2-dur-fast) var(--v2-ease), color var(--v2-dur-fast) var(--v2-ease) !important;
}
#wlThemeFab:hover { background: var(--v2-accent-soft) !important; color: var(--v2-text) !important; transform: none !important; }
#wlThemeFab.active { background: var(--v2-accent) !important; color: var(--v2-accent-ink) !important; border-color: var(--v2-accent) !important; }
#wlThemeFab .wl-fab-ico { font-size: 12px !important; line-height: 1 !important; }
#wlThemeFab .wl-fab-txt { white-space: nowrap !important; }

#wlThemePanel {
  position: fixed !important;
  right: var(--v2-sp-4) !important;
  bottom: 64px !important;
  z-index: 9999 !important;
  width: 280px !important;
  padding: 0 !important;
  background: var(--v2-surface) !important;
  border: 1px solid var(--v2-border-strong) !important;
  border-radius: var(--v2-radius-md) !important;
  box-shadow: 0 18px 40px rgba(20, 18, 14, .18) !important;
  font-family: var(--v2-font-display) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--v2-dur-base) var(--v2-ease), transform var(--v2-dur-base) var(--v2-ease), visibility var(--v2-dur-base) !important;
}
#wlThemePanel.open { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; }
#wlThemePanel .wl-t-head {
  padding: 12px 14px 8px !important;
  color: var(--v2-text-subtle) !important;
  font-family: var(--v2-font-mono) !important;
  font-size: var(--v2-fs-label) !important;
  letter-spacing: var(--v2-ls-label) !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  border-bottom: 1px solid var(--v2-border) !important;
  margin-bottom: 4px !important;
}
#wlThemePanel .wl-t-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  text-align: left !important;
  cursor: pointer !important;
  font-family: inherit !important;
}
#wlThemePanel .wl-t-item:hover { background: var(--v2-accent-soft) !important; }
#wlThemePanel .wl-t-item.active { background: var(--v2-accent-soft) !important; box-shadow: inset 3px 0 0 var(--v2-accent) !important; }
#wlThemePanel .wl-t-body b { display: block !important; font-size: 14px !important; font-weight: 600 !important; color: var(--v2-text) !important; line-height: 1.3 !important; }
#wlThemePanel .wl-t-body i { display: block !important; font-size: 11.5px !important; font-style: normal !important; color: var(--v2-text-muted) !important; line-height: 1.45 !important; margin-top: 2px !important; }
#wlThemePanel .wl-t-sw { display: flex !important; gap: 3px !important; flex: 0 0 auto !important; }
#wlThemePanel .wl-t-sw em { width: 10px !important; height: 10px !important; border-radius: 1px !important; display: block !important; box-shadow: 0 0 0 1px rgba(0,0,0,.12) !important; }
@media (max-width: 620px) {
  #wlThemeFab { right: 12px !important; bottom: 12px !important; padding: 8px 11px !important; }
  #wlThemeFab .wl-fab-txt { display: none !important; }
  #wlThemePanel { right: 12px !important; left: 12px !important; width: auto !important; bottom: 56px !important; }
}
@media print { #wlThemeFab, #wlThemePanel { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}