/* Catlo Global Design System V2 — one feature-flagged stylesheet, organized
   by the canonical dependency order: font/tokens, base, shared primitives,
   shell, public routes and scoped compatibility adapters. No business logic. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter/inter-v4.1-vietnamese-8f21ecb1.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+0300-036F, U+1E00-1EFF, U+2000-206F,
    U+20AB, U+2190-21FF, U+25A0-25FF;
}

/* Canonical V2 token activation. The root token definitions remain harmless
   while the flag is OFF; compatibility aliases change only on this body. */
body.catlo-global-design-v2 {
  --catlo-font-family: var(--catlo-font-sans);
  --catlo-color-text: var(--catlo-text-primary);
  --catlo-color-text-muted: var(--catlo-text-muted);
  --catlo-color-border: var(--catlo-border-subtle);
  --catlo-color-border-strong: var(--catlo-border-default);
  --catlo-color-surface: var(--catlo-surface-card);
  --catlo-color-surface-soft: var(--catlo-surface-soft);
  --catlo-container-width: var(--catlo-container-width-v2);
  color: var(--catlo-text-default);
  font-family: var(--catlo-font-sans);
  font-size: var(--catlo-text-md);
  font-optical-sizing: auto;
  font-weight: var(--catlo-font-weight-regular);
  line-height: 1.5;
}

body.catlo-global-design-v2:is(.home, .search, .user, .catlo-category-page,
  .catlo-location-page, .catlo-route-home-v2, .catlo-route-category-v2,
  .catlo-route-location-v2) {
  background: var(--catlo-surface-soft);
}

body.catlo-global-design-v2 :where(button, input, select, textarea) {
  font-family: var(--catlo-font-sans);
}

body.catlo-global-design-v2 :where(h1, h2, h3, h4, h5, h6) {
  color: var(--catlo-text-primary);
  font-weight: var(--catlo-font-weight-bold);
  letter-spacing: -.015em;
}

body.catlo-global-design-v2 :where(p, li, dd, dt, label, input, select, textarea, button) {
  line-height: 1.5;
}

body.catlo-global-design-v2 :where(pre, code, kbd, samp, .catlo-seo-code,
  .catlo-seo-ai-result, .catlo-social-code-block) {
  font-family: var(--catlo-font-mono);
}

/* Preserve icon/glyph ownership. These are explicit allowlisted exceptions. */
body.catlo-global-design-v2 :where(.fa, .fas, .far, .fab, [class^="fa-"],
  [class*=" fa-"], .icons, [class^="ico-"], [class*=" ico-"])::before,
body.catlo-global-design-v2 :where(.fa, .fas, .far, .fab, [class^="fa-"],
  [class*=" fa-"], .icons, [class^="ico-"], [class*=" ico-"])::after {
  font-family: inherit;
}

body.catlo-global-design-v2 a {
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

body.catlo-global-design-v2 :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--catlo-color-focus) 30%, transparent);
  outline-offset: 2px;
}

/* Shared primitives */
body.catlo-global-design-v2 :where(.catlo-ui-button, main .btn, main .btn-submit,
  main button[type="submit"], main input[type="submit"], main input[type="button"]) {
  min-height: 42px;
  border-radius: var(--catlo-radius-md);
  font-size: var(--catlo-text-base);
  font-weight: var(--catlo-font-weight-semibold);
  line-height: 1.25;
}

body.catlo-global-design-v2 :where(.catlo-ui-button--primary-pill,
  .catlo-ui-button--follow-compact) {
  border-radius: var(--catlo-radius-md);
  font-weight: var(--catlo-font-weight-semibold);
}

body.catlo-global-design-v2 :where(main input:not([type="checkbox"]):not([type="radio"]),
  main select, main textarea, .catlo-ui-form-field > input) {
  border-color: var(--catlo-border-default);
  border-radius: var(--catlo-radius-md);
  color: var(--catlo-text-primary);
  font-size: var(--catlo-text-md);
}

