/* Shared typography and colour foundation for Angular and legacy screens.
   Loaded after the legacy feature styles so both interfaces use the same roles. */
:root,
[data-theme="pink"],
body[data-theme="pink"] {
  color-scheme: light;
  --font-body: "DM Sans", "Segoe UI", Arial, sans-serif;
  --font-sans: var(--font-body);
  --font: var(--font-body);
  --font-display: "Bodoni Moda", Georgia, serif;
  --text-caption: .75rem;
  --text-small: .8125rem;
  --text-control: .875rem;
  --text-body: .9375rem;
  --bg: #fff8f7;
  --surface: #ffffff;
  --surface2: #fff0f3;
  --surface-warm: #fff5f4;
  --ink: #342a30;
  --ink-soft: #5d5058;
  --muted: #6f5b66;
  --primary: #963e5b;
  --primary2: #fbe9ed;
  --primary-ink: #ffffff;
  --rose: #a34665;
  --rose-deep: #963e5b;
  --rose-wash: #fbe9ed;
  --blush: #fbe9ed;
  --champagne: #b99b6a;
  --gold: #b99b6a;
  --accent: #805338;
  --accent-soft: #f5eee9;
  --success: #236345;
  --warning: #80500f;
  --danger: #a02d49;
  --line: #ecd9df;
  --line-strong: #d8bcc7;
  --control-line: #a77e90;
  --metal-fill: var(--primary);
  --metal-hover: #80324c;
  --metal-ink: var(--primary-ink);
  --metal-edge: var(--primary);
  --pearl-fill: #f7eff2;
  --shadow-soft: 0 12px 32px #342a300e;
}

[data-theme="dark"],
body[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1b1217;
  --surface: #281c23;
  --surface2: #382630;
  --surface-warm: #30212a;
  --ink: #f7eef1;
  --ink-soft: #ddcbd3;
  --muted: #c5acb9;
  --primary: #e0a2b9;
  --primary2: #3c2531;
  --primary-ink: #291923;
  --rose: #dfa1b8;
  --rose-deep: #e0a2b9;
  --rose-wash: #3c2531;
  --blush: #3c2531;
  --champagne: #d6bc8b;
  --gold: #d6bc8b;
  --accent: #e0bd91;
  --accent-soft: #392c26;
  --success: #9bdbb5;
  --warning: #edc183;
  --danger: #f0a4b4;
  --line: #4c3945;
  --line-strong: #735668;
  --control-line: #967487;
  --metal-fill: var(--primary);
  --metal-ink: var(--primary-ink);
  --metal-edge: var(--primary);
  --metal-hover: #efbdd0;
  --pearl-fill: #30242c;
  --shadow-soft: 0 15px 38px #00000038;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body :is(button, input, select, textarea, label, nav, table, dt, dd) {
  font-family: var(--font-body);
}

body :is(h1, h2) {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.2;
  text-wrap: balance;
}

body :is(h3, h4, h5, h6, .card-title, .product-title) {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.4;
}

/* Interface headings identify tasks and items; editorial headings retain Bodoni. */
body :is(.card, .modal, .filter-panel, .sidebar, .table-wrap) :is(h2, h3),
body :is(.dh-chat-sidebar, .chat-start, .chat-welcome, .support-heading,
  .support-thread-head, .admin-panel, .admin-attention, .catalog-filter-head,
  .catalog-filter-group, .msw-list-card, .msw-visit-card, .mp-sale-card,
  .doll-card, .competition-entry, .billing-payment-identity) :is(h2, h3),
body :is(.product-title, .detail-copy h1, .dh-radar-copy strong,
  .dh-composite-total, .dh-trust-score strong, .catalog-sheet > strong) {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.4;
}

body :is(.card-title, .product-title) { font-size: 1.0625rem; }
body :is(.card, .modal, .filter-panel) h3 { font-size: 1.125rem; }
body :is(.modal-head, .support-thread-head, .catalog-filter-head) h2 { font-size: 1.375rem; }

body :is(.eyebrow, .section-overline, .side-caption, .sidebar-overline,
  .filter-caption, .dh-nav-caption, .admin-nav-group, .admin-navigation-title,
  .billing-payment-kicker, .dh-season-label) {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .055em;
  line-height: 1.5;
  text-transform: none;
  color: var(--muted);
}

body :is(.product-meta-line, .detail-topline, .detail-rarity, .product-rarity) {
  letter-spacing: .015em;
  text-transform: none;
}

body :is(small, time, .tiny, .crumb, .side-note, .notice,
  .section-purpose, .chat-local-note, .chat-thread-topic, .chat-thread-last,
  .support-local-note, .support-thread-meta, .support-message-head,
  .competition-demo-notice, .competition-entry-person, .competition-entry-score,
  .msw-list-description, .msw-responsibility, .catalog-price-help,
  .billing-payment-footer, .admin-panel-description, .admin-member-handle) {
  font-size: var(--text-small);
  line-height: 1.6;
}

