@import url("../icons/icon.css");
@import url("../../library/components/cards/card/card.css");
@import url("./motion.css?v=278.10");
@import url("./layout.css");
@import url("./ui.css");

/* Hostrend global browser behavior */
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  background: var(--white);
  overflow-x: clip;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

::selection {
  background: var(--brand-blue);
  color: var(--white);
}

::-moz-selection {
  background: var(--brand-blue);
  color: var(--white);
}

/*
 * HOSTREND SURFACE COLOR CONTEXTS
 *
 * Use an explicit surface class when a component/section has a colored or
 * dark background. CSS cannot reliably infer an element's visual background
 * and automatically switch all descendant text, so the context is opt-in.
 *
 * Example:
 *   <section class="host-surface--primary">...</section>
 *   <section class="host-surface--dark">...</section>
 *
 * Components may override these inherited semantic variables when a specific
 * element (badge, button, icon, etc.) intentionally uses its own treatment.
 */


/* Icon color context for dark/brand surfaces. */
.host-surface--primary,
.host-surface--dark {
  --icon-color-default: var(--color-white);
  --icon-color-secondary: rgba(255, 255, 255, 0.78);
  --icon-color-muted: rgba(255, 255, 255, 0.62);
  --icon-color-disabled: rgba(255, 255, 255, 0.42);
  --icon-color-inverse: var(--color-dark);
}

.host-surface--primary {
  --surface-text-primary: var(--color-white);
  --surface-text-secondary: rgba(255, 255, 255, 0.78);
  --surface-text-muted: rgba(255, 255, 255, 0.62);
  --surface-link: var(--color-white);
  --surface-on-primary: var(--color-white);
}

.host-surface--dark {
  --surface-text-primary: var(--color-white);
  --surface-text-secondary: rgba(255, 255, 255, 0.78);
  --surface-text-muted: rgba(255, 255, 255, 0.62);
  --surface-link: var(--color-white);
  --surface-on-primary: var(--color-white);
}

/* Surface-context text rules: colored/dark surfaces explicitly opt into light content text. */
.host-surface--primary :where(h1, h2, h3, h4, h5, h6) ,
.host-surface--dark :where(h1, h2, h3, h4, h5, h6) {
  color: var(--surface-text-primary, #FFFFFF) !important;
  -webkit-text-fill-color: var(--surface-text-primary, #FFFFFF);
}

.host-surface--primary :where(p, small, label, li) ,
.host-surface--dark :where(p, small, label, li) {
  color: var(--surface-text-secondary, rgba(255,255,255,.78)) !important;
  -webkit-text-fill-color: var(--surface-text-secondary, rgba(255,255,255,.78));
}

.host-surface--primary :where(a),
.host-surface--dark :where(a) {
  color: var(--surface-link, #FFFFFF);
}

.host-surface--light {
  --surface-text-primary: var(--color-dark);
  --surface-text-secondary: var(--color-secondary-text);
  --surface-text-muted: #94A3B8;
  --surface-link: var(--color-primary);
  --surface-on-primary: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}