body.catlo-global-design-v2 :where(main input:not([type="checkbox"]):not([type="radio"]),
  main select) {
  min-height: 44px;
}

body.catlo-global-design-v2 :where(input, textarea)::placeholder {
  color: var(--catlo-text-subtle);
  opacity: 1;
}

body.catlo-global-design-v2 :where(.catlo-ui-card, .catlo-listing-card,
  .catlo-notification-center__item, .catlo-chat-panel) {
  border-color: var(--catlo-border-subtle);
  border-radius: var(--catlo-radius-lg);
  background: var(--catlo-surface-card);
  box-shadow: none;
}

body.catlo-global-design-v2 :where(.catlo-ui-card, .catlo-listing-card) {
  padding: var(--catlo-space-4);
}

body.catlo-global-design-v2 .catlo-listing-card {
  padding: 0;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

body.catlo-global-design-v2 .catlo-listing-card__title {
  color: var(--catlo-text-primary);
  font-size: var(--catlo-text-md);
  font-weight: var(--catlo-font-weight-semibold);
  line-height: 1.35;
}

body.catlo-global-design-v2 .catlo-listing-card__price {
  color: var(--catlo-text-strong);
  font-size: var(--catlo-text-lg);
  font-weight: var(--catlo-font-weight-bold);
}

body.catlo-global-design-v2 :where(.catlo-listing-card__meta,
  .catlo-listing-card__location) {
  color: var(--catlo-text-muted);
  font-size: var(--catlo-text-sm);
  font-weight: var(--catlo-font-weight-regular);
}

body.catlo-global-design-v2 .catlo-listing-card__seller .catlo-feed-card__seller-trigger {
  color: var(--catlo-text-secondary);
  font-size: var(--catlo-text-sm);
}

@media (hover: hover) and (pointer: fine) {
  body.catlo-global-design-v2 .catlo-listing-card:hover {
    border-color: var(--catlo-border-default);
    box-shadow: var(--catlo-shadow-md);
    transform: none;
  }
}

body.catlo-global-design-v2 .catlo-ui-share__dialog {
  border-radius: var(--catlo-radius-lg);
}

body.catlo-global-design-v2 :where(.catlo-ui-share__dialog h2,
  .catlo-ui-modal h2) {
  font-size: var(--catlo-heading-sm);
  line-height: 1.3;
}

/* Global shell */
body.catlo-global-design-v2 .catlo-site-header {
  min-height: 68px;
  border-bottom: 1px solid var(--catlo-border-subtle);
  background: var(--catlo-surface-card);
  color: var(--catlo-text-primary);
}

body.catlo-global-design-v2.home .catlo-site-header {
  background: var(--catlo-surface-card);
}

body.catlo-global-design-v2 .catlo-site-header__inner {
  min-height: 68px;
}

body.catlo-global-design-v2 .catlo-site-header > .wrapper {
  width: min(var(--catlo-container-width-v2), calc(100% - 32px));
}

body.catlo-global-design-v2 .catlo-site-header .nav a {
  min-height: 40px;
  height: 40px;
  margin-block: 14px;
  padding: 9px 11px;
  border-radius: var(--catlo-radius-md);
  color: var(--catlo-text-default);
  font-size: var(--catlo-text-base);
  font-weight: var(--catlo-font-weight-semibold);
  line-height: 20px;
}

body.catlo-global-design-v2 .catlo-site-header .nav a.publish {
  border-color: var(--catlo-color-primary);
  background: var(--catlo-color-primary);
  color: #fff;
}

body.catlo-global-design-v2 .catlo-site-header .nav a.publish:hover {
  border-color: var(--catlo-color-primary-hover);
  background: var(--catlo-color-primary-hover);
  box-shadow: none;
}

body.catlo-global-design-v2 .catlo-site-header .nav a.my-account > strong {
  color: var(--catlo-text-primary);
  font-size: var(--catlo-text-base);
  font-weight: var(--catlo-font-weight-semibold);
}

body.catlo-global-design-v2 .catlo-site-header .nav a.my-account > span,
body.catlo-global-design-v2 .catlo-header-brand__descriptor {
  color: var(--catlo-text-muted);
  font-size: var(--catlo-text-xs);
  font-weight: var(--catlo-font-weight-medium);
}

body.catlo-global-design-v2 footer {
  border-top-color: var(--catlo-border-subtle);
  background: var(--catlo-surface-card);
  color: var(--catlo-text-secondary);
  font-size: var(--catlo-text-base);
}

body.catlo-global-design-v2 footer :where(.copy, small) {
  color: var(--catlo-text-muted);
  font-size: var(--catlo-text-sm);
}

/* Marketplace and shared public routes */
body.catlo-global-design-v2 :where(.catlo-home-latest, .catlo-home-discover,
  .catlo-category-listings, .catlo-location-listings, .related-products,
  .catlo-public-profile__listings) > :where(h2, .section-title),
body.catlo-global-design-v2 :where(.catlo-category-subcategories,
  .catlo-category-listings) h2 {
  margin-bottom: var(--catlo-space-4);
  font-size: var(--catlo-heading-md);
  font-weight: var(--catlo-font-weight-bold);
  line-height: 1.33;
}

body.catlo-global-design-v2 :where(.catlo-route-category,
  .catlo-route-location, .catlo-route-search, .catlo-route-public-profile) {
  color: var(--catlo-text-default);
}

body.catlo-global-design-v2 :where(.catlo-category-header h1,
  .catlo-location-header h1),
body.catlo-global-design-v2.search h1 {
  font-size: clamp(30px, 3vw, var(--catlo-heading-xl));
  font-weight: var(--catlo-font-weight-bold);
  line-height: 1.2;
}

body.catlo-global-design-v2 :where(.catlo-category-header > p,
  .catlo-location-header > p) {
  color: var(--catlo-text-secondary);
  font-size: var(--catlo-text-md);
}

body.catlo-global-design-v2 :where(.catlo-category-subcategories__link,
  .catlo-home-chip, .catlo-category-chip, .catlo-filter-chip) {
  border-color: var(--catlo-border-default);
  border-radius: var(--catlo-radius-md);
  background: var(--catlo-surface-card);
  color: var(--catlo-text-default);
  font-size: var(--catlo-text-sm);
  font-weight: var(--catlo-font-weight-medium);
}

body.catlo-global-design-v2 :where(.catlo-category-empty, .catlo-location-empty,
  .catlo-search-empty, .catlo-ui-empty) {
  border-color: var(--catlo-border-subtle);
  border-radius: var(--catlo-radius-lg);
  background: var(--catlo-surface-card);
  color: var(--catlo-text-secondary);
}

body.catlo-global-design-v2 :where(.catlo-category-pagination,
  .catlo-location-pagination, .catlo-public-profile__pagination) :where(a, span) {
  min-width: 40px;
  min-height: 40px;
  border-color: var(--catlo-border-default);
  border-radius: var(--catlo-radius-md);
  font-size: var(--catlo-text-base);
}

body.catlo-global-design-v2.item :where(h1, .item-title h1, .catlo-item-title) {
  font-size: clamp(30px, 3vw, var(--catlo-heading-xl));
  font-weight: var(--catlo-font-weight-bold);
  line-height: 1.2;
}

body.catlo-global-design-v2.item :where(.price, .item-price, .catlo-item-price) {
  color: var(--catlo-text-strong);
  font-weight: var(--catlo-font-weight-bold);
}

body.catlo-global-design-v2 :where(.item-description, .catlo-rich-text,
  .catlo-item-description) {
  color: var(--catlo-text-default);
  font-size: var(--catlo-text-lg);
  line-height: 1.65;
}

body.catlo-global-design-v2 :where(.item-description, .catlo-rich-text,
  .catlo-item-description) a {
  text-decoration: underline;
}

/* Profile, account, Business, notifications and messaging */
body.catlo-global-design-v2 :where(.catlo-public-profile, .catlo-account-page,
  .catlo-notification-center, .catlo-chat-shell, .catlo-directory,
  .catlo-workflow, .catlo-business-integrations-workspace, .api-layout) {
  color: var(--catlo-text-default);
}

body.catlo-global-design-v2 :where(.catlo-public-profile__hero,
  .catlo-account-page > section, .catlo-workflow__card,
  .catlo-business-integrations-workspace section) {
  border-color: var(--catlo-border-subtle);
  border-radius: var(--catlo-radius-lg);
  background: var(--catlo-surface-card);
  box-shadow: none;
}

body.catlo-global-design-v2 :where(.catlo-public-profile__section-head h2,
  .catlo-account-page h2, .catlo-notification-center h1,
  .catlo-chat-shell h1, .catlo-workflow h2,
  .catlo-business-integrations-workspace h2) {
  font-size: var(--catlo-heading-md);
  font-weight: var(--catlo-font-weight-bold);
  line-height: 1.33;
}

body.catlo-global-design-v2 .catlo-notification-center__item-heading :where(strong, b) {
  font-weight: var(--catlo-font-weight-semibold);
}

body.catlo-global-design-v2 .catlo-notification-center__preview {
  color: var(--catlo-text-default);
  font-size: var(--catlo-text-base);
  font-weight: var(--catlo-font-weight-regular);
}

body.catlo-global-design-v2 :where(.catlo-notification-center__meta,
  .catlo-notification-center__kind, .catlo-chat-message__meta) {
  color: var(--catlo-text-muted);
  font-size: var(--catlo-text-sm);
  font-weight: var(--catlo-font-weight-regular);
}

body.catlo-global-design-v2 .catlo-chat-text {
  font-size: var(--catlo-text-md);
  line-height: 1.55;
}

body.catlo-global-design-v2 .catlo-chat-composer {
  border-color: var(--catlo-border-subtle);
  background: var(--catlo-surface-card);
}

/* Standalone API documentation receives this class/link from the UI Core
   Business compatibility adapter, without changing its renderer or metadata. */
body.catlo-global-design-v2 .api-top {
  height: 64px;
  border-color: var(--catlo-border-subtle);
  background: var(--catlo-surface-card);
}

body.catlo-global-design-v2 .api-layout {
  max-width: var(--catlo-container-width-v2);
}

body.catlo-global-design-v2 .api-layout h1 {
  font-size: var(--catlo-heading-xl);
}

body.catlo-global-design-v2 .api-layout h2 {
  font-size: var(--catlo-heading-md);
}

body.catlo-global-design-v2 .api-layout :where(table, th, td) {
  font-size: var(--catlo-text-base);
}

body.catlo-global-design-v2 .api-layout th {
  color: var(--catlo-text-strong);
  font-weight: var(--catlo-font-weight-semibold);
}

/* Recruitment convergence: typography/tokens only; R1–R9 behavior and layout
   remain owned by the Recruitment plugin. */
body.catlo-global-design-v2 :where(.catlo-recruit-page, .catlo-recruit-account) {
  --recruit-text: var(--catlo-text-primary);
  --recruit-muted: var(--catlo-text-muted);
  --recruit-border: var(--catlo-border-subtle);
  --recruit-soft: var(--catlo-color-primary-soft);
  color: var(--catlo-text-default);
}

body.catlo-global-design-v2 .catlo-recruit-page__hero {
  border-color: var(--catlo-border-subtle);
  border-radius: var(--catlo-radius-lg);
  background: var(--catlo-surface-card);
}

body.catlo-global-design-v2 .catlo-recruit-page__hero h1,
body.catlo-global-design-v2 .catlo-recruit-publisher__header h1 {
  font-size: clamp(30px, 3vw, var(--catlo-heading-xl));
  font-weight: var(--catlo-font-weight-bold);
  line-height: 1.2;
}

body.catlo-global-design-v2 :where(.catlo-recruit-page__actions a,
  .catlo-recruit-search button, .catlo-recruit-card__cta,
  .catlo-recruit-publish__submit button, .catlo-recruit-tabs a) {
  border-radius: var(--catlo-radius-md);
  font-weight: var(--catlo-font-weight-semibold);
}

body.catlo-global-design-v2 :where(.catlo-recruit-search,
  .catlo-recruit-publish, .catlo-recruit-card, .catlo-recruit-empty,
  .catlo-recruit-detail__main, .catlo-recruit-detail__aside) {
  border-color: var(--catlo-border-subtle);
  border-radius: var(--catlo-radius-lg);
  background: var(--catlo-surface-card);
  box-shadow: none;
}

body.catlo-global-design-v2 .catlo-recruit-card__title {
  font-size: var(--catlo-text-xl);
  font-weight: var(--catlo-font-weight-semibold);
}

body.catlo-global-design-v2 :where(.catlo-recruit-card__actor,
  .catlo-recruit-card__meta, .catlo-recruit-card__location,
  .catlo-recruit-card__time) {
  color: var(--catlo-text-muted);
  font-size: var(--catlo-text-sm);
}

body.catlo-global-design-v2 :where(.catlo-recruit-card__skills li,
  .catlo-recruit-detail__skill-chip, .catlo-recruit-card__new) {
  border-radius: var(--catlo-radius-sm);
  background: var(--catlo-surface-soft);
  color: var(--catlo-text-secondary);
  font-size: var(--catlo-text-sm);
  font-weight: var(--catlo-font-weight-medium);
}

/* Xiangqi UI shell only. Canvas pixels and renderer font assignments are not
   inherited CSS and remain untouched. Board geometry is also unchanged. */
body.catlo-global-design-v2 .catlo-game:not([data-screen="game"]) {
  color: var(--catlo-text-default);
}

body.catlo-global-design-v2 .catlo-game:not([data-screen="game"]) .catlo-game__brand h1 {
  font-size: var(--catlo-heading-lg);
  font-weight: var(--catlo-font-weight-bold);
  line-height: 1.2;
}

body.catlo-global-design-v2 .catlo-game:not([data-screen="game"]) :where(
  .catlo-game__mode, .catlo-game__friend-panel, .catlo-game__rating-summary) {
  border-color: var(--catlo-border-subtle);
  border-radius: var(--catlo-radius-lg);
  background: var(--catlo-surface-card);
  box-shadow: none;
}

body.catlo-global-design-v2 .catlo-game:not([data-screen="game"]) :where(
  .catlo-game__mode-badge, .catlo-game__mode-copy small,
  .catlo-game__mode-footer--machine label, .catlo-game__join label,
  .catlo-game__join small, .catlo-game__room-action--create small) {
  font-size: var(--catlo-text-xs);
  font-weight: var(--catlo-font-weight-medium);
}

body.catlo-global-design-v2 .catlo-game :where(.catlo-game__button,
  button, input, select) {
  font-weight: var(--catlo-font-weight-semibold);
}

@media (max-width: 767px) {
  body.catlo-global-design-v2 {
    font-size: var(--catlo-text-base);
  }

  body.catlo-global-design-v2 .catlo-site-header .nav a {
    margin: 0;
    min-height: 48px;
    height: auto;
    border-radius: 0;
    font-size: var(--catlo-text-base);
  }

  body.catlo-global-design-v2 :where(.catlo-category-header h1,
    .catlo-location-header h1, .catlo-recruit-page__hero h1,
    .catlo-recruit-publisher__header h1),
  body.catlo-global-design-v2.search h1,
  body.catlo-global-design-v2.item h1 {
    font-size: clamp(26px, 7vw, 30px);
  }

  body.catlo-global-design-v2 :where(main input:not([type="checkbox"]):not([type="radio"]),
    main select, main textarea) {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.catlo-global-design-v2 *,
  body.catlo-global-design-v2 *::before,
  body.catlo-global-design-v2 *::after {
    scroll-behavior: auto;
    transition-duration: 0s;
  }
}