body :is(.muted, .tiny, .crumb, .side-note, .section-purpose) { color: var(--muted); }
body :is(.field, .filter-field, .filter-search, .sort-control) { font-size: var(--text-small); }
body :is(.btn, .btn.small, .btn.tiny, .link-button, .nav-item,
  .primary-action, .detail-save-button, .detail-legacy-button, .clear-button) {
  font-family: var(--font-body);
  font-size: var(--text-control);
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
}

body :is(.btn.primary, .primary-button, .hero-cta, .primary-action,
  .sample-button-primary, .detail-save-button, .detail-legacy-button,
  .clear-button, .top-action small, .dh-unread, .chat-unread) {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-ink);
  text-shadow: none;
}

body :is(.btn.primary, .primary-button, .hero-cta, .primary-action,
  .sample-button-primary, .detail-save-button, .detail-legacy-button,
  .clear-button):hover {
  background: var(--metal-hover);
  border-color: var(--metal-hover);
  color: var(--primary-ink);
}

body :is(input, select, textarea)::placeholder { color: var(--muted); opacity: 1; }
body :is(.field, .filter-field, .sort-control) :is(input, select, textarea),
body :is(.filter-search-input, .top-search input, .chat-search input,
  .support-search input, .support-toolbar select, .chat-compose textarea) {
  border-color: var(--control-line);
  color: var(--ink);
  font-size: var(--text-control);
}

body :is(.price, .subscription-price, .product-card-bottom strong,
  .detail-price-box strong, .dh-component-price, .price-metrics strong,
  .admin-metric strong, .billing-payment-amount dd) {
  font-family: var(--font-body);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.35;
}

body :is(table, time, .msw-list-code, .dh-composite-total) {
  font-variant-numeric: lining-nums tabular-nums;
}

body :is(th, td) { font-size: var(--text-small); line-height: 1.6; }
body th { letter-spacing: .015em; text-transform: none; }
body :is(.badge, .dh-tag, .support-status, .campaign-status, .aq-status,
  .product-rarity, .detail-rarity, .listing-color-chip, .category-chip) {
  font-size: var(--text-caption);
  letter-spacing: .01em;
  line-height: 1.5;
}

body :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

::selection { background: var(--primary); color: var(--primary-ink); }

/* Legacy feature sheets contain more specific, compact overrides. Keep their
   layouts, but give text the same readable roles as the Angular components. */
body :is(#app, #modal-root, #toast-root) :is(small, time, .tiny, .crumb,
  .side-note, .notice, .section-purpose, .chat-thread-topic, .chat-thread-last,
  .support-thread-meta, .support-message-head, .catalog-price-help) {
  font-size: var(--text-small);
  line-height: 1.6;
}

body :is(#app, #modal-root) :is(.eyebrow, .side-caption, .admin-nav-group,
  .dh-nav-caption, .admin-navigation-title, .billing-payment-kicker) {
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: none;
}

body :is(#app, #modal-root) :is(h3, h4, .card-title, .price,
  .plan-price, .subscription-price, .dh-component-price, .dh-composite-total,
  .dh-radar-copy strong, .dh-trust-score strong, .catalog-sheet > strong),
body :is(#app, #modal-root) :is(.card, .modal, .dh-chat-sidebar,
  .chat-start, .chat-welcome, .support-heading, .support-thread-head,
  .admin-panel, .catalog-filter-head, .msw-list-card, .msw-visit-card) h2 {
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.4;
}

body :is(#app, #modal-root) :is(.btn, .btn.small, .btn.tiny,
  .nav-item, .link-button, .catalog-filter-trigger, .catalog-clear-filters) {
  font-size: var(--text-control);
  letter-spacing: 0;
  line-height: 1.4;
}

body :is(#app, #modal-root) :is(label, .field, th, td) {
  font-size: var(--text-small);
  letter-spacing: 0;
  line-height: 1.6;
}

body :is(#app, #modal-root) :is(input, select, textarea) {
  font-family: var(--font-body);
  font-size: var(--text-control);
}

body :is(#app, #modal-root) :is(.badge, .dh-tag, .support-status,
  .campaign-status, .aq-status, .listing-color-chip, .category-chip,
  .billing-status, .confidence-badge) {
  font-size: var(--text-caption);
  letter-spacing: .01em;
  line-height: 1.5;
}

body [aria-invalid="true"] { border-color: var(--danger); }

/* Long names and translated labels should grow rather than escape their cards. */
body :is(.field, .filter-field, .card-body, .admin-panel, .support-ticket-copy) {
  min-width: 0;
}
body :is(.card-title, .product-title, .support-ticket-copy strong,
  .admin-panel h2, .modal-head h2) { overflow-wrap: anywhere; }
body :is(.field, .filter-field) :is(input, select, textarea) {
  max-width: 100%;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  /* Readable fields also prevent automatic zoom when typing on mobile Safari. */
  body :is(.field, .filter-field, .filter-search, .sort-control, .top-search,
    .chat-search, .chat-compose, .support-search, .support-toolbar)
    :is(input, select, textarea) { font-size: 1rem; }
  body :is(#app, #modal-root) :is(input, select, textarea) { font-size: 1rem; }
}