/* ============================================================================
   ds/base.css — the page itself under the New interface: ground, type, fields.
   Values are tokens (ds/tokens.css); nothing here is a literal colour or size.
   docs/DESIGN_SYSTEM.md §3. Loaded by the staff shell only when UI_NEW.
   ============================================================================ */
html.ui-new body{
  background: var(--surface-app);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}
html.ui-new h1, html.ui-new h2, html.ui-new h3{ font-family: var(--font-head); }

/* No moving or frosted effects (Adnan, 8 October): the rotating background, glass panels. */
html.ui-new .holo-bg{ display: none; }
html.ui-new *, html.ui-new *::before, html.ui-new *::after{
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The page under the bar runs the full width with the side gutter (decision 8). */
html.ui-new .appshell-body{
  max-width: none;
  margin: 0;
  padding: var(--sp-4) var(--gutter) var(--sp-6);
}

/* Fields: an edge you can see — ≥ 3:1 against the surface (the plan's review measured 1.5:1).
   Only the colour of an existing edge changes; a borderless field stays borderless. */
html.ui-new :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden], [type=submit], [type=button]), select, textarea){
  border-color: var(--input-border);
}
html.ui-new :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=file], [type=hidden], [type=submit], [type=button]), select, textarea):focus{
  border-color: var(--accent);
  outline: none;
  box-shadow: var(--focus-ring);
}
html.ui-new :is(input, select, textarea):is([aria-invalid=true], .is-invalid, :user-invalid){
  border-color: var(--tint-danger-fg);
}
html.ui-new :is(input, select, textarea):disabled{
  border-color: var(--border-strong);
  color: var(--text-disabled);
}
html.ui-new input[type=checkbox], html.ui-new input[type=radio]{ accent-color: var(--accent); }

html.ui-new :focus-visible{ outline: none; box-shadow: var(--focus-ring); }

@media (max-width: 767px){
  html.ui-new .appshell-body{ padding: var(--sp-3) var(--gutter) var(--sp-6); }
}