/*
 * UsynAI production UX quality layer.
 * Loaded after all feature styles and brand.css.
 * It fixes contrast, typography and control sizing without changing DOM contracts.
 */

:root {
  --ux-text-xs: 12px;
  --ux-text-sm: 13px;
  --ux-text-md: 14px;
  --ux-text-lg: 16px;
  --ux-title-sm: 18px;
  --ux-title-md: 22px;
  --ux-title-lg: 30px;
  --ux-line: 1.5;
  --ux-line-relaxed: 1.65;
  --ux-control: 46px;
  --ux-control-mobile: 50px;
  --ux-dark: #0b0f2a;
  --ux-dark-soft: #11163a;
  --ux-light: #ffffff;
  --ux-light-soft: #d8dcef;
  --ux-muted-light: #aeb5ce;
  --ux-muted: #667085;
}

html[data-brand="usynai"] {
  color-scheme: light;
  font-size: 16px;
}

body.usynai-brand {
  color: var(--ink);
  font-size: var(--ux-text-md);
  line-height: var(--ux-line);
  overflow-wrap: anywhere;
}

body.usynai-brand p,
body.usynai-brand li,
body.usynai-brand label,
body.usynai-brand button,
body.usynai-brand input,
body.usynai-brand select,
body.usynai-brand textarea {
  line-height: var(--ux-line);
}

body.usynai-brand button,
body.usynai-brand input,
body.usynai-brand select,
body.usynai-brand textarea {
  font-size: var(--ux-text-md);
}

body.usynai-brand h1,
body.usynai-brand h2,
body.usynai-brand h3,
body.usynai-brand h4,
body.usynai-brand h5,
body.usynai-brand h6 {
  text-wrap: balance;
}

body.usynai-brand h1 {
  font-size: clamp(30px, 2.2vw, 38px);
  line-height: 1.12;
}

body.usynai-brand h2 {
  font-size: clamp(22px, 1.7vw, 30px);
  line-height: 1.18;
}

body.usynai-brand h3 {
  font-size: clamp(17px, 1.2vw, 20px);
  line-height: 1.25;
}

body.usynai-brand small {
  line-height: 1.45;
}

/* ---------- Light surfaces: always dark readable type ---------- */
body.usynai-brand :is(
  .panel,
  .metric-card:not(.metric-primary),
  .product-metric:not(.primary),
  .connect-form-card,
  .loading-card,
  .business-profile-form,
  .marketplace-settings,
  .marketplace-settings-card,
  .admin-user-card,
  .admin-section,
  .admin-cabinet-toolbar,
  .admin-kpi:not(.primary),
  .assistant-main,
  .assistant-side,
  .products-empty,
  .products-loading,
  .products-register,
  .profitability-register,
  .faq-feature-grid article,
  .faq-list details,
  .auth-card
) {
  color: var(--ink);
}

body.usynai-brand :is(
  .panel,
  .metric-card:not(.metric-primary),
  .product-metric:not(.primary),
  .connect-form-card,
  .loading-card,
  .business-profile-form,
  .marketplace-settings,
  .marketplace-settings-card,
  .admin-user-card,
  .admin-section,
  .admin-cabinet-toolbar,
  .admin-kpi:not(.primary),
  .assistant-main,
  .assistant-side,
  .products-empty,
  .products-loading,
  .products-register,
  .profitability-register,
  .auth-card
) :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--ink);
}

body.usynai-brand :is(
  .panel,
  .metric-card:not(.metric-primary),
  .product-metric:not(.primary),
  .connect-form-card,
  .loading-card,
  .business-profile-form,
  .marketplace-settings,
  .marketplace-settings-card,
  .admin-user-card,
  .admin-section,
  .admin-cabinet-toolbar,
  .admin-kpi:not(.primary),
  .assistant-main,
  .assistant-side,
  .products-empty,
  .products-loading,
  .products-register,
  .profitability-register,
  .auth-card
) :is(p, small, .page-subtitle) {
  color: var(--ink-soft);
}

