/* Camlino UI finish: existing palette, geometry, layout and branding remain owned
   by the original stylesheets. This layer changes interaction and surface detail only. */

/* Short, predictable transitions; no movement or size interpolation. */
#app :is(button, input, select, textarea, a),
#account-menu :is(button, a),
#modal :is(button, input, select, textarea, a),
body .tc-admin :is(button, input, select, textarea, a) {
  transition-property: border-color, box-shadow, outline-color, color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

/* Keep text entry and selection readable in the existing light and dark themes. */
#app :is(input, textarea),
#modal :is(input, textarea),
body .tc-admin :is(input, textarea) {
  caret-color: var(--tc-accent, var(--blue, #1284ff));
}
#app ::selection,
#account-menu ::selection,
#modal ::selection,
body .tc-admin ::selection {
  background-color: color-mix(in srgb, var(--tc-accent, var(--blue, #1284ff)) 24%, transparent);
  color: inherit;
}

/* Insets do not participate in sizing and preserve the original surface colour. */
#account-menu {
  box-shadow: 0 10px 28px color-mix(in srgb, var(--tc-text, var(--text, #16314c)) 12%, transparent);
}
#modal {
  box-shadow: 0 16px 44px color-mix(in srgb, var(--tc-text, var(--text, #16314c)) 15%, transparent);
}
body .tc-admin .card {
  box-shadow: 0 1px 3px color-mix(in srgb, var(--tc-text, var(--text, #16314c)) 5%, transparent);
}
#app :is(input, select, textarea),
#modal :is(input, select, textarea),
body .tc-admin :is(input, select, textarea) {
  border-color: var(--tc-line, var(--line));
}
#app :is(input, select, textarea):focus,
#modal :is(input, select, textarea):focus,
body .tc-admin :is(input, select, textarea):focus {
  border-color: var(--tc-accent, var(--blue, #1284ff));
}

/* Keyboard focus remains distinct from hover and does not change the box model. */
#app :is(button, input, select, textarea, a):focus-visible,
#account-menu :is(button, a):focus-visible,
#modal :is(button, input, select, textarea, a):focus-visible,
body .tc-admin :is(button, input, select, textarea, a):focus-visible {
  outline: 2px solid var(--tc-accent, var(--blue, #1284ff));
  outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
  #app button:not(:disabled):not([aria-disabled="true"]):hover,
  #account-menu button:not(:disabled):not([aria-disabled="true"]):hover,
  #modal button:not(:disabled):not([aria-disabled="true"]):hover,
  body .tc-admin button:not(:disabled):not([aria-disabled="true"]):hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc-accent, var(--blue, #1284ff)) 24%, transparent);
  }
}

#app button:disabled,
#account-menu button:disabled,
#modal button:disabled,
body .tc-admin button:disabled {
  cursor: not-allowed;
  box-shadow: none;
}
#app button[aria-busy="true"],
#account-menu button[aria-busy="true"],
#modal button[aria-busy="true"],
body .tc-admin button[aria-busy="true"] {
  cursor: progress;
}

/* Preserve amounts, units and formatting supplied by the current application. */
#modal :is(.wallet-total, .wallet-subset, .wallet-usd, .wallet-topup, .wallet-quote, .wallet-history, .product-price),
body .tc-admin :is([data-tc-money], [data-tc-number], .split-stat b, td) {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  body :is(#app, #account-menu, #modal, .tc-admin) :is(button, input, select, textarea, a) {
    transition-duration: 0ms;
  }
}

@media (forced-colors: active) {
  #account-menu,
  #modal,
  body .tc-admin .card,
  #app button,
  #account-menu button,
  #modal button,
  body .tc-admin button {
    box-shadow: none;
  }
  #app :is(button, input, select, textarea, a):focus-visible,
  #account-menu :is(button, a):focus-visible,
  #modal :is(button, input, select, textarea, a):focus-visible,
  body .tc-admin :is(button, input, select, textarea, a):focus-visible {
    outline-color: Highlight;
  }
  #app :is(input, select, textarea),
  #modal :is(input, select, textarea),
  body .tc-admin :is(input, select, textarea) {
    border-color: ButtonBorder;
  }
}
