/* Portable product-family primitives. Mirrored byte-for-byte to HVAC. */
@layer system {
  :root { font-synthesis: none; }
  html { color-scheme: dark; scroll-padding-top: var(--anchor-offset); }
  body { background: var(--bg-primary); color: var(--text-primary); font: var(--weight-regular) var(--type-body)/var(--leading-body) var(--font-body); }
  *, *::before, *::after { box-sizing: border-box; }
  button, input, select, textarea { font-family: var(--font-body); }
  p { font-size: var(--type-body); line-height: var(--leading-body); font-weight: var(--weight-regular); }
  strong, b { font-weight: var(--weight-semibold); }
  h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--weight-bold); }
  h1, h2, h3 { letter-spacing: var(--tracking-heading); text-shadow: none; }
  h1 { font-size: var(--type-display); line-height: var(--leading-display); }
  h2 { font-size: var(--type-section); line-height: var(--leading-heading); }
  h3 { font-size: var(--type-card); line-height: var(--leading-card); }
  h4, h5 { font-size: var(--type-ui); line-height: var(--leading-control); }
  h1 :is(span, strong, em), h2 :is(span, strong, em), h3 :is(span, strong, em) { font-family: inherit; font-weight: inherit; text-shadow: none; }
  label, legend, button { font-size: var(--type-ui); line-height: var(--leading-control); font-weight: var(--weight-medium); }
  figcaption, small { font-size: var(--type-caption); line-height: var(--leading-caption); }
  :is(.eyebrow, [class$="-eyebrow"], .ds-eyebrow) { font: var(--weight-semibold) var(--type-caption)/var(--leading-caption) var(--font-body); letter-spacing: var(--tracking-label); color: var(--accent); }
  .ds-intro { font-size: var(--type-intro); line-height: var(--leading-intro); }
  .ds-container { width: 100%; max-width: var(--container-width); padding-inline: var(--page-gutter); margin-inline: auto; }
  .ds-section { padding-block: var(--section-space); }
  .ds-section-compact { padding-block: var(--section-compact); }
  .ds-card { border: var(--border-width) solid var(--border); border-radius: var(--radius-card); padding: var(--card-padding); background: var(--bg-surface); box-shadow: var(--shadow); }
  .ds-light { color-scheme: light; color: var(--text-on-light); --on-surface-accent: var(--accent-dark); --secondary-hover-surface: var(--bg-light); }
  .ds-light :is(.eyebrow, .ds-eyebrow) { color: var(--on-surface-accent); }
  .ds-card:not(.ds-card-light) { --on-surface-accent: var(--accent); --secondary-hover-surface: var(--bg-elevated); }
  .ds-card-light { background: var(--bg-light); color: var(--text-on-light); border-color: var(--border-light); }

  .button, .nav-cta, .conversation-live-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--button-gap);
    min-height: var(--control-height); height: auto; max-width: 100%;
    padding: var(--button-padding-block) var(--button-padding-inline);
    font: var(--weight-semibold) var(--type-body)/var(--leading-control) var(--font-body);
    text-align: center; white-space: normal; text-decoration: none;
    border: var(--border-width) solid var(--button-background); border-radius: var(--radius-control);
    background: var(--button-background); color: var(--button-text); box-shadow: var(--shadow-button);
    transition: background var(--duration-control) var(--ease), border-color var(--duration-control) var(--ease), transform var(--duration-control) var(--ease);
    cursor: pointer;
  }
  :is(.button, .nav-cta, .conversation-live-cta):hover { background: var(--button-hover); border-color: var(--button-hover); box-shadow: var(--shadow-button); transform: translateY(-2px); }
  :is(.button, .nav-cta, .conversation-live-cta):active { transform: translateY(1px); }
  .button-small { min-height: var(--control-height-small); padding: var(--space-10) var(--space-16); }
  .button-secondary { background: transparent; color: var(--accent); border-color: var(--accent); box-shadow: none; }
  .button-secondary:hover { background: var(--bg-elevated); color: var(--accent); border-color: var(--accent-hover); box-shadow: none; }
  .ds-light .button-secondary { color: var(--on-surface-accent); border-color: var(--on-surface-accent); }
  .ds-light .button-secondary:hover { background: var(--secondary-hover-surface); }
  :is(.button, .nav-cta) span { color: inherit; margin-inline: 0; }
  :is(.button, .nav-cta):disabled { opacity: var(--opacity-disabled); cursor: not-allowed; transform: none; box-shadow: none; }
  .text-link { color: var(--accent); font: var(--weight-semibold) var(--type-ui)/var(--leading-control) var(--font-body); min-height: var(--touch-target); }
  .ds-light .text-link { color: var(--accent-dark); }
  button, [role="button"] { min-width: var(--touch-target); min-height: var(--touch-target); }
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea {
    min-height: var(--control-height); border: var(--border-width) solid var(--input-border); border-radius: var(--radius-control);
    background: var(--field-background); color: var(--field-text);
    font: var(--weight-medium) var(--type-body)/var(--leading-intro) var(--font-body);
  }
  input[type="checkbox"], input[type="radio"] { accent-color: var(--accent-dark); }
  :focus-visible { outline: var(--focus-width) solid var(--accent); outline-offset: var(--focus-offset); }
  .ds-light :focus-visible { outline-color: var(--on-surface-accent); }
  [aria-invalid="true"] { border-color: var(--status-danger); }
  .ds-error { color: var(--status-danger); background: var(--status-danger-surface); }

  /* Shared navigation dimensions and surface; menus retain local interaction logic. */
  .ds-header { position: sticky; top: 0; inset-inline: 0; z-index: var(--z-nav); min-height: 0; padding: 0; background: var(--tint-bg-primary-92); border-bottom: var(--border-width) solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(16px); }
  .ds-nav { width: 100%; max-width: var(--container-width); margin-inline: auto; min-height: var(--header-height); padding-inline: var(--page-gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-24); }
  .ds-brand { display: block; flex-shrink: 0; width: var(--brand-width); }
  .ds-brand img { display: block; width: 100%; height: var(--brand-height); object-fit: contain; }
  .ds-nav nav { font: var(--weight-medium) var(--type-caption)/var(--leading-control) var(--font-body); }
  .nav-label-short { display: none; }
  @media (max-width: 767px) {
    .ds-nav { gap: var(--space-8); }
    .ds-nav > .button .nav-label-long, .ds-nav > .button > svg { display: none; }
    .ds-nav > .button .nav-label-short { display: inline; }
    .ds-nav > .button { flex-shrink: 0; }
  }
  .ds-card-frame { padding: 0; }
  .ds-card-light :is(h1, h2, h3) { color: var(--text-on-light); }
  .ds-footer { width: 100%; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--page-gutter); background: var(--bg-primary); color: var(--text-secondary); }
  .ds-footer h2 { color: var(--text-primary); font: var(--weight-semibold) var(--type-ui)/var(--leading-control) var(--font-body); }
  .ds-footer :is(p, a) { font-size: var(--type-caption); line-height: var(--leading-body); }
  @media (prefers-reduced-transparency: reduce) { .ds-header { background: var(--bg-primary); backdrop-filter: none; } }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}