/* ---------- Dark surfaces: always light readable type ---------- */
body.usynai-brand :is(
  .sidebar,
  .connect-hero,
  .auth-visual,
  .faq-hero,
  .business-profile-intro,
  .admin-hero,
  .metric-primary,
  .admin-kpi.primary
) {
  color: var(--ux-light);
}

body.usynai-brand :is(
  .sidebar,
  .connect-hero,
  .auth-visual,
  .faq-hero,
  .business-profile-intro,
  .admin-hero,
  .metric-primary,
  .admin-kpi.primary
) :is(h1, h2, h3, h4, h5, h6, strong, b) {
  color: var(--ux-light);
}

body.usynai-brand :is(
  .sidebar,
  .connect-hero,
  .auth-visual,
  .faq-hero,
  .business-profile-intro,
  .admin-hero,
  .metric-primary,
  .admin-kpi.primary
) :is(p, small) {
  color: var(--ux-light-soft);
}

body.usynai-brand :is(.connect-hero, .auth-visual, .faq-hero, .business-profile-intro, .admin-hero) :is(.eyebrow, .panel-kicker, .profile-kicker) {
  color: #d8d2ff;
}

/* Dashboard primary metric had dark text inherited from executive_ui.css. */
body.usynai-brand .metric-primary > span,
body.usynai-brand .metric-primary .metric-label,
body.usynai-brand .metric-primary strong,
body.usynai-brand .metric-primary small,
body.usynai-brand .admin-kpi.primary span,
body.usynai-brand .admin-kpi.primary strong,
body.usynai-brand .admin-kpi.primary small {
  color: #fff;
}

body.usynai-brand .metric-primary small,
body.usynai-brand .admin-kpi.primary span,
body.usynai-brand .admin-kpi.primary small {
  color: #e2ddff;
}

/* ---------- Sidebar ---------- */
body.usynai-brand .brand small {
  color: #b5bdd3;
  font-size: 10px;
  line-height: 1.3;
}

body.usynai-brand .workspace-card strong {
  color: #fff;
  font-size: var(--ux-text-sm);
}

body.usynai-brand .workspace-card small {
  color: #aeb6ce;
  font-size: 11px;
}

body.usynai-brand .nav-item {
  min-height: 46px;
  font-size: var(--ux-text-sm);
  line-height: 1.3;
}

body.usynai-brand .nav-item em {
  color: #c1c7d8;
  font-size: 10px;
}

body.usynai-brand .system-status strong {
  color: #f5f7ff;
  font-size: var(--ux-text-xs);
}

body.usynai-brand .system-status small,
body.usynai-brand .version {
  color: #9ea6bf;
  font-size: 10px;
}

/* ---------- Header, cards and data density ---------- */
body.usynai-brand .page-subtitle {
  color: var(--ink-soft);
  font-size: var(--ux-text-md);
  line-height: 1.55;
}

body.usynai-brand .eyebrow,
body.usynai-brand .panel-kicker,
body.usynai-brand .profile-kicker {
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
}

body.usynai-brand .connection-badge {
  font-size: var(--ux-text-xs);
  font-weight: 700;
}

body.usynai-brand .metric-card > span,
body.usynai-brand .metric-label,
body.usynai-brand .product-metric > span {
  font-size: var(--ux-text-xs);
  line-height: 1.35;
}

body.usynai-brand .metric-card strong,
body.usynai-brand .product-metric strong,
body.usynai-brand .profitability-metric strong,
body.usynai-brand .admin-kpi strong {
  font-variant-numeric: tabular-nums;
}

body.usynai-brand .metric-card small,
body.usynai-brand .product-metric small,
body.usynai-brand .profitability-metric small,
body.usynai-brand .admin-kpi small {
  font-size: var(--ux-text-xs);
}

body.usynai-brand .panel-header h3 {
  font-size: var(--ux-title-sm);
}

body.usynai-brand .performance-strip span,
body.usynai-brand .performance-strip small,
body.usynai-brand .status-name,
body.usynai-brand .status-count,
body.usynai-brand .chart-summary span {
  font-size: var(--ux-text-xs);
}

body.usynai-brand .performance-strip strong,
body.usynai-brand .chart-summary strong {
  color: var(--ink);
}

/* ---------- Buttons and fields ---------- */
body.usynai-brand :is(
  .primary-button,
  .secondary-button,
  .auth-submit,
  .assistant-composer button,
  .admin-open-cabinet,
  .faq-primary-button,
  .faq-secondary-button
) {
  min-height: 44px;
  font-size: var(--ux-text-sm);
  font-weight: 750;
}

body.usynai-brand :is(input, select, textarea) {
  min-height: var(--ux-control);
  color: var(--ink);
  background: #fff;
  font-size: var(--ux-text-md);
}

body.usynai-brand :is(input, textarea)::placeholder {
  color: #9298aa;
  opacity: 1;
}

body.usynai-brand :is(input, select, textarea):disabled,
body.usynai-brand button:disabled {
  opacity: .58;
}

body.usynai-brand label > span,
body.usynai-brand .field-label,
body.usynai-brand .date-grid label span,
body.usynai-brand .marketplace-settings-card label,
body.usynai-brand .profile-grid label > span {
  color: #3f465a;
  font-size: var(--ux-text-xs);
  font-weight: 700;
}

body.usynai-brand :is(
  .settings-help,
  .profile-help,
  .profile-grid label > small,
  .marketplace-card-head p,
  .form-heading p,
  .security-note,
  .error-message,
  .settings-message
) {
  font-size: var(--ux-text-xs);
  line-height: 1.55;
}

body.usynai-brand .text-button,
body.usynai-brand .auth-link,
body.usynai-brand .connect-settings-note button {
  color: var(--primary-strong);
  font-size: var(--ux-text-xs);
  font-weight: 750;
}

/* ---------- Onboarding and auth ---------- */
body.usynai-brand .connect-hero-content > p,
body.usynai-brand .auth-hero p {
  color: #c7cce0;
  font-size: 15px;
  line-height: var(--ux-line-relaxed);
}

body.usynai-brand .feature-list strong,
body.usynai-brand .auth-point strong {
  color: #fff;
  font-size: var(--ux-text-sm);
}

body.usynai-brand .feature-list small,
body.usynai-brand .auth-point small {
  color: #b1b7cc;
  font-size: var(--ux-text-xs);
}

body.usynai-brand .auth-card-head h2 {
  color: var(--ink);
  font-size: clamp(28px, 2vw, 34px);
}

body.usynai-brand .auth-card-head small,
body.usynai-brand .auth-note,
body.usynai-brand .auth-message {
  font-size: var(--ux-text-xs);
}

body.usynai-brand .auth-tabs button {
  color: #666d80;
  font-size: var(--ux-text-sm);
}

body.usynai-brand .auth-tabs button.active {
  color: var(--ink);
  background: #fff;
}

/* ---------- Business profile ---------- */
body.usynai-brand .business-profile-intro h2 {
  color: #fff;
  font-size: clamp(28px, 2.2vw, 36px);
}

body.usynai-brand .business-profile-intro > p {
  color: #c7ccdd;
  font-size: var(--ux-text-sm);
  line-height: var(--ux-line-relaxed);
}

body.usynai-brand .profile-benefits strong {
  color: #fff;
  font-size: var(--ux-text-sm);
}

body.usynai-brand .profile-benefits small,
body.usynai-brand .profile-privacy p,
body.usynai-brand .profile-privacy strong {
  color: #c1c6d8;
  font-size: var(--ux-text-xs);
}

body.usynai-brand .profile-form-head h3,
body.usynai-brand .profile-section-title h3 {
  color: var(--ink);
  font-size: var(--ux-title-sm);
}

body.usynai-brand .profile-section-title > small,
body.usynai-brand .tariff-source-card small,
body.usynai-brand .delivery-overrides summary {
  font-size: var(--ux-text-xs);
}

body.usynai-brand .profile-input-suffix b,
body.usynai-brand .profile-saved-badge,
body.usynai-brand .tariff-source-card a {
  font-size: 11px;
}

/* ---------- Developer/admin ---------- */
body.usynai-brand .admin-view {
  padding: 28px 0 48px;
}

body.usynai-brand .admin-hero {
  background:
    radial-gradient(circle at 92% 0%, rgba(0, 212, 255, .13), transparent 33%),
    linear-gradient(145deg, #0d112c, #171641 67%, #292161);
}

body.usynai-brand .admin-hero-copy p {
  color: #d6d0ff;
  font-size: 11px;
}

body.usynai-brand .admin-hero-copy h2 {
  color: #fff;
  font-size: clamp(26px, 2vw, 32px);
}

body.usynai-brand .admin-hero-copy small {
  color: #c7ccdf;
  font-size: var(--ux-text-sm);
  line-height: 1.6;
}

body.usynai-brand .admin-owner-badge {
  color: #f1efff;
  font-size: var(--ux-text-xs);
}

body.usynai-brand .admin-tabs button {
  min-height: 42px;
  color: #62697b;
  font-size: var(--ux-text-xs);
}

body.usynai-brand .admin-tabs button.active {
  color: #fff;
}

body.usynai-brand .admin-loading,
body.usynai-brand .admin-empty,
body.usynai-brand .admin-error,
body.usynai-brand .admin-toolbar > small {
  font-size: var(--ux-text-xs);
}

body.usynai-brand .admin-search input {
  height: var(--ux-control);
  font-size: var(--ux-text-sm);
}

body.usynai-brand .admin-user-card-head strong {
  font-size: var(--ux-text-sm);
}

body.usynai-brand .admin-user-card-head small,
body.usynai-brand .admin-user-card-body p,
body.usynai-brand .admin-user-card-body span,
body.usynai-brand .admin-user-card-body b {
  font-size: var(--ux-text-xs);
}

body.usynai-brand .admin-open-cabinet {
  font-size: var(--ux-text-xs);
}

body.usynai-brand .admin-cabinet-toolbar p,
body.usynai-brand .admin-cabinet-toolbar small,
body.usynai-brand .admin-cabinet-toolbar label span,
body.usynai-brand .admin-cabinet-toolbar select,
body.usynai-brand .admin-readonly-notice span,
body.usynai-brand .admin-readonly-notice strong {
  font-size: var(--ux-text-xs);
}

body.usynai-brand .admin-cabinet-toolbar h3,
body.usynai-brand .admin-section-head h3 {
  color: var(--ink);
  font-size: var(--ux-title-sm);
}

body.usynai-brand .admin-kpi span,
body.usynai-brand .admin-section-head p,
body.usynai-brand .admin-section-head small,
body.usynai-brand .admin-cabinet-facts span,
body.usynai-brand .admin-cabinet-facts strong,
body.usynai-brand .admin-setting strong,
body.usynai-brand .admin-setting small,
body.usynai-brand .admin-setting b {
  font-size: var(--ux-text-xs);
}

body.usynai-brand .admin-table th {
  color: #62697b;
  background: #f7f8fc;
  font-size: 11px;
}

body.usynai-brand .admin-table td {
  color: #3f465a;
  font-size: var(--ux-text-xs);
  line-height: 1.5;
}

/* ---------- Assistant ---------- */
body.usynai-brand .assistant-head h2,
body.usynai-brand .assistant-side h3,
body.usynai-brand .assistant-empty strong {
  color: var(--ink);
}

body.usynai-brand .assistant-head p,
body.usynai-brand .assistant-empty,
body.usynai-brand .assistant-meta,
body.usynai-brand .assistant-accuracy-result {
  color: var(--ink-soft);
  font-size: var(--ux-text-sm);
}

body.usynai-brand .assistant-message {
  font-size: var(--ux-text-md);
  line-height: 1.6;
}

body.usynai-brand .assistant-message.user,
body.usynai-brand .assistant-message.user strong {
  color: #fff;
}

body.usynai-brand .assistant-message.assistant,
body.usynai-brand .assistant-message.assistant strong,
body.usynai-brand .assistant-message.markdown :is(h3, h4, h5, h6) {
  color: #172033;
}

body.usynai-brand .assistant-prompt {
  color: #30384d;
  font-size: var(--ux-text-sm);
  line-height: 1.45;
}

/* ---------- Tables ---------- */
body.usynai-brand table {
  color: var(--ink);
  font-size: var(--ux-text-sm);
}

body.usynai-brand th {
  color: #646b7e;
  background: #f7f8fc;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35;
}

body.usynai-brand td {
  color: #40475a;
  font-size: var(--ux-text-sm);
  line-height: 1.5;
}

body.usynai-brand td strong {
  color: var(--ink);
  font-size: var(--ux-text-sm);
}

body.usynai-brand .order-status,
body.usynai-brand .product-rank,
body.usynai-brand .abc-note {
  font-size: 11px;
}

/* ---------- FAQ ---------- */
body.usynai-brand .faq-hero h1,
body.usynai-brand .faq-hero h2,
body.usynai-brand .faq-hero h3,
body.usynai-brand .faq-hero strong {
  color: #fff;
}

body.usynai-brand .faq-hero p,
body.usynai-brand .faq-hero small,
body.usynai-brand .faq-trust-row span {
  color: #c9cee0;
}

body.usynai-brand .faq-section-heading > p,
body.usynai-brand .faq-feature-grid p,
body.usynai-brand .faq-list details p {
  color: var(--ink-soft);
  font-size: var(--ux-text-sm);
  line-height: 1.6;
}

body.usynai-brand .faq-list summary,
body.usynai-brand .faq-feature-grid h3 {
  color: var(--ink);
  font-size: var(--ux-text-md);
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  body.usynai-brand .app-main {
    padding: 24px 20px 44px;
  }

  body.usynai-brand .admin-view {
    padding-top: 20px;
  }
}

@media (max-width: 680px) {
  body.usynai-brand {
    font-size: var(--ux-text-md);
  }

  body.usynai-brand .app-main {
    padding: 18px 14px 36px;
  }

  body.usynai-brand h1 {
    font-size: 28px;
  }

  body.usynai-brand h2 {
    font-size: 23px;
  }

  body.usynai-brand :is(input, select, textarea) {
    min-height: var(--ux-control-mobile);
    font-size: 16px;
  }

  body.usynai-brand :is(
    .primary-button,
    .secondary-button,
    .auth-submit,
    .assistant-composer button,
    .admin-open-cabinet,
    .faq-primary-button,
    .faq-secondary-button
  ) {
    min-height: 48px;
    font-size: var(--ux-text-md);
  }

  body.usynai-brand .metric-card,
  body.usynai-brand .panel,
  body.usynai-brand .marketplace-settings-card,
  body.usynai-brand .admin-user-card,
  body.usynai-brand .admin-section {
    padding: 16px;
  }

  body.usynai-brand .admin-hero {
    padding: 20px 18px;
  }

  body.usynai-brand .assistant-composer {
    grid-template-columns: 1fr;
  }

  body.usynai-brand .assistant-composer button {
    width: 100%;
  }

  body.usynai-brand .assistant-message {
    max-width: 96%;
  }
}

@media (prefers-contrast: more) {
  body.usynai-brand {
    --ink-soft: #343a4d;
    --ink-muted: #565d70;
    --border: #cfd3df;
    --border-strong: #b9bfce;
  }

  body.usynai-brand :is(input, select, textarea, button, .panel, .metric-card) {
    border-width: 2px;
  }
}